Naredite horizontalni menu za spletne strani sami

Vodoravni meni so skoraj vsako spletno stran - to je pomemben del, saj lahko s svojim videzom in uporabnostjo za privabljanje ali, nasprotno, prestrašiti proč obiskovalce. Naj se naučijo, kako ustvariti osnovno horizontalno meni: da je "okostje" v HTML, da bi obvladali osnovne sposobnosti ustvarjanja. Lahko zagotovo našli pripravljen meni, vendar je veliko lepše, če želite izvedeti, kako to razviti sami. To je zelo zabavno.

Več o tem, da bi meni

Trudimo se, da ne odstopa od semantike, ki se prilepijo na vodilnih osebnosti postavitve. Najprej moraš narediti "okostje" za naše menije v HTML, se naučijo osnovnih veščin, da bi svoje horizontalne menije. In potem bo okrasite s pomočjo slogov. Naj naš horizontalni menu vsebuje 5 predmetov. Prvi element bo preusmerjen na domačo stran. Druga točka - "O nas". Tretji - "Naše nagrade". Četrta - "To je zabavno." Peta - "Pišite nam".

HTML-koda je videti takole:

Kdo ne pozna: ul oznaka se uporablja za kroglo, njeni elementi začnejo z li. Li oznake podedujejo sloge, ki se uporabljajo v ul.

Ul - blok element na seznamu, bo raztegne v širino. Li je tudi blok.

Torej, ustvariti index.html. Zbiramo našo kodo. Na tej točki, brskalnik prikaže navpično namesto vodoravno meniju. Vendar pa smo z vami cilj - da bi horizontalni menu za spletne strani. Za to potrebujemo CSS.

Kaj je CSS?

Če imate še, da bi obvladali razvoj območij, je potrebno, da se seznanijo s pojmom Cascading Style Sheets. Dejstvo je, to so pravila za oblikovanje, obdelavo, ki se uporabljajo za različne elemente na straneh spletne strani. Če smo opisali lastnosti elementov v standardu HTML, boste morali ponoviti večkrat, boste dobili podvajanje enakih kosov kode. čas nalaganja na uporabnikovem računalniku, bo rasla. Da bi to preprečili, je CSS. To zadošča za opis le enkrat določen element, nato pa preprosto navesti, kje uporabiti lastnosti določenega stila. Možno je, da se opis ne samo besedila same strani, ampak tudi v drugo datoteko. To bo omogočilo, da uporabijo opis različnih stilov na vseh straneh spletnega mesta. Prav tako je primerno, da se spremeni nekaj strani, spreminjanje CSS-datoteko. Slogov vam omogočajo, da delo s pisavami na boljši ravni kot HTML, s čimer bi se izognili poslabšanju strani za grafike na spletni strani.

Uporaba slogovnih Listi za razvoj menija

CSS-koda za meni:

1. # My_1menu {seznama-style: none; oblazinjenje: 6; širina: 800px; stopnja: auto;}
2. # My_1menu li {float: left; pisava: italic 18px Arial;}
3. # My_1menu {color: # 756; Zaslon: blok; Višina: 55 slikovnih pik; vrstica-višina: 55 x; oblazinjenje: 0px 15px 0px 15px; Ozadje: #dfc; text-decoration: none;}
4. # My_1menu A: lebdenje {barva: #foa; ozadje: # 788;}

Zdaj pa si oglejmo nastalo vodoravnem meniju CSS.

# My_1menu - tako da je stil naloga za UL-element s id = my_1menu, seznam slogu: none - ta ukaz za odstranitev oznake, ki jih rednih predmetov levo.

širina: 800px - širina našega menija je 800 slikovnih pik.

oblazinjenje: 0 - to odstrani oblazinjenje notranjosti.

marža: auto - vyravnivnie horizontalni meni v središču naše strani.

# My_1menu li - dodeljevanje stilov Li-elementov.

višina: 55 x - višina meni.

# My_1menu A: lebdenje - dodeljevanje sloge element in če je povzročena z miško.

Ne bomo podrobno opisano v vsako vrstico, saj lahko vsak razvijalec določiti parametre tukaj. Ta osnova za uporabo slogov v meniju na spletni strani. Lahko bi to bolj končni in lep videz, z uporabo slike. Določi element ampak, na primer, v ozadju: url (img1.png) ponovi-x. Naj bo background: url (img2.png) ponovite-x za: lebdenje.

Uporabite svojo domišljijo, ustvarjalne želje. Nato na podlagi tega znanja o tem, kako ustvariti preprost meni na spletni strani, se lahko razvije stran s svojo edinstveno zasnovo.