Miundo Rahisi ya Tovuti ya Safu Moja kwenye CSS
Katika somo hili tutafanya mazoezi ya kuunda miundo rahisi ya tovuti ya safu moja. Hebu, kwa mfano, tufanye muundo kama huu:
Wacha tuanze utekelezaji. Kila muundo kama
kanuni huanza na div ya jumla yenye jina
wrapper, iliyo na tovuti nzima iliyobaki:
<div id="wrapper">
</div>
Katika kesi yetu, wrapper itapangiliwa katikati ya skrini:
#wrapper {
width: 800px;
margin: 50px auto;
}
Pia itakuwa na mpaka:
#wrapper {
width: 800px;
margin: 50px auto;
border: 1px solid black;
}
Sasa tufanye muundo mkuu wa ukurasa. Itakuwa na menyu na yaliyomo ya msingi - maudhui:
<div id="wrapper">
<div id="menu">
</div>
<div id="content">
</div>
</div>
Wacha tuongeze yaliyomo ya vizuizi vyetu:
<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>
Sasa tunaweza kuongeza mitindo kwa vizuizi vyetu. Wacha tuongeze mtindo kwa menyu:
#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;
}
Na sasa tuongeze mitindo kwa vipengele vya maudhui:
#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;
}
Sasa tunaweza kukusanya msimbo wote pamoja:
<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;
}
Ushauri 1
Ni rahisi zaidi kutoa nafasi kutoka juu hadi chini.
Kwa mfano, tunayo menyu na maudhui,
na kati yao - nafasi tupu. Ni wazi,
kuwa nafasi hii inaweza kufanywa kwa nafasi ya chini
ya menyu, nafasi ya juu ya maudhui,
au ushawishi wao wa wakati mmoja.
Katika kesi hii
ni bora kuweka nafasi ya chini ya menyu, na kwa maudhui
ondoa padding ya juu na margin kwa chaguomsingi
kwa h1.
Ushauri 2
Wazao hawapaswi kuunda nafasi kati
ya wazazi. Kwa mfano, tunayo menyu.
Nafasi ya chini ya menyu hii inaweza kutengenezwa
ama kwa margin ya div yenye menyu, au margin
ya viungo. Ni bora kuchagua chaguo la kwanza,
kwa kuwa viungo havipaswi kutenda kupitia kichwa
cha mzazi.
Ushauri 3
Acha kati ya vipengele viwili kuwe na nafasi
na katika kesi hii kimaumbile hakuna tofauti,
ni nini kuchagua kwa nafasi - margin au padding.
Katika kesi hii chagua margin, kwa kuwa
ndiyo inapaswa kuunda nafasi kati
ya vipengele.
