Hvordan lage Horisontale Tabs

May 12

Opprette en horisontal tab system på nettstedet ditt kan gjøre for en stor designelement og er lett for leserne å navigere. Mens det er mange forskjellige måter å lage horisontale faner, noen av dem ganske kompliserte, krever den enkleste måten noe mer enn grunnleggende hypertekstmarkerings (HTML) kode og stilark (CSS).

Bruksanvisning

1 Åpne et tekstredigeringsprogram som Notisblokk og skape strukturen i en enkel HTML-dokument med en <head> og <body> -delen:

<Html>

</ Html>

2 Lag en enkel uordnet HTML liste over lenker i <body> -delen:

Gi den første linken en klasse for \ "dagens \" for å betegne som fane er åpnet. Dette vil bli brukt når vi skaper stilarket.

3 Lag kroppen på siden under sorterte liste med <div> element for å inneholde det:

<Div> Dette er siden innholdet av Tab 1. </ Div>

4 Legg et stilark til <head>, og angi hvert listepunkt (<li>) til \ "skjerm. Inline \" Dette vil tillate listen vises horisontalt i stedet for vertikalt.

li {
display: inline
GÅ
}

</ Style>

5 Endre standardinnstillingene for margin og padding på listen og <div> til de samsvarer med hverandre og vises i nettleseren din som en boks med tre faner på toppen av det:

ul {
padding: 10px
GÅ
margin: 0
GÅ
}

li {
display: inline
GÅ
border: 2px solid # d7d7d7
GÅ
margin: 0 10px
GÅ
padding: 10px 0
GÅ
}

et {
padding: 10px
GÅ
}

div {
margin: 0 10px
GÅ
padding: 10px
GÅ
border: 2px solid # d7d7d7
GÅ
}

</ Style>

6 Legg til to forskjellige bakgrunnsfarge reglene før den avsluttende </ style> tag av stilark. Først bør du kategorien som er i dag åpnet (den med klassen av \ "dagens \") har en bakgrunnsfarge som er i flukt med kanten av <div>. For det andre, når svever over en annen fane med musen, skal bakgrunnsfargen slår en liten nyanse av grått. Selvfølgelig kan du endre fargene til dine egne preferanser.

a: hover {
background-color: # f7f7f7
GÅ
}

a.current {
background-color: # d7d7d7
GÅ
}

7 Lagre siden som tab1.html, og deretter opprette to sider og navngi dem tab2.html og tab3.html. Disse sidene skal være identiske, bortsett fra det bør være forskjellig innhold i <div> -delen, og koblingen av gjeldende side bør ha class = \ "dagens \" signifier.

8 Sørg for at alle sider blir lagret i samme katalog og åpne dem i en nettleser. Du skal se en enkel horisontal tab system.