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.
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.