WEB-9lab-boiko
.docxСтудент Бойко Євгеній група 410-і
Лабораторна робота №9
Робота із зображеннями та фоном засобами CSS|
Мета: за допомогою таблиці стилів навчитися додавати на веб-сторінку фонове зображення та визначати прозорість, змінювати маркер списків та створювати горизонтальне меню, визначати розмір, рамку, прозорість та обтікання для зображень.
Скріншот:
Код програми:
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header id="header">
<h2>Бойко Евгеній Анатолійович</h2>
</header>
<div id="block1">
<img src="images/oreo.jpg" alt="oreo" class="img" />
<img src="images/rak.jpg" alt="ra4ek" class="img" />
<img src="images/lion.jpg" alt="lion" class="img" />
<img src="images/key.jpg" alt="key" class="img" />
</div>
<div id="block2">
<ul class="list_img">
<p>Канфетки и гекон на фоне</p>
<li>Oreo</li>
<li>Рачок</li>
<li>Lion</li>
<li>Золотой ключик</li>
</ul>
</div>
<footer id="footer">
<p>03.11.2020</p>
</footer>
</body>
</html>
Style.css
body {
height: 100vh;
background-image: url('./images/bg.jpg'); /*устанавливаем одно или несколько фоновых изображений для элемента, в нашем случае одно*/
background-position: center center;/*Задаем начальное положение фонового изображения*/
background-repeat: no-repeat; /*Определяем, как будет повторяться фоновое изображение, в нашем случае не повторяется*/
background-size: cover;/*Масштабируем изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока*/
margin: 0; /*Устанавливаем величину отступа от каждого края элемента*/
padding: 0;/*устанавливаем расстояние от внутреннего края рамки элемента до нашего фнового изображения*/
}
#block1 {
width: 650px;/*висота і ширина блоків*/
height: 650px;/*висота і ширина блоків*/
border: 3px groove; /*обрамлення блоків*/
margin: 20px;/*відступи за межами блоків*/
float: left;/*Выравниваем элементы по левому краю*/
font-size: 16px;/*устанавливаем размер шрифта элемента*/
font-family: serif;/*устанавливаем тип шрифта элемента*/
}
#block2 {
background-image: url('./images/1.jpg');
background-size: 300px;
background-repeat: no-repeat;
background-position: center center;
}
.img {
height: 250px;
width: 250px;
margin: 15px;
opacity: 0.6;/*прозорість елемента*/
object-fit: cover;
transition: 0.1s linear;
}
/*заміна зображень при наведенні курсора*/
.img:hover {
opacity: 1;
border: 2px #594db7 solid;
}
.list_img li {
list-style: none;/*Стиль маркера*/
line-height: 200%;/*междустрочный интервал*/
padding-left: 25px;
background: url('images/1.png') no-repeat left 50%;
background-size: 15px;
}
.list_img p {
text-align: center;
font-size: 18px;
}
#block2 {
width: 650px;/*висота і ширина блоків*/
height: 650px;/*висота і ширина блоків*/
border: 3px groove; /*обрамлення блоків*/
margin: 20px;/*відступи за межами блоків*/
float: left;/*Выравниваем элементы по левому краю*/
font-size: 25px;/*устанавливаем размер шрифта элемента*/
font-family: fantasy;/*устанавливаем тип шрифта элемента*/
}
.img {
height: 250px;
width: 250px;
margin: 15px;
opacity: 1;/*прозорість елемента*/
object-fit: cover;
transition: 0.1s linear;
}
/*заміна зображень при наведенні курсора*/
.img:hover {
opacity: 1;
border: 5px #ffd664 solid;
}
.list_img li {
list-style: none;/*Стиль маркера*/
line-height: 200%;/*междустрочный интервал*/
padding-left: 25px;
background: url('images/1.png') no-repeat left 50%;
background-size: 15px;
}
.list_img p {
text-align: center;
font-size: 18px;
}
#header {
width: 100%;
height: 100px;
text-align: center;
vertical-align: middle;
color: #103f91;
float: left;
background: linear-gradient(0.25turn, #3f87a6, #ebf8e1, #f69d3c);
font-size: 30px;
}
#footer {
margin-top: 50px;
background-image: linear-gradient(to right, red, lime, yellow);
width: 100%;
height: 100px;
text-align: center;
vertical-align: middle;
color: #103f91;
float: left;
font-size: 25px;
}
Висновок :на лабораторній роботі я навчився додавати на веб-сторінку фонове зображення та визначати прозорість, змінювати маркер списків та створювати горизонтальне меню, визначати розмір, рамку, прозорість та обтікання для зображень.