Padaryti horizontalų meniu patys svetainėje

Horizontali meniu beveik bet kokią svetainę - tai svarbi dalis, nes ji gali su savo išvaizda ir praktiškumo pritraukti arba, atvirkščiai, atbaidyti lankytojus. Mokykimės, kaip sukurti elementarią horizontalų meniu: kad jis "skeletas" į HTML, įsisavinti pagrindinius įgūdžius kurti. Jūs tikrai rasite paruoštas meniu, bet daug gražiau išmokti kurti patys. Tai gana įdomus.

Sužinokite, kaip padaryti meniu

Mes stengiamės nenukrypti nuo semantikos, kurios prilimpa prie pirmaujančių figūrų išdėstymas. Pirmiausia jūs turite padaryti "skeletas" mūsų meniu į HTML, išmokti pagrindinius įgūdžius, kad savo horizontalios meniu. Ir tada jis bus papuošti, naudojant stilių. Tegul mūsų horizontalus meniu yra 5 prekės. Pirmasis elementas bus nukreipti į puslapį. Antras punktas - "Apie mus". Trečiasis - "Mūsų apdovanojimai". Ketvirta - "Tai įdomus." Penkta - "Susisiekite su mumis".

HTML kodas atrodo taip:

Kas nežino: ul žyma naudojama kulkos, jos elementai prasideda li. Li žymės paveldi stilių, kad yra taikomos ul.

Ul - blokas elementas sąrašą, jis bus ištemptas į plotį. Li taip pat yra blokas.

Taigi, sukurti index.html. Mes renkame mūsų kodą. Šiuo metu, naršyklė rodo vertikali, o ne horizontalioje meniu. Bet mes su jumis tikslo - padaryti horizontalų meniu svetainėje. Už tai mes turime CSS.

Kas yra CSS?

Jei dar įvaldyti svetainių kūrimą, būtina susipažinti su CSS koncepciją. Tiesą sakant, tai yra dėl formatavimo, perdirbimo taisyklės, kurios taikomos skirtingų elementų dėl interneto svetainės puslapiuose. Jei mes aprašome apie šio standarto HTML elementų savybes, turėsite pakartoti kelis kartus, gausite tos pačios vienetų kodo dubliavimo. Puslapio įkėlimo laikas nuo vartotojo kompiuterio augs. Norėdami to išvengti, yra CSS. Pakanka apibūdinti tik vieną kartą tam tikrą elementą, o tada tiesiog nurodyti, kur naudoti konkretaus stiliaus savybes. Tai galima padaryti ne tik paties puslapio tekste, bet ir kitoje bylos aprašymas. Tai leis taikyti skirtingus stilius aprašymą ant visų svetainės puslapiuose. Taip pat patogu keisti kai kuriuos puslapius, keisti CSS failą. Stilius lakštai leidžia jums dirbti su šriftais ant geresnio lygio nei HTML, padeda išvengti pablogėjimo grafikos puslapių svetainėje.

Naudojant Style Sheets už meniu plėtros

CSS kodas meniu:

1. # My_1menu {list-style: nėra; Apmušalas: 6; plotis: 800 x; margin: auto;}
2. # My_1menu li {float: kairėje; šriftas: kursyvas 18tšk Arial;}
3. # My_1menu {color: # 756; ekranas: blokas; aukštis: daugiau kaip 55; linija-aukštis: daugiau kaip 55; padding: 0px 15px 0px 15px; fono: #dfc; teksto apdaila: nėra;}
4. # My_1menu A: Pakimba {spalva: #foa; fono: # 788;}

Dabar pažvelkime į gautą horizontalioje CSS meniu.

# My_1menu - todėl yra stilius skyrimas UL- elemento su id = my_1menu, list-style: None - ši komanda pašalinti ženklus paliko reguliaraus daiktais.

plotis: 800px - apie mūsų meniu plotis yra 800 taškų.

padding: 0 - šis pašalina padding viduje.

margin: auto - vyravnivnie horizontalų meniu mūsų puslapio centre.

# My_1menu Li - priskiriant stilių Li-elementų.

aukštis: kaip 55 - meniu aukštis.

# My_1menu A: Pakimba - priskiriant stilių į elementą ir tada, kai ji yra sukeltas pele.

Mes ne išsamiai aprašyti kiekvieną liniją, nes kiekvienas kūrėjas gali nurodyti savo parametrus čia. Tai pagrindas stilių naudoti meniu svetainėje. Jūs galite suteikti jai daugiau gatavo ir gražią išvaizdą, naudojant nuotraukas. Susieti elementas, tačiau, pavyzdžiui, fono: URL (img1.png) Pakartokite-X. Tebūnie fonas: URL (img2.png) Pakartokite-x į: užveskite.

Naudokite savo vaizduotę, kūrybinius pageidavimus. Tada remiantis tomis žiniomis apie tai, kaip sukurti paprastą meniu svetainėje, galite sukurti puslapį su savo unikalaus dizaino.