Fè yon meni orizontal pou sit nan tèt ou

meni orizontal gen prèske nenpòt sit - li se yon pati enpòtan, kòm li kapab ak aparans li yo ak Itilite atire oswa, Kontrèman, fawouche vizitè yo. Se pou yo aprann ki jan yo kreye yon meni primè orizontal: fè li "kilè eskèlèt" nan HTML, bay mèt ladrès debaz yo pou kreye. Ou ka sètènman jwenn yon meni pare, men anpil joli pou aprann kijan pou devlope li tèt ou. Li trè plezi.

Aprann fè meni

Nou eseye pa patikilye devye nan Semantics yo, ki konfòme yo ak figi yo ki mennen nan Layout la. Premye ou gen fè yon "skelèt" pou meni nou yo HTML, aprann ladrès debaz yo fè pwòp meni orizontal yo. Lè sa a, li pral dekore, lè l sèvi avèk fèy papye style. Se pou meni orizontal nou an gen 5 atik yo. pral atik la premye pral reyorante resous nan paj dakèy la. Pwen nan dezyèm - "Sou nou". Twazyèm lan - "prim nou an". Katriyèm - "Li amizan." Senkyèm - "kontakte nou".

HTML-Kòd sanble sa a:

Ki moun ki pa konnen: se UL tag itilize pou bal la , eleman li yo kòmanse avèk yo Li a. Li Tags eritye Styles yo ke yo aplike nan UL la.

UL - blòk eleman nan lis la, li pral lonje nan lajè a. Li se tou yon blòk.

Se konsa, kreye yon index.html. Nou kolekte Kòd nou an. Nan pwen sa a, navigatè a montre yon vètikal olye ke yon meni orizontal. Men, nou avè ou objektif - fè yon meni orizontal pou sit la. Pou sa nou bezwen CSS.

Ki sa ki se CSS?

Si ou gen ankò yo metrize devlopman an nan sit, li nesesè jwenn konnen ak konsèp nan Dra Mélanger Style. An reyalite, sa yo, se règleman pou swiv pou fòma, pwosesis, ki fè yo aplike nan eleman diferan nan paj sa yo nan yon sit entènèt-sit. Si nou dekri pwopriyete yo nan eleman yo nan estanda HTML, w ap gen nan repete sa a plizyè fwa, ou jwenn yon repetisyon nan moso yo menm nan kòd. tan chaj paj sou òdinatè itilizatè a ap grandi. Pou evite sa a, gen yon CSS. Li sifizan a dekri yon sèl fwa yon eleman sèten, ak Lè sa a tou senpleman endike kote yo sèvi ak pwopriyete yo nan yon stil an patikilye. Li se posib fè deskripsyon an nan pa sèlman tèks la nan paj la tèt li, men tou, nan yon lòt dosye-a. Sa a pral pèmèt pou aplike pou deskripsyon an nan estil yo diferan sou tout paj nan sit la. Li se tou pratik li modifye kèk paj, modifye CSS-dosye a. fèy papye Style pèmèt ou travay avèk polis sou yon nivo pi bon pase HTML a, ede pou fè pou evite vin pi grav grafik paj sa yo nan sit la.

Lè l sèvi avèk Dra Style pou devlopman meni

CSS-kòd pou meni an:

1. # My_1menu {lis-style: Pa gen yonn; padding: 6; lajè: 800px; Marge: oto;}
2. # My_1menu Li {flote: kite; font: italik 18px aryal;}
3. # My_1menu yon {koulè: # 756; ekspozisyon: blòk; wotè: 55px; liy-wotè: 55px; padding: 0px 15px 0px 15px; jan nou koumanse #dfc; tèks-decoration: Pa gen yonn;}
4. # My_1menu yon: hover {koulè: #foa; jan nou koumanse: # 788;}

Koulye a, kite pou yo gade nan ki kapab lakòz meni an CSS orizontal.

# My_1menu - se konsa gen plasman style pou UL- eleman ak didantite = my_1menu, lis-style: Pa gen yonn - kòmandman sa a yo retire mak yo kite nan atik yo pwograme yo.

lajè: 800px - lajè a nan meni nou an, se 800 piksèl.

padding: 0 - sa a retire kouvèti a andedan.

Marge: oto - vyravnivnie meni orizontal nan sant la nan paj nou an.

# My_1menu Li - plase estil li-eleman.

wotè: 55px - wotè meni.

# My_1menu yon: hover - plase estil nan eleman ak ki lè li se induit sourit.

Nou pa pral dekri an detay chak liy, kòm chak pwomotè ka presize paramèt li yo isit la. Sa a baz pou yo sèvi ak Styles nan meni an sou sit entènèt la. Ou ka bay li yon aparans plis fini ak bèl, lè l sèvi avèk foto yo. Bay eleman men, pou egzanp, jan nou koumanse url (img1.png) repete-x. Se pou gen jan nou koumanse url (img2.png) repete-x pou yon: hover.

Sèvi ak imajinasyon ou, preferans kreyatif. Lè sa a, ki baze sou ki konesans sou ki jan yo kreye yon meni ki senp sou sit entènèt la, ou ka devlope yon paj ak desen pwòp li yo inik.