CSS-de ýönekeý bir sütünli web sahypa maketleri
Bu sapakda biz ýönekeý bir sütünli web sahypa maketlerini döretmekde çalışarys. Geliň, mysal üçin, şeýle bir maket dözeteliň:
Amala aşyrmaga başlaýaly. Her bir maket, adatça, galan ähli web sahypany öz içine alýan wrapper atly umumy div bilen başlanýar:
<div id="wrapper">
</div>
Bizim ýagdaýymyzda wrapper ekranyň merkezine deňelener:
#wrapper {
width: 800px;
margin: 50px auto;
}
Onuň hem araçägi bolýar:
#wrapper {
width: 800px;
margin: 50px auto;
border: 1px solid black;
}
Geliň indi sahypanyň esasy gurluşyny düzeliň. Ol menýu we esasy mazmun – kontentden ybarat bolar:
<div id="wrapper">
<div id="menu">
</div>
<div id="content">
</div>
</div>
Bloklarymyzyň mazmunyny goşalyň:
<div id="wrapper">
<div id="menu">
<a href="#">baglanyşyk teksti 1</a>
<a href="#" class="active">baglanyşyk teksti 2</a>
<a href="#">baglanyşyk teksti 3</a>
<a href="#">baglanyşyk teksti 4</a>
<a href="#">baglanyşyk teksti 5</a>
</div>
<div id="content">
<h1>Proin tristique lorem</h1>
<p>
...
</p>
<p>
...
</p>
</div>
</div>
Indi bloklarymyza stili goşup bilersiňiz. Geliň menýu üçin stili goşalyň:
#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;
}
Indi bolsa kontent elementlerine stili goşalyň:
#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;
}
Indi ähli kody bilelikde ýygnap bileris:
<div id="wrapper">
<div id="menu">
<a href="#">baglanyşyk teksti 1</a>
<a href="#" class="active">baglanyşyk teksti 2</a>
<a href="#">baglanyşyk teksti 3</a>
<a href="#">baglanyşyk teksti 4</a>
<a href="#">baglanyşyk teksti 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;
}
Maslahat 1
Boşluklary ýokardan aşak beriş iň amatlydyr.
Mysal üçin, bizde menýu we kontent bar,
we olaryň arasynda – boş meýdan. Bu meýdanyň
menýunyň aşaky boşlugy, kontentyň ýokarky
boşlugy bilen ýa-da olaryň birwagtly täsiri
bilen düzülip biljekdigi aýdyň. Bu ýagdaýda
menýu üçin aşaky boşluk, kontent üçin bolsa
h1 üçin başlangyç boýunça bolan
padding we margin aýyrmak has gowy.
Maslahat 2
Warislar ata-eneleriň arasyndaky boşlugy
döretmemeli. Mysal üçin, bizde menýu bar.
Bu menýunyň aşaky boşlugyny ýa-da margin
menýu bilen div, ýa-da baglanyşyklaryň
margin-i bilen düzüp bilersiňiz.
Birinji warianty saýlamak has gowy,
sebäbi baglanyşyklar atanyň başyndan geçip
işlemeli däl.
Maslahat 3
Iki element arasynda boşluk bardyr
we bu ýagdaýda boşluk üçin näme saýlamaly –
margin ýa-da padding görünişi üçin tapawudy ýok.
Bu ýagdaýda margin-i saýlaň, sebäbi
elementleriň arasynda boşluk döretmeli bolan
şonyň özi.
