Egin gunean zeuk menu horizontal bat

menu horizontala ia edozein gune izan - zati garrantzitsua da, ezin bere itxura eta erabilgarritasuna erakartzeko edo, alderantziz, uxatzen urruntzen bisitariak bezala. Ikasteko menu horizontal oinarrizko bat nola sortu: horregatik da "hezurdura" HTMLra, sortzeko oinarrizko trebetasunak menderatzea. zalantzarik gabe prest menu bat aurkituko duzu, baina nola garatzeko yourself askoz nicer ikasteko. Nahiko dibertigarria da.

Ikas menu egiteko

Ez semantika, zein Diseinuaren pertsona ospetsuak atxikitzen desbideratu saiatzen gara. Lehenengoa "hezurdura" Gure menuak HTMLra egiteko, oinarrizko trebetasunak ikasteko beraien menuak horizontal propioa egin behar duzu. Eta gero apaindu egingo da, estilo-orriak erabiliz. Dezagun gure menu horizontal 5 elementu ditu. Lehenengo elementua egon orri nagusira bideratuko da. Bigarren puntua - "Gu". Hirugarren - "Gure sari". Laugarren - "fun da." Bosgarren - "Jarri gurekin".

HTML kode itxura hau du:

Nork ez daki: ul etiketa erabiltzen da bala, bere elementu li batera hasiko da. Li etiketa oinordetzan direla ul aplikatutako estiloak.

Ul - bloke zerrendako elementu, zabalera bidaliko da luzatu egingo da. Li da ere bloke bat.

Beraz, index.html bat sortzeko. gure kodea biltzen dugu. Une honetan, nabigatzaileak bertikal bat bistaratzen baizik menu horizontal bat baino. Baina zuk helburua dugu - gunearen menu horizontal bat egin. Horretarako CSS behar dugu.

Zer da CSS?

Oraindik bada guneen garapen menderatzea, beharrezkoa den estilo-orri kontzeptua ezagutu ahal izango da. Izan ere, horiek formatu prozesatzeko arauak dira, web-gune baten orrietan elementu ezberdinak aplikatuko dira. HTML estandarra elementuen ezaugarriak deskribatzen badugu, hainbat aldiz errepikatu behar kode zati berdinak bikoizketa bat lortuko duzu izango duzu. orriak kargatzeko denbora erabiltzailearen ordenagailuan hazten da. Hori gerta ez dadin, ez dago CSS bat da. elementu jakin bat behin bakarrik deskribatzeko Nahikoa da, eta, ondoren, besterik gabe, adierazi non estilo jakin baten ezaugarriak erabiltzeko. Posible da orria bera testua ez ezik, baina baita beste fitxategi batean deskribapena egiteko. Hau guneko orri guztietan hainbat estilo deskribapena aplikatzeko aukera emango du. halaber, komenigarria da zenbait orri aldatzeko, CSS-fitxategia aldatzea. Estilo-orriak aukera ematen tipoak batekin lan HTML baino maila hobea batean, grafikoak gunearen orrietan larriagoa saihesteko laguntzen dizute.

Estilo-orriak erabiliz menu garapenerako

CSS-kodea menu eta:

1. # My_1menu {list-style: none; padding: 6; zabalera: 800px; marjina: auto;}
2. # My_1menu li {float: ezkerrera font: italic 18px Arial;}
3. # My_1menu a {color: # 756; display: block; altuera: 55px; line-height: 55px; padding: 0px 15px 0px 15px; hondo: #dfc; Testu-decoration: none;}
4. # My_1menu a: hover {color: #foa; hondo: # 788;}

Orain dezagun, ondorioz horizontal CSS menu berean.

- komando hau utzi programatuta elementuak dituen ikurrak kentzeko ere ez: - # My_1menu beraz, ez Ulia id = my_1menu, zerrenda estiloko elementu esleitzeko estiloa da.

zabalera: 800px - gure menu zabalera 800 pixel da.

padding: 0 - honek padding kentzen barruan.

marjina: auto - vyravnivnie menu horizontal gure orriaren erdian.

# My_1menu li - estilo li-elementu esleitzea.

altuera: 55px - menu altuera.

# My_1menu a: hover - elementu estilo esleitzea eta saguaren denean eragindako da.

Ez dugu zehatz-mehatz deskribatzeko lerro bakoitzean, sustatzailearen bakoitzak bere parametroak hemen jar daiteke eta. Estilo erabilera menuan, web gunean oinarri hau. Eman dezakezu itxura gehiago amaitu eta eder bat, argazkiak erabiliz. Esleitu elementu baina, adibidez, atzerako: url (img1.png) errepikatzeko-x. Hágase hondo: url (img2.png) errepikatzeko-x for a: pasatzean.

Erabili zure irudimena, sormen lehentasunak. Ondoren oinarritutako webgunearen bidez menu sinple bat nola sortu ezagutza hori, bere diseinu berezia duen orrialde bat garatu ahal izango duzu.