Vertikalna meni CSS: to počne sami

Nekatere webmastere ne želijo preživeti nekaj časa razvija od hitrih enostavnih elementov, ki že obstajajo. Prepričani so, da nima smisla zapravljati svoj čas za nekaj, kar je že dolgo tam. Dejstvo je, za tiste, ki so samo obvladovanje HTML in CSS, je pomembno, da si veliko stvari, da imajo dobro razumevanje njihovega dela. To velja v meni. Ustvari vertikalne menijev CSS. To bo temeljilo le na HTML in CSS, brez uporabe Javascript in JQuery. Vsak meni je seznam povezav, ki vodijo na strani mesta.

osnovni koraki

Če želite ustvariti preprost navpično meni CSS, morate naslednje korake:

1. Najprej določi seznam povezav (z uporabo kode HTML), od katerih bo ta meni. Daj jim ime, na primer, so naslednji:

1. Home.
2. Naša zgodovina.
3. Vodnik.
4. Storitve.
5. Imenik.

2. Nato Styling povezav, kot si želijo s pomočjo CSS.

Mi pisati HTML kodo, da v my_Vmenu.html datoteko in videli, kako bo videti v brskalniku:

To je osnova (skeleton) iz našega jedilnika. # 1, # 2, itd bi bilo treba nadomestiti s sklicevanjem. Oglejte si, kako je videti v brskalniku. Slika ti ne bo všeč. Zdaj moramo opisati elemente sloga, da bi popolno vertikalne menijev CSS.

Opis stili

Ustvarite datoteko my_Vmenu.css, ki določajo vse, kar želite izboljšati videz tako pomemben element mestu. Tukaj je koda, izmed katerih uvedba bo oživitev vertikalne menijev CSS. To in napisati novo datoteko, in potem bomo pobliže pomen glavnih progah, ki so podane.

PODROBEN OPIS uporabljajo slogovno

Sedaj menijo podrobnosti našega CSS navpičnem meniju:

seznam-style-type vam omogoča, da odstranite seznama označevalcev. Z določitvijo "0" na robu in oblazinjenja odstranite dodatno oblazinjenje na seznamu. Kot je razvidno iz kode HTML, naša meni je seznam, in stilov so opredeljeni z uporabo CSS.

ul # my_Vmenu - skupni slog celotnega seznama.

ul # my_Vmenu li a - slog povezave med oznako li.

ul # my_Vmenu li A: lebdenje - opis vrste obravnavane elemente menija v času, ko je eden lebdi nad ljudmi.

ul # my_Vmenu li kalibrirnega - opis besedilo (naslov meni).

Ne pozabite, da datoteke my_Vmenu.css my_Vmenu.html in mora biti ohranjena v istem imeniku. Vendar pa se lahko nahajajo v različnih mapah, vendar pa je pomembno, da se registrirajo v my_Vmenu.html datoteke poti k my_Vmenu.css. Bodite previdni, saj so novinci na ta problem pogosto.

Slog mora biti povezana med glavo oznake v html-datoteke. menu_1.png in menu_2.png - to je slika za postavko slika menija v normalnem stanju in lebdenja.

Bolje je, da shranite slike v posebno mapo za slike, ime pa my_images, potem pa nastavite kodo CSS. Napišite, kjer so prikazane te slike, so v tem imeniku: url (my_images / menu_1.png) in url (my_images / menu_2.png).

V ostalih lastnosti, opisanih v kodo CSS, za lažje razumevanje. Opredeljujejo videz našega jedilnika. To je enostavno opaziti, da je širina in višina postavk določen za iste postavke v normalnem stanju, ko si z miško nad njimi. Velikost pisave 18px, oblazinjenje določa zamik iz različnih straneh krajevnih imen. Zaslon lahko nastavite zaslonsko enoto za nastavitev širine in oblazinjenje.

Naša vertikalni meni

Kot lahko vidite, navpične CSS meniji preprosto ustvarjanje. Na podlagi podatkov, znanja, boste lahko, da je lepa in privlačna za obiskovalce na vašo spletno stran! Uporabite svojo domišljijo, nato pa elegantno meni za dopolnitev vaše spletne strani.