Eenvoudige Enkelkolom Webblad Uitlegte in CSS
In hierdie les gaan ons oefen om eenvoudige enkelkolom webbladuitlegte te skep. Laat ons byvoorbeeld so 'n uitleg maak:
Kom ons begin met die implementering. Elke uitleg begin gewoonlik
met 'n algemene div met die naam
wrapper wat die hele res van die webblad bevat:
<div id="wrapper">
</div>
In ons geval sal die wrapper in die middel van die skerm gesentreer wees:
#wrapper {
width: 800px;
margin: 50px auto;
}
Dit sal ook 'n grens hê:
#wrapper {
width: 800px;
margin: 50px auto;
border: 1px solid black;
}
Kom ons maak nou die hoofstruktuur van die blad. Dit sal bestaan uit 'n spyskaart en die hoof inhoud - die inhoud:
<div id="wrapper">
<div id="menu">
</div>
<div id="content">
</div>
</div>
Kom ons voeg die inhoud van ons blokke by:
<div id="wrapper">
<div id="menu">
<a href="#">skakel teks 1</a>
<a href="#" class="active">skakel teks 2</a>
<a href="#">skakel teks 3</a>
<a href="#">skakel teks 4</a>
<a href="#">skakel teks 5</a>
</div>
<div id="content">
<h1>Proin tristique lorem</h1>
<p>
...
</p>
<p>
...
</p>
</div>
</div>
Nou kan ons style by ons blokke voeg. Kom ons voeg style by die spyskaart:
#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;
}
En nou voeg ons style by die inhoudselemente:
#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;
}
Ons kan nou al die kode saamstel:
<div id="wrapper">
<div id="menu">
<a href="#">skakel teks 1</a>
<a href="#" class="active">skakel teks 2</a>
<a href="#">skakel teks 3</a>
<a href="#">skakel teks 4</a>
<a href="#">skakel teks 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;
}
Wenking 1
Dit is die geriefsnaamste om spasies bo en onder te gee.
Byvoorbeeld, ons het 'n spyskaart en inhoud,
en tussen hulle is daar leë ruimte. Dit is duidelik
dat hierdie ruimte gemaak kan word deur die onderste
spasie van die spyskaart, die boonste spasie van die inhoud,
of hulle gelyktydige invloed. In hierdie geval
is dit beter om die onderste spasie aan die spyskaart te gee, en vir die inhoud
verwyder die standaard boonste padding en margin
vir h1.
Wenking 2
Afstammelinge moet nie spasies tussen
ouers vorm nie. Byvoorbeeld, ons het 'n spyskaart.
Die onderste spasie van hierdie spyskaart kan gevorm word
óf deur die margin van die div met die spyskaart, óf deur die margin
van die skakels. Dit is beter om die eerste opsie te kies, want
skakels moet nie deur die kop van die ouer optree nie.
Wenking 3
Kom ons sê daar is 'n spasie tussen twee elemente
en in hierdie geval is daar visueel geen verskil nie,
wat om te kies vir die spasie - margin of padding.
In hierdie geval kies margin, want
dit is presies dit wat spasies tussen
elemente moet skep.
