10.1 Двоколонковий макет
Створення складних макетів на веб-сторінках потребує глибокого розуміння різних методів позиціонування та їх поєднання. В цій лекції розглянемо декілька практичних прикладів створення складних макетів з використанням різних технік CSS, таких як Flexbox, Grid і традиційне позиціонування.
Макет блогу з фіксованою навігацією
Цей макет включає заголовок, фіксовану навігаційну панель, основний вміст і бокову панель.
Приклад:
body {
margin: 0;
font-family: Arial, sans-serif;
}
.header {
background-color: #333;
color: white;
padding: 20px;
text-align: center;
}
.navbar {
position: fixed;
top: 0;
width: 100%;
background-color: #444;
color: white;
padding: 10px;
box-sizing: border-box;
z-index: 1000;
}
.container {
display: flex;
margin-top: 60px; /* Висота фіксованої навігації */
}
.main-content {
flex: 3;
padding: 20px;
}
.sidebar {
flex: 1;
padding: 20px;
background-color: #f4f4f4;
}
.footer {
background-color: #333;
color: white;
padding: 20px;
text-align: center;
position: relative;
margin-top: auto;
}
<div class="header">My Blog</div>
<div class="navbar">Навігація</div>
<div class="container">
<div class="main-content">
<h1>Основний вміст</h1>
<p>Ось основний вміст блогу.</p>
</div>
<div class="sidebar">
<h2>Бокова панель</h2>
<p>Посилання та інший вміст.</p>
</div>
</div>
<div class="footer">Футер</div>
У цьому прикладі фіксована навігаційна панель залишається на місці при прокрутці сторінки завдяки position: fixed. Основний вміст і бокова панель розташовуються в двох колонках за допомогою Flexbox.
10.2 Односторінковий сайт
Односторінковий сайт із закріпленим заголовком і футером
Цей макет включає заголовок, основний вміст і футер. Заголовок і футер залишаються видимими при прокрутці сторінки.
Приклад:
body {
display: flex;
flex-direction: column;
min-height: 100vh;
margin: 0;
font-family: Arial, sans-serif;
}
.header {
background-color: #333;
color: white;
padding: 20px;
text-align: center;
position: sticky;
top: 0;
z-index: 1000;
}
.main {
flex: 1;
padding: 20px;
background-color: #f4f4f4;
}
.footer {
background-color: #333;
color: white;
padding: 20px;
text-align: center;
position: sticky;
bottom: 0;
z-index: 1000;
}
<div class="header">Sticky Header</div>
<div class="main">
<h1>Основний вміст</h1>
<p>Ось основний вміст сторінки. Прокрутіть, щоб побачити закріплений заголовок і футер в дії.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque luctus lectus eu tortor vehicula, et convallis lacus varius. Integer at orci in nisl faucibus placerat.</p>
</div>
<div class="footer">Sticky Footer</div>
У цьому прикладі заголовок і футер залишаються видимими при прокрутці сторінки завдяки position: sticky.
10.3 Багаторівнева навігаційна панель
Цей макет включає багаторівневу навігаційну панель, яка використовує вкладені списки та псевдокласи для створення випадаючих меню.
Приклад:
body {
margin: 0;
font-family: Arial, sans-serif;
}
.navbar {
background-color: #333;
overflow: hidden;
}
.navbar ul {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
}
.navbar li {
float: left;
}
.navbar li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navbar li a:hover {
background-color: #111;
}
.navbar li ul {
display: none;
position: absolute;
background-color: #333;
}
.navbar li:hover ul {
display: block;
}
.navbar li ul li {
float: none;
}
.navbar li ul li a {
padding: 14px 16px;
}
<div class="navbar">
<ul>
<li><a href="#">Головна</a></li>
<li><a href="#">Послуги</a>
<ul>
<li><a href="#">Веб-дизайн</a></li>
<li><a href="#">SEO</a></li>
<li><a href="#">Маркетинг</a></li>
</ul>
</li>
<li><a href="#">Про нас</a></li>
<li><a href="#">Контакти</a></li>
</ul>
</div>
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ