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
Үстінен төменге қарай шегіністер беру ыңғайлы.
Мысалы, бізде мәзір және контент бар,
ал олардың арасында - бос орын. Әлбетте,
бұл орын мәзірдің төменгі шегінісі,
контенттің жоғарғы шегінісі,
немесе олардың бірлескен әсері арқылы жасалуы мүмкін.
Бұл жағдайда мәзірге төменгі шегіністі беру жақсы,
ал контент үшін h1 үшін әдепкі бойынша
padding және margin алып тасталуы керек.
Кеңес 2
Тұқымдар ата-аналар арасында шегініс құрмауы керек.
Мысалы, бізде мәзір бар.
Бұл мәзірдің төменгі шегінісін не
margin мәзір диві арқылы, не сілтемелердің
margin арқылы қалыптастыруға болады.
Бірінші нұсқаны таңдау жақсы,
себебі сілтемелер ата-ананың басы арқылы
әрекет етпеуі керек.
Кеңес 3
Екі элемент арасында шегініс бар делік
және бұл жағдайда визуалды түрде айырмашылық жоқ,
шегініс үшін не таңдау керек - margin немесе padding.
Бұл жағдайда margin таңдаңыз, себебі
дәл ол элементтер арасында шегініс жасауы керек.
