Come creare una linea verticale tra i menu

January 6

Le linee verticali sono create tra le voci di un menu orizzontale sito come separatori. Le linee aiutano gli utenti a distinguere dove un settore link di navigazione finisce e il link seguente inizia, soprattutto quando le voci di menu sono vicini tra loro a causa di vincoli di layout. I menu sono in genere creati utilizzando i CSS per lo stile una lista non ordinata. È possibile creare una linea verticale tra le voci di menu con l'aggiunta di un bordo a un lato del tag list-item usando i CSS.

istruzione

1 Aprire la pagina Web facendo clic destro su di esso, quindi facendo clic su "Apri con". Fare clic per selezionare "Blocco note" o "WordPad". Fai clic su "OK".

2 Individuare il codice lista non ordinata del menu. Una lista non ordinata comincia con un tag "<UL>" e termina con un "</ UL>" tag, tra i quali sono diverse serie di "<LI>" e "</ LI>" tag utilizzati per indicare i collegamenti del menu.

3 Fare clic per posizionare il cursore a sinistra della staffa fine di una apertura "<LI>" tag. Premere il tasto "barra spaziatrice".

4 Tipo "style = 'border-right: 1px solid # 000000;'" per creare un bordo sul lato destro della voce di menu che è di 1 pixel di larghezza, una linea continua, e di colore nero ( "# 000000" è il valore esadecimale per il nero).

5 Sostituire il valore "1px" nel passaggio precedente con la larghezza linea verticale desiderata. Sostituire "solido" con "punteggiata", "doppio" o "tratteggiata" per cambiare lo stile della linea verticale. Sostituire "# 000000" con il valore esadecimale del colore della vostra scelta di cambiare il colore della linea verticale.

6 Ripetere i punti 3, 4, e 5 per tutti "<li>" tag nel menu, saltando "<LI>" tag dell'ultima voce di menu. (Creazione di un bordo sul lato destro dell'ultimo menu lascia una linea verticale appesa sul lato destro del menu.)

7 Fai clic su "File" e "Salva" per salvare la pagina Web.