10.1 İki kolonlu Layout
Veb-səhifələrdə mürəkkəb layoutların yaradılması müxtəlif mövqeləndirmə metodlarını dərindən anlamağı və onların birləşməsini tələb edir. Bu mühazirədə CSS-in müxtəlif texnikalarından istifadə edərək mürəkkəb layoutların yaradılmasına dair bir neçə praktik nümunəni nəzərdən keçirəcəyik, məsələn, Flexbox, Grid və ənənəvi mövqeləndirmə.
Sabit naviqasiya ilə Blog layoutu
Bu layout başlıq, sabit naviqasiya paneli, əsas məzmun və yan tərəf panelini əhatə edir.
Nümunə:
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; /* Sabit naviqasiyanın hündürlüyü */
}
.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">Mənim Blogum</div>
<div class="navbar">Naviqasiya</div>
<div class="container">
<div class="main-content">
<h1>Əsas Məzmun</h1>
<p>Blogun əsas məzmunu buradadır.</p>
</div>
<div class="sidebar">
<h2>Yan Panel</h2>
<p>Linklər və digər məzmun.</p>
</div>
</div>
<div class="footer">Altbilgi</div>
Bu nümunədə sabit naviqasiya paneli səhifəni skroll edərkən position: fixed sayəsində yerində qalır. Əsas məzmun və yan panel isə Flexbox-dan istifadə edərək iki sütunda yerləşdirilir.
10.2 Bir səhifəli sayt
Başlıq və altlıq ilə bir səhifəli sayt
Bu maket başlıq, əsas məzmun və altlıqdan ibarətdir. Başlıq və altlıq səhifəni sürüşdürərkən görünən qalır.
Nümunə:
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">Sabit Başlıq</div>
<div class="main">
<h1>Əsas Məzmun</h1>
<p>Səhifənin əsas məzmunu buradadır. Sabit başlıq və altlıq necə işlədiyini görmək üçün sürüşdürün.</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">Sabit Altlıq</div>
Bu nümunədə başlıq və altlıq position: sticky xüsusiyyəti sayəsində səhifəni sürüşdürərkən görünən qalır.
10.3 Çoxsəviyyəli Naviqasiya Barı
Bu maket iç-içə siyahılardan və psevdosiniflərdən istifadə edərək açılan menyular yaradan çoxsəviyyəli naviqasiya panelini əhatə edir.
Nümunə:
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="#">Ana Səhifə</a></li>
<li><a href="#">Xidmətlər</a>
<ul>
<li><a href="#">Web Dizayn</a></li>
<li><a href="#">SEO</a></li>
<li><a href="#">Marketing</a></li>
</ul>
</li>
<li><a href="#">Haqqımızda</a></li>
<li><a href="#">Əlaqə</a></li>
</ul>
</div>
GO TO FULL VERSION