Napravite vodoravnom izborniku za sebe mjestu

Horizontalna meni imaju gotovo bilo kojem mjestu - to je važan dio, kao što se može sa svojim izgledom i upotrebljivosti za privlačenje ili, obrnuto, otjerati posjetitelje. Naučimo kako stvoriti osnovnu vodoravnom izborniku: čine ga „kostur” u HTML, svladati osnovne vještine stvaranja. Vi naravno, možete naći spreman izbornik, ali puno ljepše naučiti kako ga izraditi sami. To je prilično zabavno.

Saznajte kako napraviti izbornik

Trudimo se da ne odstupaju od semantike, koji prianjaju na vodećim figurama izgled. Prvo morate napraviti „kostur” za našim jelovnicima u HTML-u, naučiti osnovne vještine kako bi svoje horizontalne izbornike. A onda će ukrasiti, pomoću stilova. Neka naša horizontalni izbornik sadrži 5 stavki. Prva stavka će biti preusmjeren na početnu stranicu. Druga stvar - „O nama”. Treći - „Naše nagrade”. Četvrto - „To je zabavno.” Peto - „Kontaktirajte nas”.

HTML-kod izgleda ovako:

Tko ne zna: ul oznaka koristi se za metak, njeni elementi počinju sa li. Li oznake naslijediti stilova koji se primjenjuju na Ul.

Ul - blok element liste, to će biti rastegnut na širinu. Li je blok.

Dakle, stvoriti index.html. Prikupljamo našeg koda. U ovom trenutku, preglednik prikazuje okomiti umjesto vodoravnog izbornika. No, mi s vama ciljem - napraviti horizontalni izbornik za web stranice. Za to nam je potrebna CSS.

Što je CSS?

Ako imate još svladati razvoj web stranice, potrebno je da se upoznaju s konceptom Cascading Style Sheets. U stvari, to su pravila za oblikovanje, obrada, koji se primjenjuju na različite elemente na stranicama web-stranice. Ako ćemo opisati svojstva elemenata u standardnom HTML, morat ćete ponoviti nekoliko puta, te dobiti dupliciranje istih komada koda. stranica vrijeme učitavanja na korisnikovom računalu će rasti. Da bi se to izbjeglo, tu je CSS. Dovoljno je opisati samo jednom određeni elementa, a zatim jednostavno upućuju gdje se koriste svojstva određenog stila. Moguće je da opis ne samo tekst same stranice, ali i na drugu datoteku. To će omogućiti da primijeniti opis različitih stilova na svim stranicama web-mjesta. Također je pogodan za izmjenu neke stranice, modificiranje CSS-datoteku. Stil listova vam omogućiti da rade s fontovima na boljoj razini nego u HTML, pomaže kako bi se izbjeglo pogoršanje grafičke stranice mjestu.

Korištenje Style Sheets za razvoj izbornika

CSS-broj za izbornika:

1. # My_1menu {list-style: none; padding: 6; širina: 800 piksela; margin: auto;}
2. # My_1menu li {plovak: lijevo; font: kurzivu 18 piksela Arial;}
3. # My_1menu a {color: # 756; Prikaz: blok; visina: 55px; linija visina: 55px; padding: 0px 15px 0px 15px; Pozadina: #dfc; text-decoration: none;}
4. # My_1menu a: hover {Boja: #foa; Pozadina: # 788;}

Pogledajmo sada na horizontalno CSS izbornika.

# My_1menu - tako da je stil zadatak za ulsterski element s id = my_1menu, popis-style: none - ova naredba za uklanjanje oznake koje ostavljaju rasporedu predmeta.

širina: 800 px - širina našeg izbornika je 800 piksela.

padding: 0 - to uklanja padding unutra.

margin: auto - vyravnivnie vodoravnom izborniku u središtu naše stranice.

# My_1menu li - dodjeljivanje stilova Li-elemenata.

visina: 55px - visina izbornika.

# My_1menu a: hover - dodjeljivanje stilove na elementu i kada je inducirana miša.

Nećemo detaljno opisati svaki redak, kao i svaki programer može odrediti parametre ovdje. Ova osnova za korištenje stilova u izborniku na web stranici. Možete mu dati više gotov i lijep izgled, pomoću slika. Dodjeljivanje elementa, ali, na primjer, pozadine: URL (img1.png) ponoviti-x. Neka bude pozadina: url (img2.png) ponoviti-x za: lebdjeti.

Koristite svoju maštu, kreativne sklonosti. Zatim na temelju tog znanja o tome kako stvoriti jednostavan izbornik na web stranici, možete razviti stranicu sa svojim jedinstvenim dizajnom.