OkunElya/uni-web-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

moving all labs to old dir

Browse Source
This commit is contained in:
OkunElya
2026-02-26 21:55:48 +10:00
parent 76555d27a4
commit 4f1c66e838
132 changed files with 0 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
old/lectures/lec2/part1/task1.css Normal file
View File

@@ -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;
}

33
old/lectures/lec2/part1/task2.html Normal file
View File

@@ -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>

28
old/lectures/lec2/part1/task3.html Normal file
View File

@@ -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>

81
old/lectures/lec2/part1/task4-5.html Normal file
View File

@@ -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>

23
old/lectures/lec2/part2/task1.css Normal file
View File

@@ -0,0 +1,23 @@
.main > p:last-child{
color:green;
}
/*
<div class="menu">
<ol>
<li><a href="#">Комбинация селекторов</a></li>
<li><a href="#">Селекторы атрибутов</a></li>
</ol>
<p>CSS селекторы</p>
</div>
<div class="main">
<h2>Комбинация селекторов</h2>
<img src="tree.png">
<p> Различают следующие виды селекторов: </p>
<ol>
<li><a href="#">вложенный селектор;</a></li>
<li><a href="#">родительский селектор;</a></li>
</ol>
<p> Соединение селекторов</p> --- ВОТ ЕГО КРАСИМ!!!
</div>
*/

24
old/lectures/lec2/part2/task2.css Normal file
View File

@@ -0,0 +1,24 @@
.main li > [href="#"] {
color:green
}
/*
<div class="menu">
<ul>
<li><a href="a1.html">Комбинация селекторов</a></li>
<li><a href="#">Селекторы атрибутов</a></li>
</ul>
<p>CSS селекторы</p>
</div>
<div class="main">
<h2>Комбинация селекторов</h2>
<img src="tree.png">
<p> Различают следующие виды селекторов: </p>
<ol>
<li><a href="#">вложенный селектор;</a></li>
<li><a href="b1.html">родительский селектор;</a></li>
</ol>
<p> <a href="#"> Соединение селекторов </a></p>
</div>
*/

24
old/lectures/lec2/part2/task3.css Normal file
View File

@@ -0,0 +1,24 @@
h2, ol >li:nth-child(2) , ol + p{
color: green;
}
/*
<div class="menu">
<ul>
<li><a href="a1.html">Комбинация селекторов</a></li>
<li><a href="#">Селекторы атрибутов</a></li>
</ul>
</div>
<div class="main">
<h2>Комбинация селекторов</h2> ---
<img src="tree.png">
<p> Различают следующие виды селекторов: </p>
<ol>
<li><a href="#">вложенный селектор;</a></li>
<li><a href="#">родительский селектор;</a></li> ---
<li><a href="#">соседний селектор</a></li>
</ol>
<p> <a href="#"> Соединение селекторов </a></p> ---
</div>
*/

8
old/lectures/lec2/part3/task1.css Normal file
View File

@@ -0,0 +1,8 @@
div > a > img{
width: 10vw;
}
div > a {
display: inline-block;
}

8
old/lectures/lec2/part3/task2.css Normal file
View File

@@ -0,0 +1,8 @@
div > a > img{
width: 10vw;
min-width: 170px;
}
div > a {
min-width: 170px;
display: inline-block;
}

26
old/lectures/lec2/part3/task3.css Normal file
View File

@@ -0,0 +1,26 @@
div > a > img{
width: 10vw;
min-width: 170px;
}
div > a {
min-width: 170px;
}
div {
display: flex;
}
@media (max-width: 600px) {
div {
flex-direction: column;
align-items: center;
}
div > a {
width: 80vw;
max-width: 300px;
min-width: 0;
}
div > a > img {
width: 80vw;
max-width: 300px;
min-width: 0;
}
}

24
old/lectures/lec2/part4/task1.html Normal file
View File

@@ -0,0 +1,24 @@
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
<style>
.container {
display: flex;
flex-wrap: no-wrap;
background: LightGreen;
}
.container div {
min-width: 120px;
height: 50px;
margin: 5px;
border: solid thin green;
}
</style>

38
old/lectures/lec2/part4/task2.html Normal file
View File

@@ -0,0 +1,38 @@
<style>
.pict {
display: flex;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
}
.pict a img {
min-width:280px;
min-height:280px;
}
@media (max-width: 1000px) {
.pict {
flex-wrap: wrap;
}
}
@media (max-width: 700px) {
.pict {
flex-direction: column;
align-items: center;
}
}
</style>
<hr>
<div class="pict">
<a href="#"><img src="images/image_1.jpg"></a>
<a href="#"><img src="images/image_2.jpg"></a>
<a href="#"><img src="images/image_3.jpg"></a>
<a href="#"><img src="images/image_4.jpg"></a>
<a href="#"><img src="images/image_5.jpg"></a>
</div>
<hr>

46
old/lectures/lec2/part4/task3.html Normal file
View File

@@ -0,0 +1,46 @@
<style>
.pict {
display: flex;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
}
.pict a img {
min-width: 280px;
min-height: 280px;
}
.big {
min-width: 330px;
min-height: 330px;
}
@media (max-width: 1000px) {
.pict {
flex-wrap: wrap;
}
.big {
min-width: 280px;
min-height: 280px;
}
}
@media (max-width: 700px) {
.pict {
flex-direction: column;
align-items: center;
}
}
</style>
<hr>
<div class="pict">
<a href="#"><img src="images/image_1.jpg"></a>
<a href="#"><img src="images/image_2.jpg"></a>
<a href="#" class="big"><img src="images/image_3.jpg"></a>
<a href="#"><img src="images/image_4.jpg"></a>
<a href="#"><img src="images/image_5.jpg"></a>
</div>
<hr>