Vienkāršas vienkolonnu vietņu maketi CSS
Šajā nodarbībā mēs praktizēsimies veidot vienkāršus vienkolonnu vietņu maketus. Darīsim, piemēram, šādu maketu:
Sāksim ar realizāciju. Katrs makets kā
noteikums sākas ar vispārīgu div ar nosaukumu
wrapper, kas satur visu pārējo vietni:
<div id="wrapper">
</div>
Mūsu gadījumā wrapperis tiks centrēts ekrāna centrā:
#wrapper {
width: 800px;
margin: 50px auto;
}
Tam arī būs apmale:
#wrapper {
width: 800px;
margin: 50px auto;
border: 1px solid black;
}
Tagad izveidosim galveno lapas struktūru. Tā sastāvēs no izvēlnes un galvenā saturā - kontenta:
<div id="wrapper">
<div id="menu">
</div>
<div id="content">
</div>
</div>
Pievienosim mūsu bloku saturu:
<div id="wrapper">
<div id="menu">
<a href="#">saites teksts 1</a>
<a href="#" class="active">saites teksts 2</a>
<a href="#">saites teksts 3</a>
<a href="#">saites teksts 4</a>
<a href="#">saites teksts 5</a>
</div>
<div id="content">
<h1>Proin tristique lorem</h1>
<p>
...
</p>
<p>
...
</p>
</div>
</div>
Tagad varam pievienot stilus mūsu blokiem. Pievienosim stilu izvēlnei:
#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;
}
Un tagad pievienosim stilus kontenta elementiem:
#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;
}
Tagad varam savākt visu kodu kopā:
<div id="wrapper">
<div id="menu">
<a href="#">saites teksts 1</a>
<a href="#" class="active">saites teksts 2</a>
<a href="#">saites teksts 3</a>
<a href="#">saites teksts 4</a>
<a href="#">saites teksts 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;
}
Padoms 1
Ērtāk ir dot atkāpes no augšas uz leju.
Piemēram, mums ir izvēlne un saturs,
un starp tām - tukša vieta. Acīmredzami,
ka šo vietu var izveidot kā izvēlnes apakšējo
atkāpi, kontenta augšējo atkāpi,
vai to vienlaicīgu ietekmi. Šajā gadījumā
labāk ir iestatīt apakšējo atkāpi izvēlnei, bet kontentam
noņemt augšējo padding un margin pēc noklusējuma
h1 elementam.
Padoms 2
Pēcteči nedrīkst veidot atkāpi starp
vecākiem. Piemēram, mums ir izvēlne.
Šīs izvēlnes apakšējo atkāpi var veidot
vai nu ar margin div ar izvēlni, vai margin
saitēm. Labāk izvēlēties pirmo variantu, jo
saites nedrīkst darboties pāri vecāka
galvai.
Padoms 3
Lai starp diviem elementiem ir atstarpe
un šajā gadījumā vizuāli nav atšķirības,
ko izvēlēties atkāpei - margin vai padding.
Šajā gadījumā izvēlieties margin, jo
tieši tam vajadzētu radīt atkāpes starp
elementiem.
