Vertikalni CSS izbornika: to rade sami

Neki webmasteri ne žele provesti vrijeme u razvoju od nule jednostavnih elemenata koji već postoje. Oni vjeruju da nema smisla gubit svoje vrijeme na nešto što već dugo postoji. Naime, za one koji su samo mastering HTML i CSS, važno je da se puno stvari koje treba imati dobro razumijevanje njihovog rada. To se odnosi na izbornik. Stvaranje vertikalne CSS izbornika. To će se temeljiti samo na HTML i CSS, bez uporabe JavaScript i jQuery. Svaki izbornik je popis linkova koji vode na stranice web-mjesta.

osnovni koraci

Kako stvoriti jednostavan vertikalni izbornik CSS, trebate sljedeće korake:

1. Prvo, utvrditi popis linkova (pomoću koda HTML), od kojih je meni će biti. Dajte im ime, na primjer, su kako slijedi:

1. Početna.
2. Naša povijest.
3. Vodič.
4. Usluge.
5. Kontakti.

2. Zatim Styling veze kao što želite uz pomoć CSS-a.

Mi pisati HTML kod, imajte na my_Vmenu.html datoteke i vidjeti kako će izgledati u pregledniku:

To je temelj (kostur) našeg izbornika. # 1, # 2 i sl treba zamijeniti uporabu. Pogledajte kako to izgleda u pregledniku. Slika ti se neće svidjeti. Sada moramo opisati elemente stila, da bi kompletan vertikalne CSS izbornika.

Opis stilovi

Stvaranje datoteke my_Vmenu.css, koji je postavio sve što želite poboljšati izgled tako važan element stranice. Ovdje je kod, od kojih je uvođenje će revitalizirati vertikalne CSS izbornika. To i pisati novu datoteku, a onda ćemo uzeti bliži pogled značenje glavnih linija koje su dane.

Detaljan opis upotrebljava stilova

Sada razmislite detalje našeg CSS vertikalne izbornika:

popis-style-type omogućuje uklanjanje popis oznaka. Postavljanjem „0” na marginu i padding maknuti dodatni padding na popisu. Kao što se može vidjeti iz HTML koda, naš izbornik je popis, a stilovi definirani pomoću CSS.

ul # my_Vmenu - ukupni stil čitavog popisa.

ul # my_Vmenu li a - stil veze između oznaka li.

ul # my_Vmenu li a: hover - opis tipa koji se razmatra stavki izbornika u trenutku kada je jedan lebdi nad ljudima.

ul # my_Vmenu li jedan pedalj - tekstualni opis (izbornik naslova).

Zapamtite da podnese my_Vmenu.css my_Vmenu.html i moraju biti sačuvani u istom direktoriju. Međutim, oni se mogu nalaziti u različitim mapama, ali onda je važno da se registriraju u my_Vmenu.html datoteke putu do my_Vmenu.css. Budite oprezni, jer su pridošlice ovaj problem često.

Stil mora biti priključen između glavnih oznaka u HTML datoteku. menu_1.png i menu_2.png - to je slika za stavku izbornika sliku u normalno stanje i lebdjeti.

Bolje je spremiti slike u zasebne mape za slike, ime je my_images, ali onda Podesite CSS kod. Napišite u kojem su prikazane ove slike, oni su u ovom direktoriju: url (my_images / menu_1.png) i URL (my_images / menu_2.png).

U ostatku svojstava opisanih u CSS koda, lako razumjeti. Oni definiraju izgled našeg izbornika. Lako je uočiti da je širina i visina predmeta navedeno za iste stavke u normalnom stanju, a kada prelazite mišem preko njih. Veličina slova 18 piksela, padding navodi uvlačenje iz različitih strana imena mjesta. Zaslon vam omogućuje da postavite jedinicu zaslona za podešavanje širine i padding.

Naš vertikalni izbornik

Kao što možete vidjeti, vertikalne CSS izbornika za stvaranje lako. Na temelju podataka iz znanja da ćete biti u mogućnosti kako bi se lijep i atraktivan za posjetitelje na Vaše web stranice! Upotrijebite svoju maštu, a zatim elegantan izbornik nadopuniti svoje stranice.