June 30
schede arrotondati sono uno stile comune di navigazione sui siti web. I visitatori del sito clicca su schede per caricare le pagine differenti all'interno del sito web. Il metodo per rendere la navigazione schede arrotondato è simile al processo che rende le barre di navigazione, ma è necessario sapere come modellare ciascuna voce di menu in una scheda. La proprietà "box-raggio" in CSS permette di arrotondare i due angoli superiori per trasformare le vostre voci di menu in schede. Tutti gli altri stili - repertorio colori, colori testo ei caratteri - dipendono gli stili che si desidera per il tuo sito.
1 Aggiungere una lista non ordinata alla tua pagina Web utilizzando "<ul>" tag. Inserire un link all'interno di ogni elemento della lista per creare una scheda cliccabile:
<Ul id = "schede">
<Li> <a href="page1.html"> Page 1 </ li>
<Li> <a href="page1.html"> Pagina 2 </ li>
<Li> <a href="page1.html"> Page 3 </ li>
</ Ul>
2 Aprire il foglio di stile per il tuo sito. Se non ne hai ancora uno, creare un file vuoto e salvarlo come "mystyles.css". Utilizzare questo codice tra i "<head>" tag nella tua pagina web per incorporare il foglio di stile:
<Link rel = "stylesheet" href = "mystyles.css" type = "text / css" />
Sia il foglio di stile e la pagina Web deve essere nella stessa cartella di rendere il lavoro precedente codice.
3 Scrivi una regola di stile per la lista non ordinata, puntando il suo nome ID. All'interno della regola, spegnere lista proiettili e rimuovere imbottitura laterale sinistro:
schede {
list-style: none; /
Rimuove proiettili /
padding-left: 0; / Rimuove la lista indentazione /
}
4 Stile le linguette dalle styling i tag di ancoraggio: Tabs un {
background-color: blue;
colore bianco;
padding: 10px 5px;
blocco di visualizzazione; /
Necessario quando imbottitura ancore /
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
I precedenti esempi di colori le linguette blu con testo bianco, i rilievi di loro un po 'e rende i due angoli superiori arrotondati.
5 Float ogni voce dell'elenco a sinistra per rendere le schede corrono orizzontalmente sullo schermo: schede li {
float: left;
}
Non è possibile aggiungere "float: left" per le ancore come avete fatto con le altre proprietà, perché questo causa un problema in cui le schede sarà simile passi.
6 Creare uno stato hover per le schede:
schede a: hover {
background-color: verde;
}
Nell'esempio, quando si passa il mouse su una scheda, esso diventa verde.