Kufanya orodha ya usawa kwa ajili ya tovuti yako mwenyewe

orodha ya usawa na karibu tovuti yoyote - ni sehemu muhimu, kama unaweza na muonekano wake na matumizi ya kuvutia au, kinyume chake, kuwafukuza wageni. Hebu tujifunze jinsi ya kujenga msingi menu usawa: kufanya hivyo "mifupa" ya HTML, kupata stadi za msingi wa kuunda. Unaweza shaka kupata orodha tayari, lakini kiasi nicer kujifunza jinsi ya kuendeleza mwenyewe. Ni pretty furaha.

Jifunze kufanya menu

Tunajaribu si kinyume na semantiki, ambayo kuambatana na takwimu uongozi wa mpangilio. Kwanza una kufanya "mifupa" kwa ajili ya menus yetu ya HTML, kujifunza ujuzi wa kawaida wa kufanya menus yao wenyewe mlalo. Na basi itakuwa kupamba, kwa kutumia karatasi style. Hebu orodha yetu ya usawa ina 5 vitu. kipengee cha kwanza itaelekezwa kwenye ukurasa wa mwanzo. Jambo la pili - "Kuhusu sisi". tatu - "tuzo yetu". Nne - "Ni furaha." Tano - "Wasiliana nasi".

HTML-code inaonekana kama hii:

Nani asiyejua: ul tag hutumiwa risasi, mambo yake kuanza na li. Li vitambulisho kurithi mitindo kwamba ni kutumika kwa ul.

Ul - block kipengele cha orodha, itakuwa aliweka kwa upana. Li pia kuzuia.

Hivyo, kujenga index.html. Tunakusanya code yetu. Katika hatua hii, browser maonyesho wima badala ya orodha ya usawa. Lakini na wewe Lengo - kufanya orodha ya usawa kwa ajili ya tovuti. Kwa hili tunahitaji CSS.

CSS ni nini?

Kama bado bwana maendeleo ya maeneo ya, ni muhimu kwa kupata khabari na dhana ya kuachia Style Sheets. Kwa kweli, haya ni sheria kwa ajili ya uundaji, usindikaji, ambayo ni kutumika kwa mambo mbalimbali katika ukurasa wa mtandao. Kama sisi kuelezea mali ya vipengele katika kiwango HTML, utakuwa na kurudia mara kadhaa, unaweza kupata marudio ya vipande sawa ya code. wa kupakia wakati kwenye kompyuta ya mtumiaji kukua. Ili kuepuka hili, kuna CSS. Yafaa kuelezea mara moja tu kipengele fulani, na kisha tu zinaonyesha ambapo kutumia mali ya style fulani. Inawezekana kufanya maelezo ya si tu maandishi ya ukurasa yenyewe, lakini pia katika faili nyingine. Hii itaruhusu kuomba maelezo ya mitindo mbalimbali ya kurasa zote za tovuti. Pia ni rahisi kurekebisha baadhi ya kurasa, kubadilisha CSS-file. Style karatasi itawawezesha kufanya kazi na fonts katika ngazi bora kuliko HTML, kusaidia kuepuka mbaya kurasa graphics ya tovuti.

Kwa kutumia Style Sheets kwa orodha ya maendeleo

CSS-code kwa orodha:

1. # My_1menu {orodha-style: hakuna; padding: 6; upana: 800px; margin: auto;}
2. # My_1menu li {kuelea: kushoto, font: italiki 18px Arial;}
3. # My_1menu {color: # 756; kuonyesha: block; urefu: 55px; urefu wa mstari: 55px; padding: 0px 15px 0px 15px; background: #dfc; text-mapambo: hakuna;}
4. # My_1menu a: hover {color: #foa; background: # 788;}

Sasa hebu angalia kusababisha usawa CSS menu.

# My_1menu - hivyo kuna style zoezi la ul kipengele na id = my_1menu, orodha-style: hakuna - Amri hii ya kuondoa alama kushoto na vitu imepangwa.

upana: 800px - upana wa orodha yetu ni 800 saizi.

padding: 0 - hii kuondosha padding ndani.

margin: auto - vyravnivnie menu usawa katika kituo cha ukurasa wetu.

# My_1menu li - kumshirikisha mitindo li-vipengele.

urefu: 55px - menu urefu.

# My_1menu: hover - kumshirikisha mitindo kwa kipengele na wakati inasababishwa mouse.

Sisi si kuelezea kwa undani kila mstari, kama kila developer Unaweza kutaja vigezo wake hapa. Hii msingi wa matumizi ya mitindo katika orodha kwenye tovuti. Unaweza kutoa zaidi ya kumaliza na kuonekana nzuri, kwa kutumia picha. Hawawajui kipengele lakini, kwa mfano, background: url (img1.png) kurudia-x. Na iwe background: url (img2.png) kurudia-x ya: hover.

Kutumia mawazo yako, mapendekezo ya ubunifu. Kisha kulingana na maarifa kuhusu jinsi ya kuandaa orodha rahisi kwenye tovuti, unaweza kuendeleza ukurasa na kwa mpango wake wa kipekee.