web лабки / WEB-10lab-boiko
.docxСтудент Бойко Євгеній група 410-і
Лабораторна робота №10
Тема: Властивості CSS для оформлення списків. Створення
навігаційного меню.
Мета: навчитися створювати таблиці стилів для оформлення багаторівневих списків у вигляді навігаційного меню; прослідкувати дію властивостей visibility та display, а також навчитися використовувати псевдокласи і псевдоелементи.
Скріншот:
Код:
<!DOCTYPE html>
<html lang="ru">
<head>
<title>10 индив</title>
<meta charset="UTF-8">
<nav class="top-menu">
<a class="logo" href="logo.png"><img src="logo.png" width="100" height="111"></a>
<ul class="menu-main">
<li><a href="">Work</a></li>
<li><a href="">About</a></li>
<li><a href="">Story</a></li>
<li><a href="">Shop</a></li>
<li><a href="">Gallery</a></li>
<li><a href="">Contact</a></li>
</ul>
</nav>
<style>
.top-menu {
background:url(bg.jpg);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
.logo {display: inline-block;}
.menu-main {
list-style: none;
margin: 0;
padding: 0;
float: right;
}
.menu-main li {display: inline-block;}
.menu-main a {
text-decoration: none;
display: block;
position: relative;/*прикрепляет квадрат который уже у нас ромб*/
line-height: 80px;
padding-left: 30px;
font-size: 20px;
font-family: sans-serif;
font-weight: bold;
color: blue;
}
.menu-main a:before {
content: "";
width: 9px;
height: 9px;
background: red;
position: absolute;
left: 55%;/*устанавлюем чтоб ромбик был ровно по средине*/
transform: rotate(45deg) translateX(5px);/*делаем ромбик, путем вращения квадрата */
opacity: 0;/*делаем прозрачными ромбики, когда не наводим на пункт меню*/
}
.menu-main a:hover:before {opacity: 1;}
(max-width: 200px) {/*делает чтоб ромбик был в менюшки путем увеличения менюшки*/
.menu-main a {padding: 0 10px;}
.menu-main a:before {transform: rotate(45deg) }/*rotate-вращение */
}
</style>
Висновок: на лабораторній роботі навчився створювати таблиці стилів для оформлення багаторівневих списків у вигляді навігаційного меню; прослідкувати дію властивостей visibility та display, а також навчитися використовувати псевдокласи і псевдоелементи.