Chitsogozo cha sitepe ndi ndondomeko
Kaya malo anu oyendetsa maulendo ndi mzere wosasuntha pamwamba kapena pamzere wozungulira kumbali, ndidakali mndandanda. Polemba webusaiti, nthawi zambiri zimakhala zosavuta kuiwala kuti masewera oyendetsa maulendo ndi gulu lolemekezeka la maulumikizi. Koma ngati mukukonzekera kuyenda kwanu pogwiritsira ntchito XHTML + CSS, mukhoza kupanga masewera omwe sangakwanitse kuwatsata (XHTML) ndi osavuta kusintha (CSS).
Kuyambapo
Kuti muyambe kukonza mndandanda wa ulendo, muyenera kugwiritsa ntchito mndandanda.
Zitha kukhala mndandanda wosasinthika womwe umadziwika ngati woyendetsa:
Ngati muyang'anitsitsa pa HTML, mudzazindikira kuti chiyanjano cha "Home" chilinso ndi chidziwitso cha palibe. Izi zidzakulolani kuti mupange menyu omwe amadziwika malo omwe alipo owerenga anu. Ngakhale simukukonzekera kuti mukhale ndi maonekedwe anu pa webusaiti yanu pakalipano, mukhoza kuphatikizapo chidziwitso. Ngati mwasankha kuwonjezera chidziwitso mtsogolomu, mudzakhala ndi coding pang'ono kuti musakonze malo anu.
Popanda kayendedwe ka CSS , mndandanda wa XHTML ukuwoneka ngati mndandanda wosasinthika. Pali zipolopolo ndi mndandanda wa zinthu zomwe zimaperekedwa pang'ono. Chifukwa chakuti ndikugwiritsa ntchito maulumikizi a malo , osatsegula ambiri sangawonetse maulumikilo ngati akuwongolera (akulongosoledwa ndi akuda). Ngati mumagwiritsa ntchito HTML pamwambapa pa tsamba la webusaiti, kuyenda kwanu kudzawoneka ngati:
- Kunyumba
- Zamakono
- Mapulogalamu
- Lumikizanani nafe
Izi ndi zokongola kwambiri ndipo sizikuwoneka ngati menyu. Koma ndi masewera ochepa chabe a CSS omwe adawonjezeredwa pandandanda, mukhoza kupanga mndandanda womwe umakuchititsani kunyada.
Menyu Yoyendayenda Yowonekera
Mawindo oyendetsa oyendayenda ndi osavuta kulemba chifukwa amawonetsera chimodzimodzi monga mndandanda wabwino: mmwamba ndi pansi.
Mndandanda wa zinthu zikuwonetsera pansi pa tsamba.
Pamene ndikulemba menyu, ndimakonda kuyamba kunja ndikugwira ntchito. Mwa ichi, ndikutanthawuza kuti ndikuyamba kuyang'ana ul # ndikusunthira ku li li ndiyeno kulumikizana, ndi zina. Kotero pa menyu iyi, Choyamba mumatanthauzira kuchuluka kwa menyu. Izi zidzatsimikizira kuti ngakhale zinthu zakuthambo zatalika, sizidzasunthira mbali yonseyo kapena kupangitsa kupukusa kosakanikirana.
ul # navigation {width: 12em; }}
Kamodzi ndikakhala ndi m'lifupi, ndimatha kusewera ndi zinthu zandandanda. Izi zimandithandiza kuti ndiziyika zinthu monga (kuchotsa zipolopolo), mitundu ya m'mbuyo, malire, malemba, ndi mazenera.
ul # navigation li {
mndandanda wamndandanda: palibe;
mzere wa kumbuyo: # 039;
malire-pamwamba: olimba 1px # 039;
kulumikiza malemba: kumanzere;
malire: 0;
}}
Mukangoyamba maziko a zinthu zomwe mungathe kuyamba kusewera ndi momwe mndandanda umayendera pa malo olankhulira. Ndondomeko yoyamba UL # navigation LI A ndi A: link, A: yasankhidwa, A: hover, ndi A: yogwira (ngati mukufuna). Kwa maulumikizi, ndimakonda kupanga zogwirizanitsa ndi chinthu chofunikira (m'malo momangika mzere). Izi zimawathandiza kuti atenge malo onse a LI -ndipo amachita zambiri ngati ndime, zomwe zimapangitsa kuti zikhale zosavuta kuzilemba monga masakiti a menyu.Cinthu china chimene ndimachita nthawi zonse ndichochotsa pansi pamunsi (kulembedwa pamanja: palibe;), pamene izi zimapangitsa mabataniwo kuwoneka ngati mabatani kwa ine.
Koma ndithudi, mapangidwe anu akhoza kukhala osiyana.
ul # navigation li {
onetsani;
kukongoletsa malemba: palibe;
padding: .25em;
malire-pansi: olimba 1px # 39f;
Malire-kumanja: olimba 1px # 39f;
}}
Zindikirani kuti ndi chiwonetsero: chokani; khalani pazumikizako, bokosi lonse la chinthu cha menyu ndilolondola, osati makalata okha. Izi ndi zabwino kuti tigwiritse ntchito. Onetsetsani kuti mumayika mitundu yowunikira (kulumikiza, kuyendera, kuyendayenda ndi yogwira ntchito) ngati mukufuna kuti ikhale yosiyana ndi ya buluu, yofiira ndi yofiirira.
a: link, a: anapita {color: #fff; }}
a: hover, a: yogwira {mtundu: # 000; }}
Ndimakonda kupatsanso chidwi kwambiri ndi kusintha mtundu wa chiyambi.
a: hover {kumbuyo: mtundu wa #fff; }}
Ngati mukufuna zitsanzo zambiri za menus owona, onani mndandanda uli pansipa.
- Mndandanda Wowonongeka
- Chithunzi Chachidindo Chamawonekedwe
- Mndandanda Wowonongeka Ndilipo Pano
- Chinthu Choyambirira Chachizindikiro Chakujambula ndi Inu Pano
Menyu Yoyendayenda Yowongoka
Kupanga menyu osakanikirana ndizowonjezereka kwambiri kusiyana ndi mazenera oyendetsa mazenera chifukwa muyenera kulepheretsa kuti mndandanda wa HTML umasankha kuwonekera. Monga ndi menyu yopingasa, yambani kupanga makina oyendera panyanja .
Kuti mupange menyu yopingasa, yesetsani kuchita chimodzimodzi ndi momwe munachitira ndi menyu. Yambani ndi kunja ndikugwirako ntchito. Popeza ndikufuna kuyenda kwanga kumayang'ana kumanzere, ndimayika ndi 0 kumanzere ndi padding, ndipo ndikuyandama kumanzere. Muyeneranso kukhala ndi chizoloŵezi choyika m'lifupi kuti mndandanda wanu usatenge malo osachepera kusiyana ndi momwe mukufunira. Kwa menyu osakanikirana, nthawi zambiri izi ndizokwanira kwathunthu. Ndinaonjezeranso mtundu wa mndandanda wa mndandanda wonse kuti ndiziwerenga mosavuta.
ul # navigation {
sungunulani: kumanzere;
malire: 0;
padding: 0;
m'lifupi: 100%;
mzere wa kumbuyo: # 039;
}}
Koma chinsinsi cha maulendo osakanizika a menyu ndizo mndandanda wa zinthu. Zolemba mndandanda nthawi zambiri zimatseka zinthu, zomwe zikutanthauza kuti iwo adzakhala ndi newline yoikidwa patsogolo ndi pambuyo pake. Mwa kusintha chiwonetsero kuchokera ku block mpaka pakati, mumakakamiza zinthu zomwe mukufuna kulembera.
ul # navigation li {kusonyeza: mkati; }}
Ndinagwirizana ndi maulumikizimodzimodzi monga momwe ndinawachitira pazenera zoyendera, ndi mitundu yofanana ndi yokongoletsa. Ndinawonjezera malire apamwamba kuti afotokoze mabataniwo atakweza. Chinthu chokhacho chimene ndinachotsa chinali chiwonetsero; monga izo zidzabwezeretsa newlines mkati ndi kuwononga menyu yopingasa.
ul # navigation li {
kukongoletsa malemba: palibe;
padding: .25em 1em;
malire-pansi: olimba 1px # 39f;
malire-pamwamba: olimba 1px # 39f;
Malire-kumanja: olimba 1px # 39f;
}}
a: link, a: anapita {color: #fff; }}
Ul # navigation ndi: hover {
zojambulajambula: #fff;
Mtundu: # 000;
}}
Inu Mukuwona Zomwe Mukudziwa
Mbali ina ya HTML ndi chodziwika chodziwika. Ngati mukufuna kusintha ma menu anu kuti muwonetse malo omwe akugwiritsa ntchito omwe akugwiritsa ntchito, ingogwiritsani ntchito chidziwitsochi kuti mudziwe mtundu wina wa chiyambi kapena mawonekedwe ena. Sungani chizindikiro cha chidziwitso chimenecho pazomwe zili pamasamba ena kuti tsamba lamakono liwonetsedwe.
ul # navigation li # olowa {kumbuyo: mtundu # 09f; }}
Ngati mwayika mafashoniwa palimodzi pa tsamba lanu, mungathe kupanga zojambula zosakanikirana kapena zowoneka bwino zomwe zikugwiritsidwa ntchito ndi malo anu koma mofulumira kuzilitsa komanso zosavuta kuzilemba mtsogolo. Kugwiritsira ntchito XHTML + CSS kukuthandizani mndandanda wanu kukhala chida champhamvu chopanga.
Ngati mukufuna zitsanzo zambiri za menyu osakanikirana, onani zotsatirazi.
- Mndandanda Wosakanizika Wowongoka
- Chizindikiro Chachikulu Chachigawo Chokhazikika
- Masewu Ophwanyika Ozengereza ndi Inu Ali Pano
- Chinthu Chachikulu Chokhazikika Chojambula ndi Inu Pano