Make horizontální menu pro web sami

Horizontální Menu mít téměř žádný web - je důležitou součástí, jak je to možné s jeho vzhled a použitelnost pro přilákání nebo naopak zaplašit návštěvníků. Pojďme se dozvědět, jak vytvořit základní horizontální menu: make it „kostra“ do HTML, zvládnutí základních dovedností tvorby. Určitě můžete najít připravenou nabídku, ale mnohem hezčí se naučit, jak rozvíjet sami. Je to docela zábavné.

Naučte se, aby nabídku

Snažíme se odchýlit od sémantiky, které přilnou k předním osobnostem rozvržení. Nejprve musíte provést „kostru“, pro naše menu na HTML, naučit se základní dovednosti, aby se jejich vlastní horizontální menu. A pak to bude zdobit pomocí stylů. Nechť naše horizontální menu obsahuje 5 položek. První položka bude přesměrován na domovskou stránku. Druhý bod - „O nás“. Třetí - „Naše ceny“. Za čtvrté - „Je to legrace.“ Za páté - „Napište nám“.

HTML kód vypadá takto:

Kdo nezná: ul štítek se používá pro kulky, její prvky začínají li. Li značky zdědí styly, které jsou aplikovány na ul.

Ul - blok element seznamu, bude se protáhne na šířku. Li je také blok.

Takže vytvořit index.html. Shromažďujeme náš kód. V tomto okamžiku se zobrazí vertikální prohlížeč, spíše než horizontální menu. Ale my s vámi cíl - aby se horizontální menu pro web. K tomu potřebujeme CSS.

Co je to CSS?

Máte-li ještě zvládnout vývoj webů, je třeba se seznámit s konceptem kaskádových stylů. Ve skutečnosti se jedná o pravidla pro formátování, zpracování, které se použijí pro různé prvky na stránkách web-stránek. Pokud budeme popisovat vlastnosti prvků ve standardním formátu HTML, budete muset tento postup několikrát opakovat, dostanete duplicitě stejné kousky kódu. stránky doba načítání na počítači uživatele poroste. Aby se tomu zabránilo, je CSS. Postačí popsat pouze jednou určitý prvek, a pak jednoduše ukazují, kde se používají vlastnosti určitého stylu. Je možné, aby se popis nejen textu samotné stránky, ale i v jiném souboru. To umožní použít popis různých stylů na všech stránkách webu. Je také vhodné upravit některé stránky, úpravě CSS-soubor. Styly vám umožní pracovat s fonty na lepší úrovni, než je HTML, pomáhá, aby se zabránilo zhoršení grafické stránky na webu.

Používání stylů pro rozvoj nabídky

CSS kódu pro nabídky:

1. # My_1menu {list-style: none; výplň: 6; šířka: 800px; margin: auto;}
2. # My_1menu li {float: vlevo; písmo: kurzíva 18 pixelů Arial;}
3. # My_1menu a {color: # 756; Zobrazení: blok; výška: 55 x; line-výška: 55 pixelů; padding: 0px 15 pixelů 0px 15 pixelů; background: #dfc; text-decoration: none;}
4. # My_1menu a: hover {color: #foa; background: # 788;}

Nyní se podívejme na výsledné horizontální nabídky CSS.

# My_1menu - tak tam je styl úkol pro UL prvek s id = my_1menu, list-style: none - tento příkaz, aby se odstranily stopy zanechané naplánované položky.

šířka: 800px - šířka jídelního lístku je 800 pixelů.

padding: 0 - toto odstraní vycpávku uvnitř.

margin: auto - vyravnivnie horizontální menu ve středu naší stránce.

# My_1menu li - přiřazení stylů Li-prvků.

výška: 55 x - výška nabídky.

# My_1menu a: hover - přiřazení styly na prvek, a, je-li indukována myší.

Nebudeme popisovat podrobně každý řádek, protože každý vývojář může určit její parametry zde. Tento základ pro používání stylů v nabídce na internetových stránkách. Můžete dát mu větší hotový a krásný vzhled pomocí obrázků. Přiřadit prvek, ale je například pozadí: url (img1.png) repeat-x. Budiž background: url (img2.png) repeat-x pro: visení.

Použijte svou fantazii, tvůrčí preference. Pak na základě této znalosti o tom, jak vytvořit jednoduché menu na webových stránkách, můžete vytvořit stránku s vlastním jedinečným designem.