Попрактикуємося у створенні макетів, наповнюючи їх вмістом. Давайте, наприклад, зробимо ось такий макет:
Для початку зробимо основну структуру макета:
<div class="wrapper">
<header>
...
</header>
<div class="container">
<aside class="left">
left
</aside>
<main>
...
</main>
<aside class="right">
right
</aside>
</div>
<footer>
site.com
</footer>
</div>
Давайте тепер розберемося із хедером. Як видно на зразку в хедері буде назва сайту та меню. При цьому ці блоки стоять на однаковій відстані від лівого краю. Логічно в такому випадку об'єднати їх спільним батьком, рухаючи ці блоки як одне ціле:
<div class="wrapper">
<header>
<div class="block">
<div class="sitename"></div>
<nav></nav>
</div>
</header>
</div>
Додамо вміст блоків хедера:
<div class="wrapper">
<header>
<div class="block">
<div class="sitename">site.com</div>
<nav>
<a href="#">home</a>
<a href="#" class="active">blog</a>
<a href="#">photos</a>
<a href="#">about us</a>
<a href="#">contacts</a>
</nav>
</div>
</header>
</div>
Тепер напишемо стилі блоків хедера. При цьому не задаватимемо висоту хедера - нехай він розсувається своїм вмістом:
header {
border: 1px solid black;
}
.block {
margin: 20px 0 50px 220px;
}
.sitename {
margin-bottom: 10px;
font: 20px Arial;
}
nav {
display: flex;
width: 600px;
border: 1px solid black;
}
Напишемо код, який створює три колонки в контейнері. При цьому не задаватимемо висоту контенту - нехай вона формується його вмістом:
.container {
display: flex;
}
main {
width: 660px;
padding: 20px;
border: 1px solid black;
}
.left {
width: 200px;
margin-right: 20px;
padding: 20px;
border: 1px solid black;
}
.right {
width: 200px;
margin-left: 20px;
padding: 20px;
border: 1px solid black;
}
Напишемо тепер інші стилі нашого макета і отримаємо розв'язання наших завдань:
<div class="wrapper">
<header>
<div class="block">
<div class="sitename">site.com</div>
<nav>
<a href="#">home</a>
<a href="#" class="active">blog</a>
<a href="#">photos</a>
<a href="#">about us</a>
<a href="#">contacts</a>
</nav>
</div>
</header>
<div class="container">
<aside class="left">
left
</aside>
<main>
<h1>Our blog</h1>
<p>
...
</p>
<p>
...
</p>
<p>
...
</p>
<p>
...
</p>
<p>
...
</p>
</main>
<aside class="right">
right
</aside>
</div>
<footer>
site.com
</footer>
</div>
* {
box-sizing: border-box;
}
.wrapper {
width: 1100px;
margin: 30px auto;
border: 1px solid black;
}
header {
border: 1px solid black;
}
.container {
display: flex;
}
main {
width: 660px;
padding: 20px;
border: 1px solid black;
}
.left {
width: 200px;
margin-right: 20px;
padding: 20px;
border: 1px solid black;
}
.right {
width: 200px;
margin-left: 20px;
padding: 20px;
border: 1px solid black;
}
footer {
padding: 30px 0;
border: 1px solid black;
text-align: center;
}
.block {
margin: 20px 0 50px 220px;
}
.sitename {
margin-bottom: 10px;
font: 20px Arial;
}
nav {
display: flex;
width: 600px;
border: 1px solid black;
}
nav a {
padding: 10px;
color: blue;
text-decoration: none;
font: 15px Arial;
}
nav a:hover, nav a.active {
color: red;
text-decoration: underline;
}
main h1 {
font: 20px "Times New Roman";
}
main p {
margin: 10px 0;
text-align: justify;
font: 15px Arial;
}
Практичні задачі
За наступним посиланням 1.zip завантажте макет. Відкрийте його у браузері та повторіть сторінку за цим зразком.
За наступним посиланням 2.zip завантажте макет. Відкрийте його у браузері та повторіть сторінку за цим зразком..