RačunalaProgramiranje

Vertikalne CSS izbornika: rade sami

Neki webmasteri ne žele provesti vrijeme u razvoju od nule jednostavnih elemenata koji već postoje. Oni smatraju da nema smisla gubiti vrijeme na nešto što je dugo bio tamo. U stvari, za one koji su samo mastering HTML i CSS, važno je da se puno stvari da se dobro razumijevanje njihovog rada. Ovo se odnosi na meni. Stvoriti vertikalnu CSS izbornika. To će biti samo na osnovu HTML i CSS, bez upotrebe Javascript i jQuery. Svaki meni je lista linkova koji vode na stranice sajta.

osnovnih koraka

Za stvaranje jednostavnih vertikalnom meniju CSS, potrebno vam je sljedeće korake:

1. Prvo, utvrditi listu linkova (koristeći kod HTML), od čega će meni biti. Dajte im ime, na primjer, su kako slijedi:

  1. Home.
  2. Naša istorija.
  3. Voditi.
  4. Usluga.
  5. Kontakti.

2. Zatim Styling veze kako želite uz pomoć CSS-a.

Pišemo HTML koda, imajte na my_Vmenu.html datoteku i vidjeti kako će izgledati u browseru:

Ovo je osnova (kostur) našeg izbornika. # 1, # 2, itd treba zamijeniti po referenci. Pogledajte kako to izgleda u pretraživaču. Slika ćete ne sviđa. Sada moramo početi opisati elemente stila, kako bi se potpuno vertikalne CSS izbornika.

Opis stilova

Stvoriti my_Vmenu.css datoteka, koji je postavio sve što želite poboljšati izgled tako važan element stranice. Ovdje je kod, od kojih uvod će revitalizirati vertikalne CSS izbornika. To i pisati novu datoteku, a onda ćemo malo bolje pogledati značenje glavne linije koje su date.

DETALJAN OPIS koristi stila

Sada razmotriti detalje naše CSS vertikalni meni:

list-style-type vam omogućava da uklonite popis markera. Postavljanjem "0" na margine i padding ukloniti dodatni padding na listi. Kao što se može vidjeti iz HTML koda, naš meni je na listi, a stilovi su definirane pomoću CSS-a.

ul # my_Vmenu - ukupni stil cijele liste.

ul # my_Vmenu li je - stil veze između taga li.

ul # my_Vmenu li a: hover - opis vrste uzimajući u obzir stavke izbornika u vrijeme kada se lebdi nad ljudima.

ul # my_Vmenu li raspona - tekstualni opis (naziv izbornika).

Imajte na umu da datoteke my_Vmenu.css my_Vmenu.html i mora biti sačuvan u istom direktoriju. Međutim, oni se može nalaziti u različitim folderima, ali onda je važno da se registruje u my_Vmenu.html put datoteku my_Vmenu.css. Budite oprezni, jer su pridošlice na ovaj problem često.

Stil mora biti povezan između glave oznaka u HTML-datoteku. menu_1.png i menu_2.png - ovo je slika za tu stavku izbornika sliku u normalno stanje i lebdenja.

Bolje je spasiti slika u posebnom folderu za slike, reci my_images, ali onda Podesite CSS kod. Napišite gdje su prikazani ove slike, oni su u ovom direktoriju: url (my_images / menu_1.png) i url (my_images / menu_2.png).

U ostatku imovine opisane u CSS kod, lako shvatiti. Oni definišu izgled našeg izbornika. Lako je primjetiti da je širina i visina predmeta navedene za iste stavke u normalno stanje, a kad letite mišem preko njih. Veličina slova 18PX, padding određuje uvlačenje sa različitih strana imena mjesta. zaslon omogućuje da postavite jedinicu prikaz za podešavanje širine i padding.

Naša vertikalni meni

Kao što možete vidjeti, vertikalne CSS izbornika lako stvoriti. Na osnovu podataka znanja ćete moći da to lijep i atraktivan za posjetitelje na svoje web stranice! Koristite svoju maštu, a zatim moderan meni da upotpune svoje stranice.

Similar articles

 

 

 

 

Trending Now

 

 

 

 

Newest

Copyright © 2018 bs.atomiyme.com. Theme powered by WordPress.