April 18
Per garantire che i visitatori conoscono a colpo d'occhio quale pagina si sta visualizzando, è una buona idea per la progettazione di menu di navigazione in un modo che mantiene automaticamente i collegamenti attuali attiva. Ciò può essere ottenuto con i CSS base.
1 Crea un menù dall'UNESCO.Questo non ordinata comprende 3 link:. "Home" "About" e "Servizi".
<Ul>
<Li> Home </ li>
<Li> Chi </ li>
<Li> servizi </ li>
</ Ul>
2 Aggiungere un tag di ancoraggio per ogni voce dell'elenco e il link alla pagina corrispondente.
<Ul>
<Li> <a href="index.html"> casa </a> </ li>
<Li> <a href="about.html"> Chi </a> </ li>
<Li> <a href="services.html"> Servizi </a> </ li>
</ Ul>
3 Aggiungere classi CSS correlati.
<Ul>
<Li> <a href="index.html" class="home"> casa </a> </ li>
<Li> <a href="about.html" class="about"> Chi </a> </ li>
<Li> <a href="services.html" class="services"> Servizi </a> </ li>
</ Ul>
4 Fissare il riferimento CSS foglio di stile al documento HTML. Aggiungere il seguente codice al tag <head>:
<Link href = "style.css" rel = "stylesheet" type = "text / css" />
5 Per ogni pagina, aggiungere la classe organo competente. A titolo di esempio, per la home page, aggiungere:
<Class corpo = "casa">
Per la pagina su, aggiungere:
<Class corpo = "su">
Per la pagina dei servizi, aggiungere:
<Class corpo = "servizi">
6 Creare un documento CSS e il nome "style.css" e fare in modo che questo documento viene salvato allo stesso livello delle altre pagine.
7 Nel documento "style.css", aggiungere uno stile speciale per indirizzare i tag body e di ancoraggio per le voci di elenco specifici. Qui, siamo stiamo trasformando lo sfondo rosso.
body.home a.home {background-color: red;}
body.about a.about {background-color: red;}
body.services a.services {background-color: red;}
8 In alternativa, combinare tutti gli elementi per codificare il CSS in modo più efficiente, mentre ottenere lo stesso effetto.
body.home a.home, a.about body.about, body.services a.services {background-color: red;}