CSS pasek nawigacyjny
Pasek nawigacji
Zręczne wykorzystanie nawigacji dla każdej strony jest bardzo ważna.
Z CSS można przekształcić w ładnym pasku nawigacyjnym zamiast menu HTML nudnych.
linki nawigacyjne list =
Jako standardowy pasek nawigacyjny oparty HTML jest koniecznością
, W naszym przykładzie będziemy tworzyć listy HTML standardowy pasek nawigacyjny.
Pasek nawigacyjny jest w zasadzie lista linków, więc używaj <ul> i <li> elementy są bardzo wymowne:
Przykłady
<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>
Spróbuj »
A teraz usunąć marginesy i dopełnienia z listy:
Przykłady analizy:
- list-style-type: none - przed wyjęciem listę małych flag. Pasek nawigacyjny nie musi znaczniki list
- Usuń ustawienie domyślne marginesy i dopełnienia skonfigurować przeglądarkę do 0
Powyższy przykład kodu jest w standardowych kodów pionowego i poziomego paska nawigacyjnego wykorzystywanych.
Pionowy pasek nawigacyjny
Powyższy kod, musimy tylko elementy stylu <A> utworzenia pionowego paska nawigacji:
Przykład pokazuje:
- display: block - wyświetlacz łączy elementu bloku tak, że całość staje się obszar klikalny link (nie tylko tekstowe), co pozwala nam określić szerokość
- width: 60px - elementy blokowe domyślnie jest maksymalna szerokość. Chcemy, aby określić szerokość 60 pikseli
Wskazówka: Zobacz przykład pełnego stylu pionowego paska nawigacyjnego .
Uwaga: Pamiętaj, aby określić szerokość elementu w pionie Pasek nawigacyjny <a> 's.Jeśli pominąć szerokość, IE6 może spowodować nieoczekiwane rezultaty.
Poziomy pasek nawigacyjny
Istnieją dwa sposoby, aby utworzyć poziomy pasek nawigacyjny. Za pomocąwbudowanych lub pływającychelementów listy.
Oba sposoby są w porządku, ale jeśli chcesz połączyć się do tego samego rozmiaru, należy użyć metody pływającej.
Inline elementy listy
Jeden zbudować poziomy pasek nawigacyjny jest określenie
Przykłady analizy:
- display: inline; - domyślnie <li> elementem jest element bloku. Tutaj usuwamy podziały wiersza przed i po każdym elemencie listy, aby wyświetlić linię.
Wskazówka: Zobacz przykład pełnego stylu poziomym pasku nawigacyjnym .
Pływające elementy listy
W powyższym przykładzie łącza mają różne szerokości.
Dla wszystkich linków o jednakowej szerokości, float <li> element i określ szerokość elementu <a>:
Przykłady analizy:
- pływaka: po lewej - użyj slajdy elementu suwakowego obok siebie
- display: block - wyświetlacz łączy elementu bloku tak, że całość staje się obszar klikalny link (nie tylko tekstowe), co pozwala nam określić szerokość
- width: 60px - elementy blokowe domyślnie jest maksymalna szerokość. Chcemy, aby określić szerokość 60 pikseli
Wskazówka: Patrz przykład w pełni stylu poziomym pasku nawigacyjnym. .