Agħmel menu orizzontali għas-sit innifsek

menu orizzontali kważi kull sit - huwa parti importanti, minħabba li tista 'ma' dehra tagħha u l-użabilità biex jattiraw jew, bil-maqlub, biża bogħod viżitaturi. Ejja jitgħallmu kif toħloq menu orizzontali elementari: tagħmel dan "iskeletru" biex HTML, sabiex jakkwistaw ħiliet bażiċi tal-ħolqien. Inti tista 'ċertament ssib menu lesta, iżda ħafna nicer biex jitgħallmu kif jiżviluppaw it yourself. Huwa pjuttost gost.

Jitgħallmu jagħmlu menu

Nippruvaw ma jitbiegħdux mill-semantika, li jaderixxu mal-figuri ewlenin tal-format. L-ewwel għandek tagħmel "iskeletru" għall-menus tagħna lejn HTML, jitgħallmu ħiliet bażiċi biex jagħmlu menus orizzontali tagħhom stess. U allura se dekorazzjoni, bl-użu folji stil. Ħalli menu orizzontali tagħna fiha 5 punti. L-ewwel partita se jiġu dirottati lejn il-homepage. It-tieni punt - "Dwarna". It-tielet - "premjijiet Tagħna". Ir-Raba - "Huwa gost." Ħames - "Ikkuntattjana".

HTML kodiċi tidher bħal dan:

Min ma jafx: tikketta ul tintuża għall- bullet, elementi tagħha tibda bil-li. tags Li jirtu l-istili li huma applikati għall-ul.

Ul - Element blokk tal-lista, se tiġi mġebbda għall-wisa '. Li hija wkoll parti importanti.

Allura, joħolqu index.html. Niġbru kodiċi tagħna. Wara dan, il-browser displays vertikali minflok menu orizzontali. Iżda aħna miegħek għan - li tagħmel menu orizzontali għas-sit. Għal dan għandna bżonn CSS.

X'inhu CSS?

Jekk għadek trid kaptan l-iżvilupp ta 'siti, jeħtieġ li jiffamiljarizzaw mal-kunċett ta Cascading Style Sheets. Fil-fatt, dawn huma r-regoli għall-ifformattjar, l-ipproċessar, li huma applikati għall-elementi differenti fuq il-paġni ta 'web-site. Jekk aħna jiddeskrivu l-proprjetajiet ta 'l-elementi fil HTML standard, inti ser ikollok tirrepeti dan diversi drabi, ikollok duplikazzjoni ta' l-istess biċċiet ta 'kodiċi. tagħbija ħin paġna fuq il-kompjuter l-utent se jikbru. Sabiex jiġi evitat dan, hemm CSS. Huwa biżżejjed li jiddeskrivi darba biss element ċerti, u mbagħad sempliċement tindika fejn tuża l-proprjetajiet ta 'stil partikolari. Huwa possibbli li tagħmel id-deskrizzjoni ta 'mhux biss it-test tal-paġna innifsu, iżda wkoll fil-fajl ieħor. Dan se jippermetti li japplikaw id-deskrizzjoni ta 'l-istili differenti fuq il-paġni kollha tas-sit. Huwa wkoll konvenjenti li jimmodifika xi paġni, li jimmodifika l-CSS fajl. folji stil jippermettu li taħdem ma fonts fuq livell aħjar mill-HTML, li jgħinu biex jevitaw deterjorament-paġni grafika tas-sit.

Bl-użu Style Sheets għall-iżvilupp menu

CSS-kodiċi għall-menu:

1. # My_1menu {lista stil: xejn; ikkuttunar: 6; wisa ': 800px; marġini: auto;}
2. # My_1menu LI {float: xellug; font: Arial 18px korsiv;}
3. # My_1menu ta '{kulur: # 756; wiri: blokk; għoli: 55px; linja tal-għoli: 55px; ikkuttunar: 0px 15px 0px 15px; isfond: #dfc; test tiżjin: xejn;}
4. # My_1menu a: imbagħad jerġgħu {kulur: #foa; isfond: # 788;}

Issa ejja nħarsu lejn il-menu CSS orizzontali li jirriżulta.

# My_1menu - sabiex ikun hemm assenjazzjoni stil għall-element UL- ma id = my_1menu, lista stil: xejn - dan il-kmand biex tneħħi l-marki li tħallew mill-oġġetti skedati.

wisa ': 800px - il-wisa' menu tagħna hija ta '800 pixels.

ikkuttunar: 0 - dan ineħħi l-ikkuttunar ġewwa.

marġini: awto - vyravnivnie menu orizzontali fiċ-ċentru tal-paġna tagħna.

# My_1menu LI - assenjazzjoni stili LI-elementi.

għoli: 55px - għoli menu.

# My_1menu ta ': imbagħad jerġgħu - assenjazzjoni stili għall-element u maws meta hija indotta.

Aħna mhux se tiddeskrivi fid-dettall f'kull linja, kif kull iżviluppatur tista 'tispeċifika parametri tagħha hawn. Din il-bażi għall-użu ta 'stili fil-menu fuq il-websajt. Tista 'tagħtihiex dehra aktar lest u sbieħ, bl-użu stampi. Jassenja element iżda, per eżempju, l-isfond: url (img1.png) jirrepetu x. Ħalli jkun hemm sfond: url (img2.png)-rrepeti x għal: imbagħad jerġgħu.

Użu immaġinazzjoni, il-preferenzi kreattivi tiegħek. Imbagħad bbażata fuq l-għarfien dwar kif tinħoloq menu sempliċi fuq il-websajt, inti tista 'tiżviluppa paġna mad-disinn uniku tagħha stess.