Pangani menyu yopingasa malo nokha

menyu Cham'mbali ndi pafupifupi malo - ndi mbali yofunika, monga chitha ndi maonekedwe ake ndi magwiritsidwe antchito kukopa kapena, Tikawonetsetsa kuwopseza kutali alendo. Tiyeni tiphunzire kulenga pulayimale menyu yopingasa: kupanga izo "mafupa" kuti HTML, kuti adziwe zofunika kulenga. Mukhoza kupeza zakudya wokonzeka, koma zambiri wokoma kuphunzira mmene kukhala wekha. Ndi wokongola zosangalatsa.

Phunzirani kuti menyu

Timayesetsa kuti asasiye manenedwe, amene amatsatira kanjedza otchuka mawonekedwe a. Choyamba muyenera kupanga "mafupa" chifukwa mindandanda yazakudya yathu HTML, kuphunzira zofunika kuti mindandanda yazakudya awo yopingasa. Ndiyeno izo azikongoletsa, ntchito mapepala kalembedwe. Tiyeni menyu athu yopingasa lili 5 zinthu. Chinthu choyamba adzakhala kunam'sintha kwa tsamba lofikira. Mfundo yachiwiri - "About ife". Chachitatu - "mphoto yathu". Chachinayi - "Ndi zosangalatsa." Chachisanu - "Lumikizanani nafe".

HTML-kachidindo zikuwoneka ngati izi:

Amene sakudziwa: up opatsidwa ntchito kwa chipolopolo, zanyengo kuyamba ndi Li lapansi. Li Tags adzalandira masitaelo chagwiritsidwa kwa up.

Up - chipika mchitidwe mndandanda, adzakhululukidwa anatambasula kuti m'lifupi. Li ndi chipika a.

Choncho, kulenga index.html. Tisonkhanitse malamulo athu. Pa nthawi imeneyi, osatsegula akuonetsa ofukula osati menyu yopingasa. Koma ife ndi inu cholinga - kupanga zosankha yopingasa malo. Pakuti ichi tiyenera CSS.

CSS ndi chiyani?

Ngati muli koma kuti adziwe kukula kwa malo, m'pofunika kuti timudziwe bwino mfundo Cascading kalendala Mapepala. Ndipotu, izi ndi malamulo masanjidwe, processing, amene chagwiritsidwa zinthu zosiyana pa masamba a ukonde-malo. Ngati ife kufotokoza katundu wa Zofunikira muyezo HTML, mudzakhala ndi kubwereza zimenezi kangapo, inu mumatenga mwendo ndalama womwewo wa code. tsamba katundu nthawi pa kompyuta malangizo chidzakula. Popewa izi, pali CSS. Wokwanira kufotokoza kamodzi kokha chinthu chinachake, ndiyeno chabe kutchula kumene ntchito katundu wa kalembedwe makamaka. N'zotheka kuti malongosoledwe a osati mawu a tsamba yokha, komanso mwa file wina. Izi adzalola kuti ntchito za Mabaibulo osiyanasiyana pa tsamba onse malo. Ndi yabwino kusintha masamba ena, wokonzedwanso mwamakono ndi CSS-file. Kalembedwe mapepala amakulolani ntchito ndi zilembo pa mlingo kuposa HTML, kuwathandiza kupewa akuchuluka masamba zithunzi za malo.

Ntchito kalendala Mapepala kwa menyu chitukuko

CSS-kachidindo kwa menyu:

1. # My_1menu {mndandanda-kalembedwe: palibe; padding: 6; m'lifupi: 800px; mmphepete: galimoto;}
2. # My_1menu Li {zimatengedwa: kumanzere; wosasintha: zazing'ono 18px Arial;}
3. # My_1menu ndi {mtundu: # 756; kuwonetsera: chipika; kutalika: 55px; mzere-kutalika: 55px; padding: 0px 15px 0px 15px; maziko: #dfc; malemba-chokongoletsera: palibe;}
4. # My_1menu ndi: fungatirani {mtundu: #foa; maziko: # 788;}

Tsopano tiyeni tiyang'ane pa chifukwa yopingasa CSS menyu.

# My_1menu - choncho pali kalembedwe ntchito yoti UL- amafotokozera ndi ID = my_1menu, mndandanda-kalembedwe: palibe - lamulo kuchotsa zizindikiro anatsala zinthu uchitike.

m'lifupi: 800px - m'lifupi menyu wathu ndi 800 pixels.

padding: 0 - ichi amachotsa padding mkati.

mmphepete: galimoto - vyravnivnie menyu yopingasa lili pakati pa tsamba lathu.

# My_1menu Li - kupatsa masitaelo Li-zinthu.

kutalika: 55px - menyu msinkhu.

# My_1menu ndi: fungatirani - kupatsa masitaelo kuti mchitidwe ndipo pamene anachititsa mbewa.

Ife sitikhala kufotokoza mwatsatanetsatane mzera uliwonse, monga yense mapulogalamu akhoza mwachindunji magawo ake apa. Izi maziko ntchito masitaelo ku menyu pa webusaiti. Mukhoza kupereka kwambiri atha ndipo wokongola maonekedwe, pogwiritsa ntchito zithunzi. Perekani mchitidwe koma Mwachitsanzo, maziko: url (img1.png) kubwereza-x. Pakhale maziko: url (img2.png) kubwereza-× kwa: fungatirani.

Yerekezerani anu, makonda kulenga. Ndiye potengera kuti kudziwa mmene kulenga menyu yosavuta pa webusaiti, mukhoza kukhala tsamba ndi mwini mamangidwe yake yapadera.