Nella navigazione del sito Web, i tubi sono le linee sottili che separa le voci di menu. Spesso i progettisti fanno queste sottili, e aggiungono ai segnali visivi che rendono più fruibile la navigazione. Poiché i menu sito sono codificati come bullet elenca in HTML e convertito a menu in CSS, è necessario aggiungere i tubi dando ogni voce dell'elenco un bordo destro. Il problema con questo metodo è che esso aggiunge un bordo all'ultimo elemento, che non si vuole sempre. Utilizzando ": ultimo figlio," Tuttavia, si può dire al browser di non aggiungere un bordo all'ultimo elemento di elenco.
Istruzioni
1
Aprire il foglio di stile per il tuo sito in blocco note o un editor di codice. Trovare gli stili per la vostra barra di navigazione:
Navbar {
Proprietà e valori vanno qui
}
Come il tuo aspetto di codice può molto notevolmente a seconda delle cose come ID e nomi utilizzati della classe.
2
Aggiungere un bordo a destra di ogni voce di elenco nella barra di navigazione:
Navbar li {
float: left;
Border-destra: 1px solid black;
}
Utilizzare un colore esadecimale o colore denominato come illustrato. La regola di stile dove si aggiunge il bordo avrà già "galleggiante: sinistra" imposta, dal momento che rende la navigazione orizzontale. Ora vedrete un tubo tra ogni collegamento nella barra, tra cui l'ultimo elemento.
3
Uso il ": ultimo figlio" pseudo-classe per rimuovere l'ultimo tubo perché sembra scomodo e non è necessaria. Creare una nuova regola di stile e impostare il bordo a zero:
Navbar li:last-bambino {
Border-destra: 0;
}
Consigli & Avvertenze
- Sperimentare con gli stili di bordo diverso diverso da "solid" per creare stili differenti del tubo. Le possibilità includono "tratteggiato" e "doppie".
- Quando si utilizza ": ultimo figlio," è importante che non ci sono altri tag nidificati nei tag "< ul >" che creare il menu. Altrimenti il browser non riconoscerà l'ultimo elemento dell'elenco come l'ultimo figlio dell'elenco puntato.