Le schede sono graffette di web design per una buona ragione. Uno stile di navigazione a schede è immediatamente riconoscibile e intrinsecamente facile da capire, aumentando in tal modo l'accessibilità del tuo sito. E 'anche facile da creare e, se fatto bene, può migliorare il design del tuo sito. Il linguaggio Cascading Style Sheets (CSS) foglio di stile consente tanto la personalizzazione come si desidera durante la creazione di schede.

istruzione

1 Creare fondazione HTML delle schede. Dal momento che le schede sono un elenco di opzioni, il modo più logico per creare loro sarebbe con una lista non ordinata. Si potrà anche creare una grande sezione sottostante dove apparirà le informazioni nelle schede. A \ generico "div \" lavorerà per questo. Il codice potrebbe essere simile a questo:
<Ul>
<Li> <a href=\"#\"> casa </a> </ li>
<Li> <a href=\"#\"> Chi </a> </ li>
<Li> <a href=\"#\"> contatto </a> </ li>
</ Ul>
<Div> </ div>
In questo esempio, ci sono tre schede, che porta alla home page, il \ "Informazioni \" pagina e il \ "contatto \" pagina. Naturalmente, avresti bisogno di sostituire il simbolo \ "# \" con l'URL effettivo di quelle pagine.

2 Rimuovere gli stili del browser di default azzerando i margini e padding della lista non ordinata a \ "0 \" In caso contrario, le schede potrebbero avere un aspetto diverso su diversi browser. Nel vostro foglio di stile CSS, aggiungere:
ul {
margin: 0
ANDARE
padding: 0
ANDARE
}

3 Rendere le voci di elenco compaiono in orizzontale anziché in verticale con l'aggiunta del "display: inline \" \ regola al tuo foglio di stile:
li {
display: inline
ANDARE
}

4 Creare un progetto di base per le schede, dando loro anche un bordo nero di un pixel:
li {
display: inline
ANDARE
border: 1px solid # 000
ANDARE
}
Fare lo stesso per il <div> sotto, e anche impostare i parametri di larghezza e altezza per assicurarsi che si estende oltre la lunghezza delle schede:
div {
border: 1px solid # 000
ANDARE
Larghezza: 500px
ANDARE
Altezza: 200px
ANDARE
}

5 Aggiungere una regola \ "hover \" che rende ogni scheda girare un colore diverso al passaggio del mouse su di esso. In questo esempio, faremo il colore di sfondo di un grigio chiaro:
li: hover {
background-color: #eee
ANDARE
}

6 Personalizzare il design, come si vede in forma. È probabile che vuole dare i valori di voci di elenco margin e padding in modo che il testo non apparirà come angusti. È inoltre possibile modificare i colori dei bordi, il carattere del testo o qualsiasi altra cosa che si desidera.