CSS- navigasiebalk
Demo: Navigasiebalke
Navigasiebalke
Om maklik om te gebruik navigasie is belangrik vir enige webwerf.
Met CSS kan jy vervelige HTML-spyskaarte omskep in mooi navigasiebalke.
Navigasiebalk = Lys van skakels
'n Navigasiebalk benodig standaard HTML as basis.
In ons voorbeelde sal ons die navigasiebalk bou vanaf 'n standaard HTML-lys.
'n Navigasiebalk is basies 'n lys skakels, so die gebruik van die <ul>- en <li>-elemente maak volkome sin:
Voorbeeld
<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>
Kom ons verwyder nou die koeëls en die kantlyne en opvulling van die lys:
Voorbeeld
ul
{
list-style-type: none;
margin: 0;
padding: 0;
}
Voorbeeld verduidelik:
list-style-type: none;- Verwyder die koeëls. 'n Navigasiebalk het nie lysmerkers nodig nie- Stel
margin: 0;enpadding: 0;om blaaier verstek instellings te verwyder
Die kode in die voorbeeld hierbo is die standaardkode wat in beide vertikale en horisontale navigasiebalke gebruik word, waaroor jy in die volgende hoofstukke meer sal leer.