Hvordan man laver en Navbar

May 18

Hvordan man laver en Navbar


Lav din egen vandret navigationslinje, eller "navbar," med linjer af HTML-kode. HTML og CSS kode indtastes i en teksteditor som Notesblok, hvor information såsom tekst, farve og links er indgået koden. Når du har tilføjet koden til din hjemmeside, dine læsere har redskaberne til at besøge de andre sider på dit websted.

Instruktioner

1 Åbn Notesblok-programmet.

2 Opret de forskellige links til dit navbar og polstring og margen for det ved at kopiere og indsætte følgende i din Notesblok:

<Ul id = "liste-nav">
<Li> <a href="#"> Hjem </a> </ li>
<Li> <a href="#"> Om os </a> </ li>
<Li> <a href="#"> Services </a> </ li>
<Li> <a href="#"> Produkter </a> </ li>
<Li> <a href="#"> Kontakt </a> </ li>
</ Ul>

ul # liste-nav {
margin: 20px;
padding: 0;
liste-style: none;
bredde: 525px;
}

3 Gør navbar gå i en linje på tværs af websiden ved at kopiere og indsætte følgende i din Notesblok:

ul # liste-nav li {
display: inline
}

4 Opret links til navbar ved at kopiere og indsætte følgende:

ul # liste-nav li a {
tekst-dekoration: ingen;
padding: 5px 0;
bredde: 100px;
baggrund: # 485e49;
farve: #eee;
float: venstre;

5 Juster teksten i Navbar ved at kopiere og indsætte følgende:

ul # liste-nav li a {
text-align: center;
border-venstre: 1px solid #fff;
}

6 Opret en rollover farve ved at kopiere og indsætte følgende:

ul # liste-nav li a: hover {
baggrund: # a2b3a1;
color: # 000
}

7 Ændre nogen af ​​farverne ved at indtaste koden for farve efter eget valg. Find alle de "#" symboler og erstatte dem med de URL-adresser til at oprette links til "Home", "About Us", "Services", "Produkter" og "Kontakt."

8 Gem Navbar kode filen i dit Notesblok. Tryk på "Ctrl" + "A" for at vælge alle. Åbn din webside, og gå til CSS HTML-editor. Tryk på "Ctrl" + "V" for at kopiere Navbar koden. Gem koden til at indtaste den i din webside.


relaterede artikler