Come mantenere un CSS link attivo

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.

istruzione

Imposta il documento HTML

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

Imposta il CSS

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;}


Articoli Correlati