01 ya 06
Mmene Mungapangire Kuyenda kwa Tabbed ndi CSS ndi Zithunzi
Kuyenda pamasamba ndi mawonekedwe a mndandanda, ndipo mazenera akuyenda ngati mndandanda wosakanikirana. Ndi zophweka kupanga mapangidwe osakanikirana ndi CSS, koma CSS 3 imatipatsa zipangizo zingapo kuti ziwoneke bwino.
Phunziroli lidzakutengerani ku HTML ndi CSS kuti muyambe kukhazikitsa masitepe a CSS. Dinani pa chiyanjano kuti muwone m'mene ziwonekera.
Mapulogalamu awa samagwiritsa ntchito mafano , HTML okha ndi CSS 2 ndi CSS 3. Zingasinthidwe mosavuta kuwonjezera ma tabu ena kapena kusintha malembawo.
Zothandizira Otsata
Menyuyi yazituyi idzagwira ntchito muzithukuta zonse zazikuru . Wofufuzira pa intaneti sadzawonetsa ngodya zozungulira, koma ayi, izo ziwonetsa ma tabo monga Firefox, Safari, Opera, ndi Chrome.
02 a 06
Lembani Mndandanda wa Menyu
Manambala onse oyendetsa ndi ma tabu alidi mndandanda wosadziwika. Choyamba, chinthu choyamba chimene mukufuna kuchita ndi kulemba mndandanda wosayanjanitsidwa wa maulumikizi komwe mukufuna kuti mazenera anu apite.
Maphunziro awa akuganiza kuti mukulemba HTML yanu mu editor komanso kuti mukudziwa m'mene mungagwiritsire ntchito HTML pa menu yanu pa tsamba lanu.
Lembani mndandanda wanu wosasinthika monga chonchi:
- gulu = "tablist">
- CSS 3
- id = "current"> Ma Tabs
- Kwa
- Menus
Mudzazindikira kuti code imatchula zinthu ziwiri: gulu = "mndandanda" ndi id = "panopa". Yoyamba ikufunika . Ngati simugwiritsa ntchito mndandanda wa gululi pazndandanda yanu, ma tabu sakugwira ntchito. Yachiwiri ndi yokha. Ikani id = "panopa" pa tsamba limene mukufuna kuti liwonetsedwe patsamba limenelo. Nthawi zambiri ndimagwiritsa ntchito izi kuti ndiwonetsetse tsamba limene ndikukhala, koma mungagwiritse ntchito poyika tabu lofunika kwambiri. Kapena mukhoza kuchotsa kwathunthu.
03 a 06
Yambani Kusintha Zomwe Mumakonda
Mungagwiritse ntchito pepala lakunja lakunja kapena tsamba loyang'ana mkati . Tsamba lamasewera lazitsanzo limagwiritsa ntchito pepala lamasewero mkati mwa
la chikalata.Choyamba Tidzasintha UL Itself
Apa ndi pamene timagwiritsa ntchito mndandanda wamakono .in HTML. M'malo mojambula loti la UL, lomwe lingatanthauze mndandanda wonse wosasunthika pa tsamba lanu, muyenera kufotokoza kokha kalasi ya UL. mndandanda Kotero kulowa koyamba mu CSS yanu kuyenera kukhala:
.tablist {}Ndimakonda kuika pamapeto omaliza (}) patsogolo pa nthawi, kotero sindikuiwala kenako.
Pamene tikugwiritsira ntchito mndandanda wosasamalika wa mndandanda wa menyu, koma sitikufuna kuti zipolopolo kapena nambala zikugwera. mndandanda wamndandanda: palibe; Izi zimauza osatsegulayo kuti ndilo mndandanda, ndi mndandanda wopanda machitidwe oyambirira (monga zipolopolo kapena manambala).
Pomwepo, mukhoza kuika kutalika kwa mndandanda wanu kuti mufanane ndi malo omwe mukufuna kuti mudzaze. Ndasankha 2em kwa kutalika kwanga, chifukwa ndizowirikiza kukula kwa machitidwe, ndipo amapereka pafupi theka la em pamwamba ndi pansi pa tabu. kutalika: 2m; Koma mungathe kuyika wanu m'lifupi kukula kulikonse komwe mukufuna. Malemba a UL amatha kutenga 100% m'lifupi, kotero ngati simukufuna kuti ikhale yaying'ono kuposa chidebe chamakono, mukhoza kuchoka m'kati mwake.
Pomalizira, ngati mbuye wanu akujambula pepala alibe malemba a UL ndi OL, mudzafuna kuziyika. Izi zikutanthauza kuti muyenera kuchotsa malire, mitsinje, ndi padding pa UL. padding: 0; malire: 0; malire: palibe; Ngati mwakonzanso kalembedwe ka UL, mungasinthe mazenera, padding, kapena malire ku chinachake chogwirizana ndi mapangidwe anu.
Gulu lanu lomaliza la .tablist liyenera kuoneka ngati izi:
.tablist {mndandanda-kalembedwe: palibe; kutalika: 2m; padding: 0; malire: 0; malire: palibe; }}04 ya 06
Kusintha LI Mndandanda wa zinthu
Mukadatchula mndandanda wanu wosayenerera, muyenera kutchula malemba a LI mkati mwake. Kupanda kutero, iwo adzachita ngati mndandanda wa ndondomeko ndikusuntha kupita ku mzere wotsatira popanda kuika ma tabo anu molondola.
Choyamba, yikani malo anu ojambula:
.tablist li {}Ndiye mukufuna kufota ma tabo anu kuti apange ndege yopingasa. sungunulani: kumanzere;
Ndipo musaiwale kuwonjezera malire pakati pa tabu, kotero iwo samasakanizana palimodzi. kumanja kumanja: 0.13m;
Zojambula zanu ziyenera kuoneka ngati izi:
.tablist li {float: kumanzere; kumanja kumanja: 0.13m; }}05 ya 06
Kupanga Ma Tabs Kuwoneka ngati Ma Tabs ndi CSS 3
Kuti ndiwononge zambiri pa pepala ili, ndikuwongolera zolembera mkati mwa mndandanda wosadziwika. Ofufuza akuzindikira kuti mauthenga amachititsa zambiri pa tsamba la intaneti kusiyana ndi ma tags ena, kotero ndi zosavuta kuti oyang'anira okalamba azitsatira zinthu monga zigawo za hover ngati muwagwirizanitsa ndi zizindikiro zachitsulo. Choyamba lembani zojambulajambula zanu:
.tablist ndi {} .tablistlist a: hover {}Chifukwa ma tabu awa ayenera kumawoneka ngati ma tebulo, mukufuna kuti malo onse a tabu asinthe, osati malemba okhudzana. Kuti muchite izi, muyenera kutembenuza chidindo cha A kuchoka ku boma lachikhalidwe "lokhazikika" kuti likhale lopangira . onetsani; (Ngati mukufuna kudziwa zambiri za kusiyana kwake, werengani Mzere Wotsutsana ndi Zolemba Zake .)
Ndiye, njira yophweka yokakamizira ma tabo anu kukhala osiyana wina ndi mzake, komabe amakonzanso kuti agwirizane ndi kufalikira kwalemba ndikupanga choyenera ndi chakumanako chimodzimodzi. Ndinagwiritsa ntchito padding shorthand malo kuti apange pamwamba ndi pansi ku 0 ndi kumanja ndi kumanzere kwa 1em. padding: 0 1em;
Ndinasankhenso kuchotsa chigwirizanochi, kotero kuti ma tebulo ayang'ane mochepa ngati maulumikizi. Koma ngati omvera anu akhoza kusokonezeka ndi zimenezo, tulukani mzerewu. kulumikiza-kulumikiza: palibe;
Mwa kuyika malire ochepa pozungulira ma tabu, amawapangitsa kuti awoneke ngati matabu. Ndinagwiritsa ntchito malire afupi ndi malire kuti ndiike malire kuzungulira mbali zonse zinayi: 0.06m # 000; Kenaka amagwiritsa ntchito katundu wamtunda-pansi kuti awuchotse pansi. malire-pansi: 0;
Kenaka ndinapanga kusintha kwa maonekedwe, mtundu, ndi mtundu wa ma tepi. Ikani izi ku mafashoni omwe akufanana ndi tsamba lanu. mapepala: bold 0.88em / 2em alial, geneva, helvetica, sans-serif; Mtundu: # 000; zojambulajambula: #ccc;
Zonsezi zapamwambazi ziyenera kupita kwa osankhidwa .tablist li,, malamulo kuti akhudze malemba a anchor. Ndiye kuti ma tabo awoneke ngati akuwoneka, muyenera kuwonjezera malamulo ena a boma .tablist ndi: hover.
Ndimakonda kusintha mtundu wa malemba ndi mbiri kuti pulogalamuyo ipake pamene inu mumagwiritsa ntchito phokoso. maziko: # 3cf; mtundu: #fff;
Ndipo ndinaphatikizapo chikumbutso china ku masakanema omwe ndikufuna kuti chiyanjanocho chisasunge. kukongoletsa malemba: palibe; Njira yowonjezereka ndiyo kutembenuza nsanamira pamsana pamene iwe umagwiritsa ntchito phokoso pamwamba pa tabu. Ngati mukufuna kuchita zimenezo, zisinthe kuti zikhale zokongoletsera malemba;
Koma kodi CSS 3 ili kuti?
Ngati mwakhala mutcheru, mwinamwake mwazindikira kuti sipanakhalepo CSS 3 mafashoni ogwiritsidwa ntchito mu pepala la kalembedwe. Izi zili ndi ubwino wogwira ntchito pa osakayikira amakono, kuphatikizapo Internet Explorer. Koma sizimapangitsa ma tebulo kuwoneka ngati china choposa ma bokosi apakati. Mwa kuwonjezera foni ya CSS 3 yopita malire-radius (ndipo imayenderana ndi mazenera omwe amachititsa osatsegula) mungathe kupanga mapiriwo, kuti awoneke ngati ma tabu pa foda ya manila.
Mafilimu omwe muyenera kuwonjezera pa malamulowa ndi awa: --webkit-border-top-right-radius: 0.50m; -bomba-kumtunda-kumtunda-kumanzere: 0,50m; -malo-malire-amtengo wapatali: 0.50m; -maz-border-radius-topleft: 0.50m; m'mphepete-pamwamba-kumapeto-pafupi: 0,50m; m'mphepete-pamwamba-kumanzere:: 50;
Awa ndiwo malemba oyambirira omwe ndinalemba:
.bablist ndi {mawonetsero: block; padding: 0 1em; kukongoletsa malemba: palibe; malire: 0.06th solid # 000; malire-pansi: 0; mapepala: bold 0.88em / 2em alial, geneva, helvetica, sans-serif; Mtundu: # 000; zojambulajambula: #ccc; / * CSS 3 zinthu * / webkit-border-top-right-radius: 0.50m; -bomba-kumtunda-kumtunda-kumanzere: 0,50m; -malo-malire-amtengo wapatali: 0.50m; -maz-border-radius-topleft: 0.50m; m'mphepete-pamwamba-kumapeto-pafupi: 0,50m; m'mphepete-pamwamba-kumanzere:: 50; } .tablist ndi: hover {kumbuyo: # 3cf; mtundu: #fff; kukongoletsa malemba: palibe; }}Ndi mafashoni awa, muli ndi masewera omwe amagwira ntchito pazithukuta zonse zazikulu ndipo amawoneka ngati ma tepi osindikizidwa mu CSS 3 osatsegula ovomerezeka. Tsamba lotsatira likukupatsani mwayi wina womwe mungagwiritse ntchito kuti muvalidwe kwambiri.
06 ya 06
Lembani Tsatani Yamakono
Mu HTML yomwe ndinalenga, UL anali ndi mndandanda umodzi ndi chidziwitso. Izi zimakulolani kuti mupereke LI imodzi mosiyana ndi kalembedwe. Chinthu chofala kwambiri ndi kupanga tabu yamakono ikuwonekera mwanjira ina. Njira inanso yoganizira izi ndikuti mukufuna kutaya ma tabu omwe sali amoyo. Kenako mumasintha pomwe id ili pamasamba osiyana.
Ndikulemba malemba #current A komanso #current A: staver sta kuti onsewo akhale osiyana. Mukhoza kusintha mtundu, mtundu wachibadwidwe, ngakhale msinkhu, m'lifupi ndi padding wa chinthucho. Pangani kusintha kulikonse mwanzeru.
.bablist li # wamtundu wa {kumbuyo:: # 777; mtundu: #fff; } .tablistlist # current a: hover {kumbuyo: # 39C; }}Ndipo mwathera! Mukungoyambitsa masitepe anu a webusaiti yanu.