Tee horisontaalne menüü saidi ise

Horisontaalsed menüü on peaaegu iga saidi - see on oluline osa, sest see võib tema välimust ja kasutatavust meelitada või vastupidi, eemale peletama külastajaid. Õppigem, kuidas luua elementaarne horisontaalne menüü: muuta see "skelett" HTML, kapten põhioskused luua. Te saate kindlasti leida valmis menüü, kuid palju parem õppida, kuidas arendada seda ise. See on päris lõbus.

Õpi tegema menüü

Püüame mitte kõrvale kalduda semantika, mis kinni juhtfiguuride paigutus. Esiteks sa pead tegema "skelett" meie menüüde HTML, õppida põhioskused teha oma horisontaalse menüüd. Ja siis kaunistada, kasutades stiili lehed. Las meie horisontaalne menüü sisaldab 5 esemeid. Esimene toode suunatakse kodulehel. Teine punkt - "Firmast". Kolmas - "Meie auhinnad". Neljandaks - "See on lõbus." Viies - "Kontakt".

HTML-kood näeb välja selline:

Kes ei tea: ul tag kasutatakse bullet, selle elemendid algavad li. Li silte pärivad stiilid, mis on rakendatud ul.

Ul - ploki element nimekirja, siis venitatakse laius. Li on ka blokeerida.

Niisiis, luua index.html. Me kogume meie koodi. Sel hetkel, brauser kuvab vertikaalne mitte horisontaalne menüü. Aga me teiega eesmärk - teha horisontaalne menüü leheküljel. Selleks vajame CSS.

Mis on CSS?

Kui teil on veel kapten alade arendamisel, on vaja tutvuda mõiste kaskaadlaadistiku. Tegelikult on need reeglid vormingu, töötlemine, mida rakendatakse erinevate elementide lehekülgi veebilehel. Kui me kirjeldame omadusi elementide standard HTML, siis on korrata seda mitu korda, saad dubleerimist sama tükid kood. lehelaadimisaeg kasutaja arvuti kasvab. Selle vältimiseks on CSS. Piisab kirjeldada ainult üks kord teatud element, ja siis lihtsalt ära, kus kasutada omadusi eriti stiili. On võimalik teha kirjeldust mitte ainult lehe teksti, vaid ka teise faili. See võimaldab kohaldada kirjeldus erinevaid stiile kõik lehed saidil. Samuti on mugav muuta mõned lehed, muutes CSS-faili. Laadilehed võimaldab teil töötada fonte paremal tasemel kui HTML, aidates vältida halvenemist graafikalehekülgedele kohas.

Kasutades Style Sheets menüü arendamine

CSS-kood menüü:

1. # My_1menu {list-style: none; polstri: 6; laius: 800px; margin: auto;}
2. # My_1menu li {float: left; font: italic 18px Arial;}
3. # My_1menu endale {color: # 756; kuva: block; kõrgus: 55px; line-height: 55px; padding: 0px 15px 0px 15px; taust: #dfc; text-decoration: none;}
4. # My_1menu a: hõljutamine {color: #foa; taust: # 788;}

Nüüd vaatame saadud horisontaalne CSS menüü.

# My_1menu - nii on stiili loovutamise UL elemendi id = my_1menu nimekirja stiilis: pole - see käsk eemaldada kaubamärgid vasakul kavandatud esemeid.

laius: 800px - laius meie menüüs on 800 pikslit.

padding: 0 - see eemaldab polsterdus.

margin: auto - vyravnivnie horisontaalne menüü keskmes meie lehel.

# My_1menu li - määrates stiile li-elemente.

kõrgus: 55px - menüü kõrgus.

# My_1menu a: hover - määrates stiile element ja kui see on põhjustatud hiir.

Me ei kirjelda üksikasjalikult iga rida, sest iga arendaja saab määrata selle parameetrid siin. See kasutamise aluseks stiile menüüs veebilehel. Võite anda talle rohkem valmis ja ilus välimus, kasutades pilte. Määra element, kuid näiteks background: url (img1.png) korrata-x. Saagu background: url (img2.png) korrata-x jaoks: hover.

Kasuta oma kujutlusvõimet, loomingulisi eelistusi. Siis põhineb teadmisi selle kohta, kuidas luua lihtne menüü veebilehel, saate töötada leht oma unikaalne disain.