Макети сайтҳои одди яксутуна дар CSS
Дар ин дарс мо бо сохтани макети сайтҳои одди яксутуна машқ мекунем. Биёед, масалан, чунин макет созем:
Ба амалӣ гардондан шурӯъ кунем. Ҳар як макет қоидаан бо як диви умумӣ бо номи wrapper оғоз меёбад, ки тамоми дигари сайтро дар бар мегирад:
<div id="wrapper">
</div>
Дар ҳолати мо, wrapper ба маркази экран мувофиқ карда мешавад:
#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
Доду фосила дода аз боло ба поён беҳтарин роҳ аст.
Барои намуна, мо меню ва контенту мундариҷа дорем,
ва байни онҳо - фосилаи холӣ. Ошкор аст,
ки ин фосила метавонад бо фосилаи поёнии меню, фосилаи болоии контент,
ё таъсири ҳамзамони онҳо сохта шавад. Дар ин ҳолат
фосилаи поёниро ба меню таъин кунед, ва ба контент фосилаи болоии padding ва margin ба сурати пешфарз
барои h1 ҳазв кунед.
Маслиҳати 2
Фарзандон набояд фосила байни
валондагонашон созанд. Масалан, мо меню дорем.
Фосилаи поёнии ин менюро метавон ё бо margin диви меню сохт, ё бо margin
пайвандҳо. Якчанд бигзиред, зеро
ки пайвандҳо бояд аз сари волидайн таъсир накунанд.
Маслиҳати 3
Бигзор байни ду элемент фосила вуҷуд дошта бошад
ва дар ин ҳолат аз назари басар фарқе нест,
ки барои фосила чӣ интихоб кардан лозим аст - margin ё padding.
Дар ин ҳолат margin -ро интихоб кунед, зеро
ки айнан он бояд фосилаҳоро байни
элементҳо созад.
