CSS-də Sadə Tək Sütunlu Sayt Maketləri
Bu dərsdə biz sadə tək sütunlu sayt maketləri yaratmaqla məşq edəcəyik. Gəlin, məsələn, belə bir maket edək:
Gəlin reallaşdırmaya başlayaq. Hər bir maket, bir qayda olaraq,
bütün qalan saytı ehtiva edən, adı wrapper olan ümumi div ilə başlayır:
<div id="wrapper">
</div>
Bizim vəziyyətimizdə wrapper ekranın mərkəzinə yerləşdiriləcək:
#wrapper {
width: 800px;
margin: 50px auto;
}
Həmçinin onun sərhədi olacaq:
#wrapper {
width: 800px;
margin: 50px auto;
border: 1px solid black;
}
Gəlin indi səhifənin əsas strukturunu edək. O, menyu və əsas məzmundan - kontentdən ibarət olacaq:
<div id="wrapper">
<div id="menu">
</div>
<div id="content">
</div>
</div>
Bloklarımızın məzmununu əlavə edək:
<div id="wrapper">
<div id="menu">
<a href="#">link text 1</a>
<a href="#" class="active">link text 2</a>
<a href="#">link text 3</a>
<a href="#">link text 4</a>
<a href="#">link text 5</a>
</div>
<div id="content">
<h1>Proin tristique lorem</h1>
<p>
...
</p>
<p>
...
</p>
</div>
</div>
İndi bloklarımıza stillər əlavə edə bilərik. Gəlin menyuya stil əlavə edək:
#menu {
display: flex;
justify-content: center;
margin-bottom: 20px;
background-color: #484848;
}
#menu a {
margin: 0 5px;
padding: 15px 25px;
text-decoration: none;
color: #fff;
font: bold 14px Arial;
}
#menu a:hover, #menu a.active {
color: #484848;
background-color: #fff;
}
İndi isə kontent elementlərinə stillər əlavə edək:
#content {
padding: 0 30px 20px;
}
#content h1 {
text-align: center;
margin-top: 0;
margin-bottom: 10px;
}
#content p {
padding: 0 10px;
margin-bottom: 5px;
font: 18px/1.3 Arial;
text-align: justify;
}
İndi bütün kodu birlikdə yığa bilərik:
<div id="wrapper">
<div id="menu">
<a href="#">link text 1</a>
<a href="#" class="active">link text 2</a>
<a href="#">link text 3</a>
<a href="#">link text 4</a>
<a href="#">link text 5</a>
</div>
<div id="content">
<h1>Proin tristique lorem</h1>
<p>
...
</p>
<p>
...
</p>
</div>
</div>
#wrapper {
width: 800px;
margin: 50px auto;
border: 1px solid black;
}
#menu {
display: flex;
justify-content: center;
margin-bottom: 20px;
background-color: #484848;
}
#menu a {
margin: 0 5px;
padding: 15px 25px;
text-decoration: none;
color: #fff;
font: bold 14px Arial;
}
#menu a:hover, #menu a.active {
color: #484848;
background-color: #fff;
}
#content {
padding: 0 30px 20px;
}
#content h1 {
text-align: center;
margin-top: 0;
margin-bottom: 10px;
}
#content p {
padding: 0 10px;
margin-bottom: 5px;
font: 18px/1.3 Arial;
text-align: justify;
}
Məsləhət 1
Ən rahatı yuxarıdan aşağıya boşluq verməkdir.
Məsələn, bizim menyumuz və kontentimiz var,
onların arasında isə boş yer var. Aydındır ki,
bu yer ya menyunun aşağı boşluğu, ya kontentin yuxarı boşluğu,
ya da onların eyni vaxtda təsiri ilə edilə bilər.
Bu halda menyuya aşağı boşluq vermək daha yaxşıdır,
kontentdə isə h1 üçün standart padding və margin
sıfırlanmalıdır.
Məsləhət 2
Varislər valideynlər arasında boşluq yaratmamalıdır.
Məsələn, bizim menyumuz var.
Bu menyunun aşağı boşluğu ya menyu div-inin margin-i,
ya da keçidlərin margin-i ilə formalaşdırıla bilər.
Birinci variantı seçmək daha yaxşıdır,
çünki keçidlər valideynin başı üzərindən hərəkət etməməlidir.
Məsləhət 3
Tutaq ki, iki element arasında boşluq var
və bu halda vizual olaraq boşluq üçün nəyi seçmək - margin və ya padding
fərqi yoxdur.
Bu halda margin seçin, çünki
məhz o elementlər arasında boşluq yaratmalıdır.
