Hoe OM - CSS Broodkrummels
Leer hoe om 'n broodkrummelnavigasie met CSS te skep.
Hoe om 'n broodkrummelnavigasie te skep
'n Broodkrummelnavigasie verskaf skakels terug na elke vorige bladsy waardeur die gebruiker navigeer het, en wys die gebruiker se huidige ligging op 'n webwerf.
Stap 1) Voeg HTML by:
Voorbeeld
<ul class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Pictures</a></li>
<li><a href="#">Summer 15</a></li>
<li>Italy</li>
</ul>
Stap 2) Voeg CSS by:
Voorbeeld
/* Style the list */
ul.breadcrumb {
padding: 10px
16px;
list-style: none;
background-color: #eee;
}
/* Display list items side by side */
ul.breadcrumb li {
display: inline;
font-size: 18px;
}
/* Add a
slash symbol (/) before/behind each list item */
ul.breadcrumb li+li:before
{
padding: 8px;
color: black;
content: "/\00a0";
}
/* Add a color to all links inside the list */
ul.breadcrumb li a {
color: #0275d8;
text-decoration: none;
}
/* Add a color on mouse-over */
ul.breadcrumb li a:hover {
color: #01447e;
text-decoration: underline;
}
Gaan na ons CSS-paginering-tutoriaal om meer oor paginering te wete te kom.