Make horizontálne menu pre web sami

Horizontálne Menu mať takmer žiadny web - je dôležitou súčasťou, ako je to možné s jeho vzhľad a použiteľnosť pre prilákanie alebo naopak zaplašit návštevníkov. Poďme sa dozvedieť, ako vytvoriť základné horizontálne menu: make it "kostra" do HTML, zvládnutie základných zručností tvorby. Určite môžete nájsť pripravenú ponuku, ale oveľa krajšie sa naučiť, ako rozvíjať sami. Je to celkom zábavné.

Naučte sa, aby ponuku

Snažíme sa odchýliť od sémantiky, ktoré priľnú k popredným osobnostiam rozvrhnutie. Najprv musíte vykonať "kostru", pre naše menu na HTML, naučiť sa základné zručnosti, aby sa ich vlastné horizontálne menu. A potom to bude zdobiť pomocou štýlov. Nech naše horizontálne menu obsahuje 5 položiek. Prvá položka bude presmerovaný na domovskú stránku. Druhý bod - "O nás". Tretia - "Naše ceny". Po štvrté - "Je to sranda." Za piate - "Napíšte nám".

HTML kód vyzerá takto:

Kto nepozná: ul štítok sa používa pre guľky, jej prvky začínajú li. Li značky zdedí štýly, ktoré sú aplikované na ul.

Ul - blok element zoznamu, bude sa pretiahne na šírku. Li je tiež blok.

Takže vytvoriť index.html. Zhromažďujeme náš kód. V tomto okamihu sa zobrazia vertikálne prehliadač, skôr ako horizontálne menu. Ale my s vami cieľ - aby sa horizontálne menu pre web. K tomu potrebujeme CSS.

Čo je to CSS?

Ak máte ešte zvládnuť vývoj webov, je potrebné sa zoznámiť s konceptom kaskádových štýlov. V skutočnosti sa jedná o pravidlá pre formátovanie, spracovanie, ktoré sa vzťahujú na rôzne prvky na stránkach web-stránok. Ak budeme popisovať vlastnosti prvkov v štandardnom formáte HTML, budete musieť tento postup niekoľkokrát opakovať, dostanete duplicite rovnaké kúsky kódu. stránky doba načítania na počítači užívateľa porastie. Aby sa tomu zabránilo, je CSS. Postačí popísať len raz určitý prvok, a potom jednoducho ukazujú, kde sa používajú vlastnosti určitého štýlu. Je možné, aby sa opis nielen textu samotnej stránky, ale aj v inom súbore. To umožní použiť opis rôznych štýlov na všetkých stránkach webu. Je tiež vhodné upraviť niektoré stránky, úprave CSS-súbor. Štýly vám umožní pracovať s fonty na lepšej úrovni, než je HTML, pomáha, aby sa zabránilo zhoršeniu grafickej stránky na webe.

Používanie štýlov pre rozvoj ponuky

CSS kódu pre ponuky:

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

Teraz sa pozrime na výslednej horizontálne ponuky CSS.

# My_1menu - tak tam je štýl úloha pre UL prvok s id = my_1menu, list-style: none - tento príkaz, aby sa odstránili stopy zanechané naplánované položky.

šírka: 800px - šírka jedálneho lístka je 800 pixelov.

padding: 0 - toto odstráni vypchávku vnútri.

margin: auto - vyravnivnie horizontálne menu v stredu našej stránke.

# My_1menu li - priradenie štýlov Li-prvkov.

výška: 55 x - výška ponuky.

# My_1menu a: hover - priradenie štýly na prvok, a, ak je indukovaná myšou.

Nebudeme popisovať podrobne každý riadok, pretože každý vývojár môže určiť jej parametre tu. Tento základ pre používanie štýlov v ponuke na internetových stránkach. Môžete dať mu väčšiu hotový a krásny vzhľad pomocou obrázkov. Priradiť prvok, ale je napríklad pozadie: url (img1.png) repeat-x. Budiž background: url (img2.png) repeat-x pre: visenie.

Použite svoju fantáziu, tvorivé preferencie. Potom na základe tejto vedomosti o tom, ako vytvoriť jednoduché menu na webových stránkach, môžete vytvoriť stránku s vlastným jedinečným dizajnom.