Immissione di schede sulle tue pagine web dà ai tuoi visitatori un modo per navigare attraverso il sito che è più interessante di un elenco di link sulla parte superiore o laterale della pagina. Quando si dispone di un gran numero di link, è possibile utilizzare Cascading Style Sheets (CSS) per creare due o più righe di schede, ogni riga viene leggermente compensato da riga sopra. Il foglio di stile può essere incorporato in ogni pagina del tuo sito dandogli un aspetto coerente.
Istruzioni
1
Aprire un documento vuoto in qualsiasi editor di testo. Questo è dove verrà creato il foglio di stile che definisce le schede.
2
Creare un \"menu\" id per ogni riga di schede: < br / >< br / > #menu {padding-left: 20px;} < br / > #menu2 {padding-left: 30px;} < br / >< br / > il \"padding-left\" proprietà crea l'offset per ogni riga in modo che essi non direttamente si sovrappongono tra loro.
3
Creare una classe per la proprietà di link con il codice riportato di seguito: < br / >< br / >. NAV un < br / > {< br / > colore: #fff < br / > andare < br / > background: #996699 < br / > andare < br / > stile del bordo: groove < br / > andare < br / > testo-decorazione: nessuno < br / > andare < br / > imbottitura : 10px < br / > andare < br / >}
4
Creare la regola che definisce che cosa succede quando il mouse passa sopra la scheda con il codice riportato di seguito: < br / >< br / >. NAV un: hover {< br / > colore: #fff < br / > andare < br / > sfondo: #999999 < br / > andare < br / > padding: 10px < br / > andare < br / >}
5
Creare la regola per la lista non ordinata: < br / >< br / > ul. NAV < br / > {< br / > padding: 10px < br / > andare < br / > list-style-type: nessuno < br / > andare < br / >} < br / >< br / > ogni riga di schede verrà creata come una lista non ordinata separata.
6
Creare la regola che definisce ogni voce dell'elenco e inserisce gli elementi in una riga orizzontale: < br / >< br / > li. NAV < br / > {< br / > visualizzare: blocco < br / > andare < br / > galleggiante: sinistra < br / > andare < br / > margine: 0 < br / > andare < br / >}
7
Salvare il documento CSS con il \".css\" estensione del file.
8
Inserire il codice seguente nel documento HTML in cui si desidera le schede a comparire: < br / >< br / >< ul id = \ "menu \" classe = \ "nav\" >< br / >< li >< un href = #\ \"" > scheda 1 < /a >< /li >< br / >< li >< un href = #\ \"" > Tab 2 < /a >< /li >< br / >< li >< un href = #\ \"" > Tab 3 < /a >< / li >< br / >< / UL >< br / >< br / >< br / >< ul id = \"menu2\" classe = \ "nav\" >< br / >< li >< un href = #\ \"" > Tab 4 < /a >< /li >< br / >< li >< un href = #\ \"" > scheda 5 < /a >< /li >< br / >< li >< un href = #\ \"" > scheda 6 < /a >< /li >< br / >< / UL >