In navigazione del sito, i tubi sono le linee sottili che separano le voci di menu. Spesso i progettisti fanno queste sottili, e si aggiungono alle indicazioni visive che rendono la navigazione più utilizzabile. Dal menu del sito web sono codificati come elenchi puntati in HTML e convertiti ai menu in CSS, è necessario aggiungere i tubi dando ad ogni elemento della lista un bordo a destra. Il problema di questo metodo è che si aggiunge un bordo l'ultimo elemento, che non si vuole sempre. Usando ": last-child", tuttavia, si può dire al browser di non aggiungere un bordo per l'ultimo elemento della lista.

istruzione

1 Aprire il foglio di stile per il tuo sito in Blocco note o un editor di codice. Trova le stili per la vostra barra di navigazione:

barra di navigazione {

proprietà e valori vanno qui
}

Come il tuo aspetto codice possono molto notevolmente a seconda di cose come i nomi di ID e classi utilizzate.

2 Aggiungere un bordo a destra di ogni elemento della lista nella barra di navigazione:

barra di navigazione li {

float: left;
border-right: 1px solid nero;
}

Utilizzare un colore esadecimale o il nome del colore, come mostrato. La regola di stile in cui si aggiunge il confine sarà già "float: left" impostata, dal momento che rende la navigazione orizzontale. Ora vedrete un tubo tra ogni link al bar, tra cui l'ultimo elemento.

3 Utilizzare la pseudo-classe: per rimuovere l'ultimo tubo perché sembra scomodo e non è necessario "last-child". Creare una nuova regola di stile e impostare il confine a zero:

barra di navigazione li: last-child {

border-right: 0;
}

Consigli e avvertenze

• Esperimento con diversi stili di bordo diversi "solido" per creare diversi stili di tubi. Le possibilità includono "deluse" e "doppio".
• Quando si utilizza ": last-child," è importante che non ci siano altri tag annidati nei "<ul>" tag che creano il menu. In caso contrario, il browser non riconoscerà l'ultimo elemento della lista, come l'ultimo figlio della lista proiettile.