Nwlapcug.com


Come mantenere un collegamento attivo CSS

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