Веб 5

Виконав: студент групи АКІТ-19 Голуб Е.В.
Лабораторна робота №5
Тема: використання flexbox верстки для створення хедера сайту
Мета: ознайомлення та вивчення принципів використання flexbox верстки
для створення макету WEB-сторінки
ХІД РОБОТИ
Частина 1. Виконати верстку хедеру
 HTML-частина
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Myheader</title>
</head>
<body>
<header>
<div class="main-wrapper">
<img src="images/logo.png" alt="Logo">
<nav class="main-menu">
<ul>
<li> <a href="#">Home</a></li>
<li> <a href="#">Services</a></li>
<li> <a href="#">How it works</a></li>
<li> <a href="#">Team</a></li>
<li> <a href="#">Our blog</a></li>
<li> <a href="#">Contact</a></li>
</ul>
</nav>
</div>
</header>
</body>
</html>
 CSS-частина:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.bb {
border: 1px solid red;
}
body {
font-family: 'Montserrat', sans-serif;
}
header {
height: 65px;
background:
#161c35;
}
.main-wrapper{
margin: 0 auto;
width: 1170px;
padding: 0 15px;
}
li {
display: inline-block;
}
.main-menu > ul > li {
}
header .main-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
height: 100%;
}
.main-menu > ul > li > a {
color: white;
text-decoration: none;
font-weight: 400;
letter-spacing: 1px;
margin-right: 15px;
font-family: 'Roboto', sans-serif;
font-size: 15px;
position: relative;
}
.main-menu > ul >li:last-child > a {
margin-right: 0;
}
.main-menu > ul > li > a::after {
content: "";
width: 10%;
height: 3px;
background:#00D5C3;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
top: 25px;
opacity: 0;
}
.main-menu > ul > li > a:hover::after {
width: 100%;
opacity: 1;
}
Рис. 5.1 Результат верстки хедеру
Частина 2. Створити меню за зразком, використовуючи Flexbox:

ВАРІАНТ – 4
а)
 HTML:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<header>
<div class="main-wrapper bb">
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">О компании</a></li>
<li><a href="#">Информация</a></li>
<li><a href="#">О нас</a></li>
</ul>
</nav>
</div>
</header>
</body>
</html>
 CSS:
*{
margin: 0;
padding: 0;
}
body{
}
header{
height: 100%;
width: 100%;
background:#2197e9;
}
.main-wrapper{
width: 100%;
}
.bb{
border: 2px solid #061BFB;
}
li{
line-height: 50px;
}
.main-menu > ul > li{
height: 50px;
}
header .main-wrapper{
display:flex;
align-items: center;
justify-content:center;
height: 100%;
}
.main-menu > ul > li > a{
text-decoration:none;
font-weight:400;
letter-spacing: 1px;
margin-right:0px;
font-size: 15px;
position: relative;
}
li a {
padding: 0px 10px 0px 10px;
display: block;
color: white;
transition: background-color .7s linear,color .7s linear ;/*плавное
изменение цвета*/
}
li a:hover {
color: #2197e9;
background-color: white;
}
ul{
display: flex;
}
Рис. 5.2 а)
б)
 HTML:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<header>
<div class="main-wrapper">
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">О компании</a></li>
<li><a href="#">Информация о том, как к нам доехать</a></li>

<li><a href="#">О нас</a></li>
</ul>
</nav>
</div>
</header>
</body>
</html>
 CSS:
*{
margin: 0;
padding: 0;
}
body{
}
header{
height: 100%;
width: 100%;
background:#2197e9;
}
.main-wrapper{
width: 100%;
}
li{
}
.main-menu > ul > li{
height: 100px;
max-width:110px;
text-align: center;
}
header .main-wrapper{
display:flex;
align-items:stretch;
justify-content:center;
}
.main-menu > ul > li > a{
color: white;
text-decoration:none;
font-weight:400;
margin-right:0px;
font-size: 15px;
position: relative;
padding: 0px 10px 0px 10px;
}
ul{
display: flex;
}
.main-menu > ul > li:hover{
background-color: white;
transition: background-color .7s linear,color .7s linear ;
}
.main-menu > ul > li:hover > a{
color: #2197e9;
transition: background-color .7s linear,color .7s linear ;
}
Рис. 5.2 б)
Висновок: я ознайомився з принципами використання flexbox верстки для

створення макету WEB-сторінки.

Веб 5

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Веб 5

Uploaded by

Copyright:

Available Formats

Виконав: студент групи АКІТ-19 Голуб Е.В.

Рис. 5.1 Результат верстки хедеру

Частина 2. Створити меню за зразком, використовуючи Flexbox:

<li><a href="#">Информация о том, как к нам доехать</a></li>

Висновок: я ознайомився з принципами використання flexbox верстки для

You might also like