Nwlapcug.com


Come creare schede con i CSS

Come creare schede con i CSS


Le schede sono graffette di web design per una buona ragione. Uno stile di navigazione a schede è immediatamente riconoscibile e intrinsecamente facili da capire, rafforzando così l'accessibilità del tuo sito. È anche facile da creare e, quando fatto bene, può migliorare il design del tuo sito. La lingua del foglio di stile Cascading Style Sheets (CSS) permette tanto personalizzazione che si desidera durante la creazione di schede.

Istruzioni

1

Creare basi HTML schede. Poiché le schede sono un elenco di opzioni, il modo più logico per la loro creazione sarebbe con un elenco non ordinato. Ti consigliamo inoltre di creare una grande sezione sotto dove appariranno le informazioni nelle schede. Un \"div\ generico" funzionerà per quello. Il codice potrebbe essere simile a questo:
< ul >
< li >< un href = \ "#\" > Home < /a >< / li >
< li >< un href = \ "#\" > su < /a >< / li >
< li >< un href = \ "#\" > contatto < /a >< / li >
</UL >
< div >< / div >
In questo esempio, ci sono tre schede, che conduce alla Homepage, il \"About\" pagina e il \"Contact\" pagina. Naturalmente, si avrebbe bisogno di sostituire il \ "#\" simbolo con l'URL effettivo di tali pagine.

2

Rimuovere gli stili predefiniti browser reimpostando i margini e spaziatura interna dell'elenco non ordinato per \"0.\" in caso contrario, le schede potrebbero essere diverse nel browser diversi. Nel foglio di stile CSS, aggiungere:
UL {
margin: 0
VAI
padding: 0
VAI
}

3

Assicurarsi che gli elementi di elenco vengono visualizzati orizzontalmente anziché verticalmente aggiungendo il \"display:inline\" regola al tuo foglio di stile:
li {
display: inline
VAI
}

4

Creare un progetto di base per le schede anche dando loro un bordo nero di un pixel:
li {
display: inline
VAI
border: 1px solid #000
VAI
}
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
VAI
Larghezza: 500px
VAI
Height: 200px
VAI
}

5

Aggiungere un \"hover\" regola che rende ogni scheda girare un colore diverso quando il mouse passa sopra di esso. In questo esempio, faremo lo sfondo di colore grigio chiaro:
li:hover () {
colore di sfondo: #eee
VAI
}

6

Personalizzare il design, come si vede in forma. Probabilmente si vorrà dare il margine di elementi di elenco e padding valori in modo che il testo non verrà visualizzato come angusta. È inoltre possibile modificare i colori dei bordi, il tipo di carattere del testo, o qualsiasi altra cosa che desideri.