Come fare una scheda di navigazione selezionati in DIV

March 14

schede di navigazione separano testo o immagine link e visualizzarli in blocchi. Essi aiutano a distinguere tra i collegamenti più facilmente, specialmente quelli che sono vicini tra loro. schede di navigazione sono create all'interno di un DIV. È possibile utilizzare i fogli di stile a cascata (CSS) per modificare l'aspetto di ogni scheda come è selezionato in una pagina Web - cambiando il suo, colore di sfondo del testo o aspetto generale quando i mouse passa su di esso.

istruzione

1 Avviare un editor di testo come Blocco note, TextPad o EditPad.

2 Inserire il seguente codice CSS nella tua pagina per lo stile del menu di navigazione. Rimuove i proiettili di default dal tag lista non ordinata (UL) per la navigazione e le schede, e imposta il margine e padding a zero.

navigazione #tabs ul {

list-style: none;

margin: 0;

padding: 0;

}

3 Aggiungere il seguente codice sotto la prima serie di codice. Dà ogni scheda una larghezza di 80 pixel, aggiunge uno sfondo giallo e nero rende il testo. Si rimuove anche la sottolineatura di default da link, centra il testo e lo visualizza come un blocco. Per personalizzare il testo all'interno della scheda, sostituire il colore, il collegamento e lo sfondo con le impostazioni preferite.

navigazione #tabs ul li a {

width: 80px;

background-color: yellow;

colore nero;

blocco di visualizzazione;

padding: 2px;

text-align: center;

text-decoration: none;

float: left;

}

4 Aggiungere il seguente codice sotto il codice al punto 3. Cambia il colore di sfondo e il testo del collegamento quando viene selezionato. Per personalizzare lo sfondo e colori del testo nel corso di una selezione della scheda, sostituire i colori attuali con i tuoi colori preferiti.

navigazione #tabs ul li a: hover {

background-color: red;

colore bianco;

}

5 Fai clic su "File" e "Salva con nome" dal menu. Si apre la finestra di dialogo "Salva con nome". Selezionare la cartella contenente i file delle pagine Web. Nome del file "menu.css" e fare clic su "Salva".

6 Fai clic su "File" e "Open" per avviare la finestra di dialogo "Apri". Fare doppio clic sul file HTML in cui vengono visualizzate le schede.

7 Inserire il seguente collegamento foglio di stile tra l'apertura e la chiusura <HEAD> tag. Si punta al file "menu.css" si è salvato:

<Link rel = "stylesheet" type = "text / css" href = "menu.css" />

8 Scorrere sotto il tag di apertura <BODY>. Posizionare il cursore dove si desidera che la navigazione da visualizzare.

9 Aggiungere il seguente codice HTML, per creare la navigazione e applicare il suo stile:

<Div id = "navigazione">

<div id = "schede">

<Ul>

<Li> <a href="URL"> Page 1 </a> </ li>

<Li> <a href="URL"> Pagina 2 </a> </ li>

<Li> <a href="URL"> Page 3 </a> </ li>

</ Ul>

</ Div>

</ Div>

10 Sostituire "URL" con l'indirizzo di collegamento per ogni voce di menu. Sostituire "Page 1", "Page 2" e "Page 3" con le pagine effettive che si desidera visualizzare in ciascuna scheda.

11 Fai clic su "File" e "Salva" per aggiornare il file.