CSSда содда бир усту́нли саҳифа макети
Ушбу дарсда биз содда бир усту́нли саҳифа макетларини яратишда амалий шуғулланамиз. Келинг, масалан, куйидаги макетни ясаймиз:
Амалий ишни бошлаймиз. Ҳар бир макет одatда
wrapper номидаги умумий дивдан бошланади,
у бошқа саҳифа контентни ўз ичига олади:
<div id="wrapper">
</div>
Бизнинг ҳолатимизда враппер экран марказида тўғриланади:
#wrapper {
width: 800px;
margin: 50px auto;
}
Шунингдек, у чеккага эга бўлади:
#wrapper {
width: 800px;
margin: 50px auto;
border: 1px solid black;
}
Энди саҳифанинг асосий тузилишини ясаймиз. У меню ва асосий контентдан иборат бўлади:
<div id="wrapper">
<div id="menu">
</div>
<div id="content">
</div>
</div>
Блокларимизга контент қўшаймиз:
<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>
Энди блокларимизга стил қўшашимиз мумкин. Менюга стил қўшаймиз:
#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;
}
Энди барча кодни бирга тўплашимиз мумкин:
<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;
}
Маслиҳат 1
Қулай usul - бу юқоридан pastga chet qoldirish.
Мисол учун, бизда меню ва контент бор,
уларнинг ўртасида - бўш жой. Шубҳасиз,
бу жой менюнинг pastki chet qoldirishi,
контентнинг юқори chet qoldirishi,
ёки уларнинг бир вақтда taʼsiri билан амалга оширилиши мумкин.
Бундай ҳолатда
менюга pastki chet qoldirish бериш яхши,
контент учун эса
h1 учун standart padding ва marginни олиб ташлаш керак.
Маслиҳат 2
Насллар ота-оналари ўртасида chet qoldirishни
шақллантирмаслиги керак. Мисол учун, бизда меню бор.
Бу менюнинг pastki chet qoldirishini
ҳам margin меню диви, ҳам margin
ҳаволaлар билан шакллантириш мумкин.
Биринчи вариантни танлаш яхши,
чунки ҳаволaлар ота-онанинг бoshi устидан иш тутишлари керак эмас.
Маслиҳат 3
Икки элемент ўртасида chet qoldirish бўлсин
ва бундай ҳолатда кўринишда farq бўлмасин,
chegara учун nimani танлаш керак - margin ёки padding.
Бундай ҳолатда marginни танланг, чунки
ана шу элементлар ўртасида chet qoldirish яратиши керак.
