XXXXX.com  Home
bmpentertainment.com  Huvudsida

För att säkerställa att besökarna vet i korthet vilken sida de tittar, det är en bra idé att utforma navigeringsmenyer på ett sätt som håller automatiskt nuvarande länkar aktiv. Detta kan uppnås med grundläggande CSS.

Instruktioner

Ställ in HTML-dokument

1 Skapa en oordnad list.This menyn innehåller 3 länkar:. "Home" "Om" och "tjänster".

<Ul>

<Li> Hem </ li>

<Li> Om </ li>

<Li> Tjänster </ li>

</ Ul>

2 Lägg till ett ankare tagg till varje post i listan och länka till lämplig sida.

<Ul>

<Li> <a href="index.html"> Hem </a> </ li>

<Li> <a href="about.html"> Om </a> </ li>

<Li> <a href="services.html"> Tjänster </a> </ li>

</ Ul>

3 Lägg relaterade CSS-klasser.

<Ul>

<Li> <a href="index.html" class="home"> Hem </a> </ li>

<Li> <a href="about.html" class="about"> Om </a> </ li>

<Li> <a href="services.html" class="services"> Tjänster </a> </ li>

</ Ul>

4 Fäst CSS format hänvisning till det HTML-dokument. Lägg till följande kod i <head> taggen:

<Link href = "style.css" rel = "stylesheet" type = "text / css" />

5 För varje sida, tillsätt lämplig kropp klassen. Som ett exempel, för hemsidan, lägga till:

<Body class = "hem">

För om sidan lägger:

<Body class = "om">

För sidan tjänster, lägga till:

<Body class = "tjänster">

Ställ in CSS

6 Skapa ett CSS-dokument och namnge det "style.css" och se till att det här dokumentet sparas på samma nivå som de andra sidorna.

7 I "style.css" dokument, lägga särskild styling att rikta kroppen och ankartaggar för specifika listobjekt. Här, vi är vi vänder bakgrunden rött.

body.home a.home {background-color: red;}

body.about a.about {background-color: red;}

body.services a.services {background-color: red;}

8 Alternativt, kombinera alla objekt att koda CSS mer effektivt, och samtidigt uppnå samma effekt.

body.home a.home, body.about a.about, body.services a.services {background-color: red;}