Hvordan lage en CSS Tre Meny
En meny treet består av flere menyelementer for å navigere en nettside. En CSS, eller Cascading Style Sheets, menyen er en meny som er formatert med CSS-kode. CSS er en web-element formatering språk. CSS menyer består av to deler, HTML-koden for å lage menytreet og dets etiketter, og CSS-koden for formatering menyen inntastingsfeltene, grenser, etiketter og mus-over interaktivitet.
Bruksanvisning
Opprett CSS-filen
1 Starte et nytt dokument i programmet som du bruker for å lage CSS og HTML-dokumenter.
2 Skriv inn følgende kode på første linje i det nye dokumentet:
@charset "utf-8";
Denne koden forteller nettleseren dette er en CSS-fil.
3 Trykk ENTER to ganger for å plassere en blank linje mellom den første linjen med kode og neste linje.
4 Trykk ENTER to ganger for å plassere en blank linje mellom den første linjen med kode og neste linje.
Type (eller klipp og lim) følgende kode:
en kobling {
color: # 414958;
text-decoration: underline;
}
a: besøkte {
color: # 4E5869;
text-decoration: underline;
}
a: hover, en: aktiv, en: fokus {
text-decoration: none;
}
ul.nav {
list-style: none;
border-top: 1px solid # 666;
margin-bottom: 15px;
}
ul.nav li {
border-bottom: 1px solid # 666;
}
ul.nav en, ul.nav a: besøkte {
padding: 5px 5px 5px 15px;
display: block;
text-decoration: none;
bakgrunn: # 8090AB;
color: # 000;
}
ul.nav a: hover, ul.nav en: aktiv, ul.nav en: fokus {
bakgrunn: # 6F7D94;
farge: #fff;
Denne koden formaterer menyen treets menybokser, meny boks grenser, meny etiketter, menybakgrunn, og det skaper musepekeren interaktivitet. For eksempel når brukeren svever sin musemarkøren over et menyelement, endrer boksen inneholder elementet farge, og teksten endres fra svart til hvitt. Du kan endre utseendet og oppførselen til menytreet ved å endre verdiene for de enkelte eiendommene. For å endre etiketten tekstfarge, for eksempel, ville du redigere følgende velgeren:
ul.nav a: hover, ul.nav en: aktiv, ul.nav en: fokus {
bakgrunn: # 6F7D94;
farge: #fff;
}
Tekstfargen er kontrollert av "farge" egenskap. Den nåværende verdi, "#fff," skaper svart tekst. For å endre farge til grått, endre verdien til "# 666".
Med mindre du er kjent med CSS programmering, får ønsket utseende og oppførsel vil kreve eksperimentering.
5 Trykk ENTER to ganger for å plassere en blank linje mellom den siste linjen med kode og neste linje.
6 Skriv inn følgende kode:
.sidebar1 {
float: left;
bredde: 20%;
bakgrunn: # 93A5C4;
padding-bottom: 10px;
} hvis du
Dette skaper en sidebar beholder å holde menytreet.
7 Lagre filen som "menu.css."
Lag HTML-fil
8 Start en ny HTML-filen i det programmet du bruker for å lage CSS og HTML-dokumenter.
9 Type (eller klipp og lim) følgende kode på første linje i det nye dokumentet:
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
Denne koden forteller nettleseren dette er en HTML-webside og hva standarder for å bruke til å formatere siden.
10 Skriv inn følgende kode:
<Body>
<Div class = "sidebar1">
Denne koden starter med innholdsdelen av websiden og skaper sidepanelet container for å holde på menyen.
11 Start en ny linje og skriv inn følgende kode:
<Ul class = "nav">
<li><a href="#">Label 1</a></li>
<li><a href="#">Label 2</a></li>
<li><a href="#">Label 3</a></li>
<li><a href="#">Label 4</a></li>
</ul>
</ Div>
</ Body>
</ Html>
Denne koden skaper menyen, lukker sidepanelet container, og betyr slutten på websiden. Du kan opprette så mange menyelementer som du ønsker ved å opprette et nytt element, for eksempel "<li> <a href="#"> Etikett 5 </a> </ li>" for hver enkelt. For å opprette arbeider koblinger, erstatte nummertegn (#) med de ønskede nettadresser. Hvis du vil endre meny etiketter, erstatte dagens etiketter, dvs. "Label 1," "Label 2" osv, med ønsket etikett-teksten.
12 Navn og lagre filen.
Hint
- Når du laster opp denne websiden til webserveren, ikke glem å laste opp menu.css. Ellers vil menytreet ikke formatere riktig.