Kompyuta, Programu
Jinsi ya kufanya kuacha chini menus CSS
Leo tutaangalia suala la "Je, mimi kujenga kuacha chini menus CSS?". Ni lazima kusema mara moja kwamba bidhaa hii zitafanywa bila kuunganisha fedha yoyote ya ziada. Hiyo ni, orodha zitaundwa tu na CSS na HTML.
mafunzo
Kuelewa kikamilifu yaliyomo ndani yake katika makala, unahitaji kidogo ya kupata khabari na vifaa kinadharia. Lakini kama wewe ni ukoo na madarasa Pseudo, unaweza kuacha aya hii. Hivyo, ili kujenga wima kuacha chini CSS menus, tunahitaji kipengele kama «: hover». Pseudo «: hover» inaweza kwa ajili ya yoyote tag HTML. Ni utapata kufafanua wakati wakati bidhaa Hover mouse yako. Kwa mfano, tuna maalumu mali: «: hover {color: nyekundu;}». kuingia Hii ina maana kwamba wakati hover mouse ni zamu nyekundu juu ya maudhui ya yoyote tag. Ni muhimu kufahamu kwamba hii Pseudo-kipengele pia iliyolemazwa. Kwa njia, «: hover» ameeleza mambo kama hayo. Lakini kutokana na hili sisi kujenga Pseudo CSS orodha kunjuzi.
maelekezo
Kwanza, hebu kuelewa nini ni orodha kuacha chini. Chini ya ufafanuzi huu anapata mengi ya njia tofauti kujenga Layouts tofauti. Katika kesi hii, sisi kuchambua muundo yenye kadhaa ya vitu mara kwa mara kuonekana na baadhi ya ziada (siri). Hebu kumaliza na nadharia na kuanza kufanya mazoezi.
- Tunaunda mpangilio wa orodha yetu. Ili kufanya hivyo, HTML-code kuipatia. Unda orodha nested:
-
- < / ul>. Kitu kama hii unapaswa kuonekana kama kuacha chini yako menu. CSS kuingilia kati baadaye. Katika hali hii orodha kuu lina maeneo makuu matatu na mbili iliyoambatanishwa.
- Ficha menyu ndogo. Kwa hii sisi kutumia Lahamtindo, kufafanua tabia zifuatazo: ul ul {display: hakuna;} Hii itaondoa mambo ya orodha ya pili kutoka screen.
- Kujenga orodha CSS, kushuka chini katika orodha kuu. cascading style kuandika kanuni zifuatazo: ul li: hover ul {display: block;}. kuingia Hii ina maana kwamba wakati panya ni juu ya kipengele li, ambayo iko katika orodha ul inaonekana kwenye screen ul (masharti). Kwa mtazamo wa kwanza, mpango huo inaweza kuonekana ngumu na utata. Lakini kwa kweli, kila kitu ni rahisi sana.
- Tumia mpangilio huu wewe mwenyewe kwa kuingiza vitambulisho
- maudhui yako. Unaweza kubadilisha idadi ya vipengele katika orodha.
mabadiliko mapambo
Mara tu baada ya kuu menu mpangilio ni tayari, unaweza kuendelea na usajili. Pengine, wengi katika nafasi ya kwanza tayari kujikwamua alama kuonyesha orodha kipengele. Hii inafanyika kwa kutumia moja ya mali CSS, yaani orodha-style-aina. Unahitaji kuongeza kuingia zifuatazo: li {orodha-style-aina: hakuna;}. Basi unaweza kuingiza sura na kufanya nyuma. mpaka na background kukusaidia na hii. Labda wengine si kama kuvuta kunjuzi itaonekana kama orodha ya ziada, kusukuma katika mambo sawa za kimsingi. Ili kurekebisha hili, unaweza nafasi yake. Ili kufanya hivyo, kuachia style karatasi kuandika kuingia zifuatazo: ul ul {nafasi: kabisa, kushoto: 15px; kulia: 15px; juu: 15px; bottom: 15px;}. Bila shaka, maadili utatumia yako mwenyewe. Kulingana na pale unataka kuona menyu kunjuzi, CSS itatoa makala nyingi ambazo unaweza kuongeza athari mbalimbali na kupamba orodha yetu.
hitimisho
Kwa mara nyingine tena ni muhimu kufahamu ujenzi wa orodha mpangilio. Hawawajui sheria CSS kutumika katika thamani hii kesi iliyoingia, kwa mfano, ul ul. Kama wewe ni katika hati kukutana nyingine muundo sawa, kunaweza kuwa na matatizo makubwa. Katika hali hizi, unahitaji kutumia kusudi maalumu, kwa mfano, selectors au kitambulisho-vitambulisho. juu ya makala layout orodha kunjuzi imeundwa kwa familiarize kubuni kwa ujumla. mapumziko ya kazi anakaa juu ya mabega yako.
Similar articles
Trending Now