finished up to bootstrap

2026-01-01 23:38:59 +10:00
parent b00d7fb34d
commit 1c50d7ce0e
17 changed files with 378 additions and 1 deletions
--- a/lectures/lec2/part1/task1.css
+++ b/lectures/lec2/part1/task1.css
@@ -0,0 +1,26 @@
+.menuItem {
+    text-align: center;
+}
+
+#menu ul {
+    padding-left: 0;
+    margin: .5%;
+}
+
+#menu li {
+    display: inline-block;
+    width: 16%;
+    background: #F00;
+}
+
+#menu a {
+    text-decoration: none;
+    color: white;
+}
+
+.pict {
+    width: 70%;
+    background: rgba(0, 255, 0, .5);
+    margin: 5px auto;
+    padding: 5px 0;
+}
--- a/lectures/lec2/part1/task2.html
+++ b/lectures/lec2/part1/task2.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Задание 2</title>
+    <style>
+        h1,
+        h2 {
+            text-align: center;
+            color: maroon;
+        }
+
+        ins {
+            text-decoration: underline;
+        }
+
+        i {
+            font-style: italic;
+        }
+    </style>
+</head>
+
+<body>
+    <h1>
+        <ins>Основы HTML</ins>
+    </h1>
+    <h2>
+        <i>Оглавление</i>
+    </h2>
+</body>
+
+</html>
--- a/lectures/lec2/part1/task3.html
+++ b/lectures/lec2/part1/task3.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+    <meta charset="UTF-8">
+    <title>Задание 3</title>
+    <style>
+        .blue-bold {
+            font-weight: bold;
+            color: blue;
+        }
+        .big-font{
+            font-size: 20px;
+            color: green;
+        }
+        .center-red {
+            color: red;
+            text-align: center;
+        }
+    </style>
+</head>
+<body>
+    <p class="blue-bold">Каскадность CSS:</p>
+    <ul>
+        <li class="center-red">расширение свойств;</li>
+        <li class="big-font center-red">переопределение свойств.</li>
+    </ul>
+</body>
+</html>
--- a/lectures/lec2/part1/task4-5.html
+++ b/lectures/lec2/part1/task4-5.html
@@ -0,0 +1,81 @@
+<!DOCTYPE HTML>
+<html>
+
+<head>
+    <meta charset=utf-8">
+    <title>Task 4</title>
+    <style>
+        div {
+            box-sizing: border-box;
+            background: lightblue;
+            text-align: center;
+            margin: 5px 5px;
+            
+        }
+
+        .menu{
+            text-align: end;
+        }
+        .menu > div{
+            width: 100px;
+            height: 50px;
+            display: inline-block;
+            background: violet;
+
+        }
+        .gray {
+            background: gainsboro;
+        }
+
+        .w50 {
+            width: 48%;
+            display: inline-block;
+            height: 250px;
+        }
+
+
+        .top {
+            width: 70%;
+            margin: 0 auto 20px;
+        }
+
+        .left {
+            display: inline-block;
+            width: 63%
+        }
+
+        .left .part {
+            height: 80px;
+        }
+
+        .right {
+            float: right;
+            width: 35%;
+            height: 340px;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="menu">
+        <div>меню1</div>
+        <div>меню2</div>
+        <div>меню3</div>
+        <div>меню4</div>
+    </div>
+    <div class="top">
+        <div class="gray w50"><span>рисунок 1</span></div>
+        <div class="gray w50"><span>рисунок 2</span></div>
+    </div>
+    <div class="main">
+        <div class="left">
+            <div class="gray part"><span>часть 1.1</span></div>
+            <div class="gray part"><span>часть 1.2</span></div>
+            <div class="gray part"><span>часть 1.3</span></div>
+            <div class="gray part"><span>часть 1.4</span></div>
+        </div>
+        <div class="gray right"><span>часть 2</span></div>
+    </div>
+</body>
+
+</html>