Nwlapcug.com


Come aggiungere un tubo a CSS navigazione

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.