Skip to content

Commit c0ddd94

Browse files
Brodyga63Brodyga63
committed
Исправлены ошибки
1 parent c760f1d commit c0ddd94

3 files changed

Lines changed: 182 additions & 1 deletion

File tree

‎lab2‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎lab2/index.html‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
<!DOCTYPE html>
2+
<html lang="ru">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Лабораторная работа №2 | Продвинутая верстка</title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
11+
<section class="section-container">
12+
<h2 class="section-title">Анимация элементов списка</h2>
13+
<ul class="animated-list">
14+
<li class="animated-list__item">Веб-технологии</li>
15+
<li class="animated-list__item">Дизайн интерфейсов</li>
16+
<li class="animated-list__item">Алгоритмы</li>
17+
<li class="animated-list__item">Базы данных</li>
18+
</ul>
19+
</section>
20+
21+
<section class="section-container">
22+
<h2 class="section-title">Иерархия и контекстные стили</h2>
23+
<div class="family-tree">
24+
<div class="parent1">
25+
Родитель 1
26+
<div class="parent1__child">Ребенок 1.1</div>
27+
<div class="parent1__child">Ребенок 1.2</div>
28+
</div>
29+
30+
<div class="parent2">
31+
Родитель 2
32+
<div class="parent2__child">Ребенок 2.1</div>
33+
</div>
34+
35+
<div class="parent3">
36+
Родитель 3
37+
<div class="parent3__child">Ребенок 3.1</div>
38+
<div class="parent2__child parent2__child--guest">Ребенок 2 (В гостях)</div>
39+
</div>
40+
</div>
41+
</section>
42+
43+
<section class="promo">
44+
<h2 class="section-title">Языки программирования</h2>
45+
<p class="promo__text">
46+
Языки программирования — это инструменты, с помощью которых разработчики создают программное обеспечение...
47+
</p>
48+
<ul class="promo__list">
49+
<li class="promo__item"><a href="#" class="promo__link">Python</a> – популярный в Data Science.</li>
50+
<li class="promo__item"><a href="#" class="promo__link">JavaScript</a> – основной язык для фронтенда.</li>
51+
<li class="promo__item"><a href="#" class="promo__link">Java</a> – объектно-ориентированный язык.</li>
52+
<li class="promo__item"><a href="#" class="promo__link">C++</a> – мощный язык для систем.</li>
53+
<li class="promo__item"><a href="#" class="promo__link">C#</a> – язык от Microsoft.</li>
54+
<li class="promo__item"><a href="#" class="promo__link">Go</a> – язык для облачных технологий.</li>
55+
<li class="promo__item"><a href="#" class="promo__link">Ruby</a> – известен фреймворком Rails.</li>
56+
<li class="promo__item"><a href="#" class="promo__link">Swift</a> – язык Apple.</li>
57+
<li class="promo__item"><a href="#" class="promo__link">Kotlin</a> – для Android-разработки.</li>
58+
<li class="promo__item"><a href="#" class="promo__link">Rust</a> – акцент на безопасность.</li>
59+
</ul>
60+
</section>
61+
62+
63+
</body>
64+
</html>

‎lab2/style.css‎

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
.lab2-wrapper {
2+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
3+
line-height: 1.6;
4+
color: #333;
5+
max-width: 900px;
6+
margin: 0 auto;
7+
padding: 40px 20px;
8+
background-color: #f0f2f5;
9+
}
10+
11+
.section-container {
12+
background: #ffffff;
13+
padding: 30px;
14+
margin-bottom: 40px;
15+
border-radius: 12px;
16+
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
17+
}
18+
19+
.section-title {
20+
margin-top: 0;
21+
padding-bottom: 15px;
22+
border-bottom: 1px solid #eee;
23+
font-weight: 600;
24+
}
25+
26+
.animated-list {
27+
list-style: none;
28+
padding: 0;
29+
}
30+
31+
.animated-list__item {
32+
padding: 8px 0;
33+
font-size: 1.1rem;
34+
cursor: pointer;
35+
transition: color 0.3s ease-in-out;
36+
}
37+
38+
.animated-list__item:hover {
39+
color: #007bff;
40+
}
41+
42+
.family-tree {
43+
display: flex;
44+
flex-direction: column;
45+
gap: 20px;
46+
}
47+
48+
.parent1, .parent2, .parent3 {
49+
padding: 20px;
50+
border: 2px solid #e0e0e0;
51+
border-radius: 8px;
52+
font-weight: bold;
53+
}
54+
55+
.parent1__child, .parent2__child, .parent3__child {
56+
margin: 10px 0 0 30px;
57+
padding: 10px;
58+
font-weight: normal;
59+
background: rgba(0,0,0,0.02);
60+
}
61+
62+
/* ДОЧЕРНИЙ СЕЛЕКТОР (>) - Прямые потомки Родителя 1 */
63+
.parent1 > .parent1__child {
64+
color: #d9534f; /* Красный цвет для детей 1 */
65+
}
66+
67+
/* СТИЛИ ДЛЯ РОДИТЕЛЯ 2 */
68+
.parent2 {
69+
color: #f0ad4e; /* Оранжевый */
70+
}
71+
72+
.parent2__child {
73+
color: #b4005a;
74+
border: 1px dotted #f0ad4e;
75+
}
76+
/* Если parent3 идет ПОСЛЕ parent2, меняем цвет его текста и его детей на зеленый */
77+
.parent2 ~ .parent3,
78+
.parent2 ~ .parent3 .parent3__child {
79+
color: #5cb85c;
80+
border-color: #5cb85c;
81+
}
82+
83+
/* Меняем стиль для ребенка 2, если он оказался внутри Родителя 3 */
84+
.parent3 .parent2__child--guest {
85+
color: #6f42c1 !important; /* Пурпурный */
86+
border: 2px solid #6f42c1 !important;
87+
background: transparent;
88+
font-weight: bold;
89+
}
90+
91+
.promo {
92+
background: #fff;
93+
padding: 30px;
94+
border-radius: 12px;
95+
}
96+
97+
.promo__list {
98+
list-style: none;
99+
padding: 0;
100+
}
101+
102+
.promo__link::after {
103+
content: " 🌐";
104+
opacity: 0.7;
105+
}
106+
107+
.promo__list::after {
108+
content: "";
109+
display: block;
110+
margin: 40px auto;
111+
width: 100%;
112+
max-width: 450px;
113+
height: 80px;
114+
background-image: url('https://ssau.ru/pagefiles/of_docs/logo_osnovnoy_RUS.png');
115+
background-size: contain;
116+
background-repeat: no-repeat;
117+
background-position: center;
118+
}

0 commit comments

Comments
 (0)