01 ntawm 06
Yuav ua li cas los tsim Tabbed Navigation nrog CSS thiab tsis muaj duab
Cov kev qhia hauv cov nplooj ntawv web yog ib daim ntawv teev cov npe, thiab cov ntawv navigation tabbed yog zoo li daim ntawv teev kab rov tav. Nws yooj yim yooj yim los tsim kab rov tav tabbed navigation nrog CSS, tab sis CSS 3 muab peb ob peb ntxiv cov cuab yeej los ua rau lawv saib txawm nicer.
No nyeem yuav coj koj los ntawm HTML thiab CSS tsim nyog los tsim ib qho CSS tabbed zaub mov. Nias qhov txuas mus saib seb nws yuav zoo li cas.
Cov ntawv qhia zaub mov no tsis siv cov duab , tsuas yog HTML thiab CSS 2 thiab CSS 3. Nws tuaj yeem kho tau yooj yim dua ntxiv tabs lossis hloov cov ntawv nyob hauv lawv.
Browser Support
Cov ntawv qhia zaub mov no tab tom ua haujlwm hauv tag nrho cov saib xyuas loj . Internet explorer yuav tsis pom cov ces kaum sib npaug, tab sis lwm yam, nws yuav qhia tabs zoo li Firefox, Safari, Opera, thiab Chrome.
02 ntawm 06
Sau koj Daim Ntawv Teev Npe
Txhua tus navigation menus thiab tabs tsuas yog kev teev npe tsis tau. Li ntawd, thawj zaug uas koj xav ua yog sau ib daim ntawv teev cov kev sib txuas mus rau qhov chaw uas koj xav kom koj lub npe tabbed mus.
Qhov kev nyeem no yog piv txwv tias yog koj sau ntawv koj tus HTML hauv phau ntawv nyeem thiab koj paub tias qhov chaw muab cov HTML rau koj cov ntawv qhia hauv koj qhov web page.
Sau koj unordered cov npe zoo li no:
- hoob = "tablist">
- CSS 3
- id = "tam sim no"> Tabs
- Rau
- Menus
Koj yuav pom tias txoj cai hu tawm ob yam: chav kawm = "tablist" thiab id = "tam sim no". Thawj yog yuav tsum tau ua . Yog tias koj tsis muab daim ntawv teev npe tab no tso rau ntawm koj daim ntawv teev npe, koj tus menyuam yuav tsis ua haujlwm. Qhov thib ob yog nyob ntawm koj xaiv. Muab tus id = "tam sim no" rau qhov twg tab sis koj xav kom pom tseeb rau ntawm phab ntawv ntawd. Feem ntau kuv siv qhov no los ua kom pom cov nplooj ntawv hais tias kuv nyob, tab sis koj siv tau los qhia qhov tseem ceeb tab. Los yog koj tuaj yeem tshem nws kiag li.
03 ntawm 06
Pib Editing Koj Cov Ntawv Txuas Lus
Koj tuaj yeem siv daim ntawv txheej txheem sab nraud los yog ib daim ntawv qhia sab hauv . Cov ntawv qhia cov ntawv qhia zaub mov siv ib daim ntawv qhia sab hauv cov lus hauv lub taub hau ntawm daim ntawv.
Ua ntej peb yuav Style tus UL nws tus kheej
Qhov no yog qhov uas peb siv daim ntawv teev cov hoob kawm .in qhov HTML. Es tsis styling lub UL tag, uas yuav style txhua unordered npe ntawm koj sab, koj yuav tsum tau style xwb UL hoob. tablist Yog li thawj zaug nkag hauv koj cov CSS yuav tsum:
.tablist {}Kuv nyiam muab tso rau hauv qhov xaus curly brace (}) ua ntej ntawm lub sij hawm, yog li kuv tsis nco nws tom qab.
Thaum peb siv ib daim ntawv teev npe uas tsis tau teev npe rau daim ntawv qhia zaub mov tab, tab sis peb tsis xav kom muaj cov mos txwv lossis cov zauv nyob hauv. Ces yog thawj hom koj yuav tsum ntxiv. sau-style: tsis muaj; Qhov no qhia cov browser tias thaum nws yog ib daim ntawv teev, nws yog ib daim ntawv teev npe tsis muaj kev pom zoo (xws li cov mos lwj lossis cov zauv).
Tom qab ntawd, koj tuaj yeem teev qhov siab ntawm koj daim ntawv teev kom haum rau qhov chaw koj xav kom nws sau. Kuv tau xaiv 2em rau kuv qhov siab, raws li qhov ntawd yog ob chav tus qauv loj, thiab qhia txog ib nrab ntawm em saum toj thiab hauv qab cov ntawv nyeem ntawm lub tab. qhov siab: 2em; Tab sis koj tuaj yeem tsim koj qhov dav rau me me qhov koj xav tau. UL cim npe yuav cia li siv li 100% ntawm lub dav, yog tias koj xav kom nws me dua lub thawv tam sim no, koj tuaj yeem tawm qhov dav tawm.
Thaum kawg, yog tias koj daim ntawv ntaus tswv yim tsis muaj presets rau UL thiab OL cov cim npe, koj yuav xav muab tso rau hauv. Qhov no txhais tau tias koj yuav tsum tua cov ciam teb, margins, thiab padding ntawm koj lub UL. padding: 0; paj: 0; ciam teb: tsis muaj; Yog tias koj twb rov qab pib lub UL tag, koj tuaj yeem hloov cov margins, padding, los yog ciam teb rau ib yam uas haum nrog koj tsim.
Koj cov hoob kawm .tablist kawg yuav tsum zoo li qhov no:
.tablist {list-style: none; qhov siab: 2em; padding: 0; paj: 0; ciam teb: tsis muaj; }04 ntawm 06
Txhim Kho Cov Ntawv Sau LI
Thaum koj tau styled koj unordered sau, koj yuav tsum tau style cov LI cim hauv nws. Txwv tsis pub, lawv yuav ua zoo ib yam li cov txheej txheem teev tseg thiab txhua qhov tawm mus rau kab tom ntej tsis tso koj cov ntawv khij kom raug.
Ua ntej, teeb tsa koj lub vaj tse qub:
.tablist li {}Tom qab ntawd koj xav ntab koj cov tabs xwv kom lawv kab rau ntawm lub dav hlau tav toj. ntab: sab laug;
Thiab tsis txhob hnov qab ntxiv ib co paj ntawm lub tabs, yog li lawv tsis koom ua ke. npoo-txoj cai: 0.13em;
Koj tus cwj pwm zoo yuav tsum zoo li no:
.tablist {float: left; npoo-txoj cai: 0.13em; }05 ntawm 06
Ua lub Tabs Saib Zoo li Tabs nrog CSS 3
Ua ntau lub heavy lifting hauv no daim ntawv style, Kuv tabtom targeting cov kev sib txuas nyob hauv daim ntawv teev npe uas tsis tau teev npe. Browsers pom tias cov kev txuas mus ua ntau dua ntawm nplooj ntawv web dua li lwm cov cim npe, yog li nws yooj yim kom tau cov laus dua browsers kom ua raws li tej yam xws li yuj xeev yog tias koj xa lawv mus rau txoj kev tagnrho (txuas). Yog li ntawd, xub sau koj cov khoom:
.tablist li ib {} .tablist li ib: yuj {}Vim tias cov tabs no yuav tsum ua zoo li tabs nyob rau hauv ib daim ntawv thov, koj xav kom tag nrho cheeb tsam ntawm lub tab yuav tsum clickable, tsis yog lub ntsiab lus txuas. Ua li no, koj yuav tsum hloov lub cim ntawm nws qhov qub " inline " hauv lub xeev mus rau hauv ib lub nris . zaub: thaiv; (Yog tias koj xav paub ntxiv txog qhov sib txawv, nyeem Block-Level thiab Inline Elements .)
Tom qab ntawd, txoj kev yooj yim los mus yuam kom koj tabs yuav tsum ua nrog lwm tus, tab sis tseem yoog kom haum qhov dav ntawm cov ntawv nyeem yog ua rau sab xis thiab sab laug padding tib yam. Kuv tau siv cov khoom ntiag tug txav txav rau sab saum toj thiab hauv qab mus rau 0 thiab sab xis thiab sab laug rau 1 teev. padding: 0 1em;
Kuv kuj tau xaiv kom tshem tawm qhov txuas txuas, kom cov tabs saib zoo li kev txuas. Tab sis, yog tias koj cov neeg tuaj saib tej zaum yuav tsis meej pem los ntawm qhov ntawd, tawm ntawm kab no. link-decoration: All;
Los ntawm kev ciav tus nyias nyob ib ncig ntawm lub tabs, nws ua rau lawv zoo li tabs. Kuv siv ciam teb shorthand vaj tse kom muab tus ciam hla txhua plaub sab ciam teb: 0.06em khoom # 000; Thiab siv cov ciam av hauv qab kom tshem nws tawm hauv qab. ciam teb-hauv qab: 0;
Tom qab ntawd kuv tau tsim ib co kev kho me ntsis rau cov font, xim, thiab tom qab xim ntawm tabs. Teem cov no rau lub yeeb yam uas phim koj qhov chaw. font: bold 0.88em / 2em arial, genes, helvetica, sans-serif; xim: # 000; tom qab-xim: #ccc;
Tag nrho cov kev cai saum toj no yuav tsum mus rau hauv lub selector .tablist li ib, txoj cai kom lawv cuam tshuam rau cov cim npe ntawm cov ntawv. Tom qab ntawd kom cov tabs tshwm ntau clickable, koj yuav tsum ntxiv ob peb lub xeev txoj cai .tablist li ib tug: yuj.
Kuv nyiam hloov cov xim ntawm cov ntawv nyeem thiab keeb kwm yav dhau los ua tus tab pop thaum koj nas lawm. tom qab: # 3cf; xim: #fff;
Thiab kuv muaj lwm ceeb toom rau cov browsers uas kuv xav tau qhov txuas kom nyob tsis tau poob qis. ntawv-kho kom zoo nkauj: tsis muaj; Lwm txoj kev yog los tig lub kos qaum rov qab rau thaum koj nas dhau lub tab. Yog tias koj xav ua qhov ntawd, hloov nws kom cov ntawv-kho kom zoo nkauj: kos kab hauv qab;
Tab sis qhov CSS 3 nyob qhov twg?
Yog hais tias koj tau raug them sai sai, koj tau pom tias tsis muaj CSS 3 hom uas siv rau hauv daim ntawv sau style. Qhov no tau ua kom zoo dua rau kev ua haujlwm hauv txhua tus qauv tshiab, xws li Internet Explorer. Tab sis nws tsis ua lub tabs zoo li txhua yam ntau tshaj li ntau lub thawv ntawv. Los ntawm kev ntxiv CSS 3 style hu ciam teb-vojvoog (thiab nws yog qhov browser hu tshwj xeeb) koj tuaj yeem ua rau cov npoo sib npaug, mus saib ntau dua li tabs ntawm daim nplaub tshev me me.
Tus cwj pwm koj yuav tsum tau ntxiv rau qhov .tablist raws li txoj cai yog: -webkit-ciam teb-saum-txoj cai-vojvoog: 0.50em; -webkit-ciam teb-sab-sab-vojvoog: 0.50em; -moz-ciam teb-voj voog-av: 0.50em; -moz-border-radius-topleft: 0.50em; ciam teb saum toj-txoj cai-vojvoog: 0.50em; ciam teb-sab saum toj-vojvoog: 0.50em;
Cov no yog cov cai txiav txim siab thaum kawg kuv tau sau:
.tablist li tus {zaub: thaiv; padding: 0 1em; ntawv-kho kom zoo nkauj: tsis muaj; ciam teb: 0.06em khoom # 000; ciam teb-hauv qab: 0; font: bold 0.88em / 2em arial, genes, helvetica, sans-serif; xim: # 000; tom qab-xim: #ccc; / * CSS 3 ntsiab * / webkit-ciam teb-saum-txoj cai-vauv: 0.50em; -webkit-ciam teb-sab-sab-vojvoog: 0.50em; -moz-ciam teb-voj voog-av: 0.50em; -moz-border-radius-topleft: 0.50em; ciam teb saum toj-txoj cai-vojvoog: 0.50em; ciam teb-sab saum toj-vojvoog: 0.50em; } .tablist li ib: yuj yuj yees {background: # 3cf; xim: #fff; ntawv-kho kom zoo nkauj: tsis muaj; }Nrog cov qauv no, koj muaj lub tshuab raj tabbed uas ua hauj lwm hauv txhua tus loj browsers thiab zoo li cov ntawv luam tabs zoo hauv CSS 3 cov khoos kas raws txoj kab ke. Cov nplooj ntawv tom ntej muab ib qho ntxiv rau koj tuaj yeem siv los hnav nws ntau dua.
06 ntawm 06
Tshaj Tawm Tus Tam Sim No
Hauv HTML kuv tsim, UL muaj ib daim ntawv teev npe nrog tus ID. Qhov no tso cai rau koj muab ib daim LI ib qho txawv ntawm tus so. Qhov teeb meem tshwm sim feem ntau yog ua kom tiav tab tam sim no. Lwm txoj kev xav txog qhov no yog tias koj xav tau grey tawm cov tabs uas tsis nyob. Koj mam li hloov qhov chaw nyob ntawm cov nplooj ntawv txawv.
Kuv style ob tus #current A lossis raws li tus #current A: hover sta kom neb ob leeg sib txawv me ntsis. Koj tuaj yeem hloov xim, xim tom qab, qhov siab, dav thiab padding ntawm lub caij ntawd. Ua txhua yam kev hloov ua rau koj paub.
.tablist li # tam sim no a xim xim: # 777; xim: #fff; } .tablist li # a tam sim no: yuj {hauv qab: # 39C; }Thiab koj ua tiav! Koj nyuam qhuav tau tsim cov ntawv qhia zaub mov rau koj lub vev xaib.