Come creare orizzontali Tabs

February 16

Creazione di un sistema di tabulazione orizzontale sul tuo sito web può fare per una grande caratteristica del progetto ed è facile per i tuoi lettori a navigare. Mentre ci sono molti modi diversi per creare schede orizzontali, alcuni dei quali piuttosto complicate, il modo più semplice richiede niente di più che iper-testo di markup (HTML) fogli di codice e di stile a cascata (CSS) di base.

istruzione

1 Aprire un editor di testo come Blocco note e creare la struttura di un documento HTML di base con un <head> e <body> sezione:

<Html>

<Head>
</ Head>

<Body>
</ Body>

</ Html>

2 Creare un semplice elenco HTML non ordinata di link nella sezione <body>:

<Ul>
<Li> <a href=\"tab1.html\" class=\"current\"> Tab 1 </a> </ li>
<Li> <a href=\"tab2.html\"> Tab 2 </a> </ li>
<Li> <a href=\"tab3.html\"> Tab 3 </a> </ li>
</ Ul>

Dare il primo anello di una classe di \ "\ corrente" per indicare scheda che è attualmente aperto. Questo sarà usato quando stiamo creando il foglio di stile.

3 Creare il corpo della pagina sotto la lista ordinata utilizzando l'elemento <div> per contenerlo:

<Div> Questo è il contenuto della pagina di Tab 1. </ Div>

4 Aggiungere un foglio di stile per la sezione <head> e impostare ogni elemento della lista (<li>) a \ "display:. Inline \" Questo permetterà la lista di apparire in orizzontale anziché in verticale.

<Style type = \ "text / css \">

li {
display: inline
ANDARE
}

</ Style>

5 Modificare le impostazioni dei margini e padding di default della lista e il <div> fino a che non corrispondono tra loro e appaiono nel browser come una scatola con tre schede su di esso:

<Style type = \ "text / css \">

ul {
padding: 10px
ANDARE
margin: 0
ANDARE
}

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

un {
padding: 10px
ANDARE
}

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

</ Style>

6 Aggiungere due differenti regole colore di sfondo prima della chiusura </ style> tag del foglio di stile. In primo luogo, la scheda che è attualmente aperto (quello con la classe di \ "\ corrente") dovrebbe avere un colore di sfondo che è a filo con il bordo del <div>. In secondo luogo, quando si passa sopra un'altra scheda con il mouse, il colore di sfondo deve girare una leggera sfumatura di grigio. Ovviamente, è possibile modificare i colori alle proprie preferenze.

a: hover {
background-color: # f7f7f7
ANDARE
}

a.current {
background-color: # d7d7d7
ANDARE
}

7 Salvare la pagina come tab1.html, quindi creare più di due pagine e assegnare loro un nome e tab2.html tab3.html. Queste pagine dovrebbero essere identici, tranne che non ci dovrebbe essere diverso contenuto nella sezione <div>, e il link della pagina corrente dovrebbe avere la class = \ significante "corrente \".

8 Assicurarsi che tutte le pagine vengono salvate nella stessa directory e aprirli in un browser Web. Si dovrebbe vedere un sistema di tabulazione orizzontale di base.