Napravite horizontalnom meniju za lokaciju sebe

Horizontalnom meniju imaju gotovo bilo koje lokacije - to je važan dio, jer se može sa svojim izgledom i upotrebljivost za privlačenje ili, obrnuto, uplašimo posjetitelja. Naučimo kako stvoriti osnovne horizontalnom meniju: čine "kostur" u HTML, da savladaju osnovne vještine stvaranja. Svakako možete naći spreman meni, ali mnogo ljepše da nauče kako da sami razvijaju. To je prilično zabavno.

Naučite da se izbornik

Trudimo se da ne odstupaju od semantike, koji se pridržavaju vodeće ličnosti rasporeda. Prvo morate napraviti "kostur" za naše menije u HTML, naučiti osnovne vještine da naprave svoj horizontalni menije. A onda će ukrasiti, koristeći stil listova. Neka naš horizontalnom meniju sadrži 5 komada. Prvi artikl će biti preusmjereni na početnu stranicu. Druga stvar - "O nama". Treći - "Naše nagrade". Četvrta - "To je zabavno." Peti - "Kontaktirajte nas".

HTML-kod izgleda ovako:

Ko ne zna: ul oznaka se koristi za metak, njegovih elemenata početi sa li. Li tagovi nasljeđuju stilove koji se primjenjuju na ul.

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

Dakle, stvoriti index.html. Prikupljamo naš kod. U ovom trenutku, pretraživač prikazuje vertikalnu nego horizontalnom meniju. Ali mi smo s vama cilj - napraviti horizontalnom meniju za lokaciju. Za to nam je potrebna CSS.

Što je CSS?

Ako imate još savladati razvoj nalazišta, neophodno je da se upoznaju sa konceptom CSS. U stvari, to su pravila za oblikovanje, obradu, koji se primjenjuju na različite elemente na stranicama web-stranice. Ako se opisuju svojstva elemenata u standardnim HTML, morat ćete ponoviti nekoliko puta, dobijate dupliranje istih komada koda. strana put opterećenje na računalu korisnika će rasti. Da bi izbjegli ovo, tu je CSS. Dovoljno je opisati samo jednom određeni element, a zatim jednostavno pokazuju gdje koristiti svojstva određenog stila. Moguće je da se opis ne samo tekst same stranice, ali iu drugu datoteku. To će omogućiti da se prijave na opis različitih stilova na svim stranicama sajta. Također je pogodan modificirati neke stranice, modifikaciju CSS-datoteku. Stil listova vam omogućiti da rade sa fontovima na boljem nivou nego HTML, pomaže da se izbjegli pogoršanje grafičkim stranama sajta.

Upotreba stilova za razvoj izbornika

CSS-kod za izbornika:

1. # My_1menu {list-style: none; padding: 6; Širina: 800px; margin: auto;}
2. # My_1menu li {float: left; font: italic 18PX Arial;}
3. # My_1menu a {color: # 756; display: block; visina: 55px; line-height: 55px; padding: 0px 15px 0px 15px; pozadine: #dfc; text-decoration: none;}
4. # My_1menu a: hover {color: #foa; background: # 788;}

Sada pogledajmo rezultirajući horizontalnim CSS izbornika.

# My_1menu - tako da je stil zadatak za UL element s id = my_1menu, list-style: none - ovu naredbu da biste uklonili tragovi koje je zakazano stavke.

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

padding: 0 - to uklanja padding unutra.

margin: auto - vyravnivnie horizontalnom meniju u središtu naše stranice.

# My_1menu li - dodjeljivanje stilova Li-elemenata.

visina: 55px - visina izbornika.

# My_1menu a: hover - dodjeljivanje stilova elementa i kada je inducirana miša.

Nećemo detaljno opisati svaku liniju, kao i svaki programer može odrediti parametre ovdje. Ova osnova za korištenje stilova u izborniku na web stranici. Možete ga dati više gotovih i lijep izgled, koristeći slike. Dodijeliti element, ali, na primjer, u pozadini: url (img1.png) ponoviti-x. Neka bude background: url (img2.png) ponoviti-x za: hover.

Koristite svoju maštu, kreativne preferencije. Onda na osnovu tog znanja o tome kako stvoriti jednostavan meni na sajtu, možete razviti stranicu sa svojim jedinstvenim dizajnom.