Per garantire che i visitatori sappiano in un colpo d'occhio quale pagina stanno consultando, è una buona idea per progettare i menu di spostamento in un modo che mantiene automaticamente i collegamenti attivi. Ciò può essere ottenuto con CSS di base.
Istruzioni
Installazione del documento HTML
1
Creare un elenco non ordinato. Questo menu include 3 link: "Home" "Su" e "Servizi.".
< ul >
Home < li > </li >
< li > su </li >
Servizi < li > </li >
</UL >
2
Aggiungere un tag di ancoraggio per ogni elemento dell'elenco e link alla pagina appropriata.
< ul >
< li >< un href="index.html" > Home < /a >< / li >
< li >< un href="about.html" > su < /a >< / li >
< li >< un href="services.html" > Servizi < /a >< / li >
</UL >
3
Aggiungere le classi CSS correlate.
< ul >
< li >< un href="index.html" class = "home" > Home < /a >< / li >
< li >< un href="about.html" class = "informazioni su" > su < /a >< / li >
< li >< un href="services.html" class = "services" > Servizi < /a >< / li >
</UL >
4
Allegare il foglio di stile CSS di riferimento al documento HTML. Aggiungere il seguente codice per il tag < head >:
< link href="style.css" rel = "stylesheet" type = "text/css" / >
5
Per ogni pagina, aggiungere la classe corpo appropriato. Ad esempio, per la home page, aggiungere:
< corpo class = "casa" >
Per le informazioni sulla pagina, aggiungere:
< corpo class = "informazioni su" >
Per servizi di pagina, aggiungere:
< corpo class = "services" >
Installazione del CSS
6
Creare un documento CSS e denominarlo "Style. css" e assicurarsi che questo documento venga salvato allo stesso livello delle altre pagine.
7
Nel documento "Style. css", aggiungere gli stili speciali a destinazione il corpo e tag di ancoraggio per elementi di elenco specifici. Siamo qui, ci stanno trasformando lo sfondo rosso.
Body.Home a.home {background-color: red;}
circa Body.about {background-color: red;}
Body.Services a.services {background-color: red;}
8
In alternativa, combinare tutti gli elementi del codice CSS in modo più efficiente, ottenendo lo stesso effetto.
Body.Home a.home, body.about circa, body.services a.services {background-color: red;}