Készíts egy vízszintes menü az oldalon magad

Vízszintes menü szinte minden helyszínen - ez egy fontos része, mivel az annak megjelenését és használhatóságát, hogy vonzza, vagy éppen ellenkezőleg, elriasztani a látogatókat. Nézzük meg, hogyan lehet létrehozni egy elemi vízszintes menü: hogy „csontváz”, hogy HTML, hogy elsajátítsák az alapvető készségek létre. Akkor biztosan talál egy kész menüben, de sokkal szebb, hogy megtanulják, hogyan kell fejleszteni magad. Ez elég szórakoztató.

Tanuld meg, hogy menü

Igyekszünk, hogy ne térjenek el a szemantika, amelyek betartják a vezető alakjai az elrendezést. Először meg kell, hogy egy „csontváz” a mi menüket HTML, megtanulják az alapvető készségek, hogy saját vízszintes menüt. És akkor díszíteni, stíluslapoknak. Hagyja, hogy a vízszintes menü 5 elemet tartalmaz. Az első elem lesz irányítva a honlapra. A második pont - „Rólunk”. A harmadik - „A díjat”. Negyedik - „Ez vicces.” Ötödik - „Kapcsolatfelvétel”.

HTML-kód így néz ki:

Aki nem tudja: ul használt címkét a golyó, annak elemeit kezdődik a li. Li címkék öröklik a stílusokat alkalmaznak a ul.

Ul - blokk eleme a listán, akkor elérte a szélessége. Li is egy blokk.

Tehát hozz létre egy index.html. Gyűjtjük a kódot. Ezen a ponton, a böngésző megjelenít egy függőleges helyett vízszintes menü. De veled cél -, hogy egy vízszintes menü az oldalon. Ehhez szükségünk van a CSS.

Mi az a CSS?

Ha még nem, hogy elsajátítsák a fejlesztési területek, szükséges, hogy megismerjék a koncepció Cascading Style Sheets. Tény, hogy ezek a szabályok a formázáshoz, feldolgozására, amelyek alkalmazzák a különböző elemek az oldalakon a web-oldalon. Ha leírjuk a tulajdonságait az elemek szabványos HTML, akkor meg kell ismételni ezt többször, akkor kap egy párhuzamos azonos mennyiségű kódot. oldal betöltési időt a felhasználó számítógépén fog nőni. Ennek elkerülése érdekében, van egy CSS. Elég leírására csak egyszer egy bizonyos elemet, majd egyszerűen jelzi, hogy hol kell használni a tulajdonságait egy adott stílusban. Lehetőség van, hogy a leírás nem csak a szövegét maga az oldal, hanem egy másik fájlt. Ez lehetővé teszi, hogy alkalmazza a leírást a különböző stílusok minden oldalon az oldalon. Azt is kényelmesen módosíthatja egyes oldalak, módosítjuk a CSS-fájlt. Stíluslapok lehetővé teszi, hogy dolgozni betűtípusok magasabb szintű, mint a HTML, segít elkerülni romlik a grafika oldalt az oldal.

Stíluslapoknak menü fejlesztés

CSS-kódot a menü:

1. # My_1menu {list-style: none; padding: 6; szélesség: 800px; margin: auto;}
2. # My_1menu li {float: left; font: dőlt 18px Arial;}
3. # My_1menu egy {color: # 756; display: block; magassága: 55 képpont; line-height: 55 képpont; padding: 0px 0px 15px 15px; háttér: #dfc; text-decoration: none;}
4. # My_1menu egy: hover {színe: #foa; háttér: # 788;}

Most nézzük meg a kapott vízszintes CSS menü.

# My_1menu - így van stílusa kiosztás UL elem id = my_1menu, list-style: none - ez a parancs, hogy távolítsa el a nyomait a tervezett elemeket.

szélesség: 800px - szélessége Étlapunkon 800 pixel.

padding: 0 - eltávolítja a belső párnázás.

margin: auto - vyravnivnie vízszintes menü középpontjába oldalunkon.

# My_1menu li - kijelölni stílusok li-elemekkel.

magasság: 55 képpont - menü magasságát.

# My_1menu a: hover - kijelölni stílusok elem és amikor indukált egér.

Nem fogjuk részletesen leírja minden vonalon, mivel minden fejlesztő lehet megadni a paramétereit. Ez felhasználásának alapját stílusok a menüben a honlapon. Akkor, hogy ez egy kész és szép megjelenés, képek segítségével. Hozzárendelése elem, hanem, például háttér: url (img1.png) repeat-x. Legyen background: url (img2.png) repeat-x egy: hover.

Használd a fantáziád, kreatív beállításokat. Aztán alapján, hogy a tudás, hogy hogyan lehet létrehozni egy egyszerű menüt a honlapon, akkor dolgozzon ki egy oldalt saját, egyedi design.