CSSda oddiy bir ustunli sayt maketlari
Ushbu darsda biz oddiy bir ustunli sayt maketlarini yaratishni amaliyot qilamiz. Keling, masalan, shunday maket yasaymiz:
Amalga oshirishni boshlaymiz. Har bir maket odatda
wrapper deb nomlangan butun saytni o‘z ichiga olgan
umumiy div bilan boshlanadi:
<div id="wrapper">
</div>
Bizning holatda, wrapper ekran markaziga tekislangan bo‘ladi:
#wrapper {
width: 800px;
margin: 50px auto;
}
Shuningdek, u chegaraga ega bo‘ladi:
#wrapper {
width: 800px;
margin: 50px auto;
border: 1px solid black;
}
Keling, endi sahifaning asosiy tuzilishini yasaymiz. U menyu va asosiy kontentdan iborat bo‘ladi:
<div id="wrapper">
<div id="menu">
</div>
<div id="content">
</div>
</div>
Bloklarimizga kontent qo‘shamiz:
<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>
Endi bloklarimizga uslublarni qo‘shishimiz mumkin. Keling, menyuga uslub qo‘shamiz:
#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;
}
Endi esa kontent elementlariga uslublarni qo‘shamiz:
#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;
}
Endi butun kodni birga yig‘ishimiz mumkin:
<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;
}
Maslahat 1
Yuqoridan pastgacha chekinishlarni berish qulay.
Masalan, bizda menyu va kontent bor,
ular orasida bo‘sh joy mavjud. Bu bo‘sh joy
menyuning pastki chekinishi, kontentning yuqori
chekinishi yoki ularning bir vaqtning o‘zida
ta'siri bilan amalga oshirilishi mumkin. Bunday
holatda menyuga pastki chekinish berish yaxshiroq,
h1 uchun standart padding va margin ni
kontentdan olib tashlash yaxshiroq.
Maslahat 2
Avlodlar ota-onalar orasida chekinish
shakllantirmasligi kerak. Masalan, bizda menyu bor.
Bu menyuning pastki chekinishi menyu divining
margin i yoki havolalarning margin i bilan
shakllantirilishi mumkin. Birinchi variantni tanlash
yaxshiroq, chunki havolalar ota-onaning boshidan
tashqarida harakat qilmasligi kerak.
Maslahat 3
Ikki element orasida chekinish bo‘lsin
va bu holda chekinish uchun nima tanlash muhim
emas - margin yoki padding.
Bunday holda margin ni tanlang, chunki
aynan u elementlar orasida chekinish yaratishi kerak.
