01 de 06
Mar a chruthaicheas tu seòladh tabbed le CSS agus Gun ìomhaighean
Is e seòrsa liosta a th 'ann an seòladh air duilleagan lìn, agus tha seòladh tabbed mar liosta còmhnard. Tha e gu math furasta a bhith a 'cruthachadh seòladh tabaichte còmhnard le CSS, ach tha CSS 3 a' toirt dhuinn beagan innealan eile gus am bi iad a 'coimhead nas fheàrr.
Feumaidh an teisteanas seo a thoirt leat tro HTML agus CSS a bhith a 'cruthachadh clàr-taice tabaichte CSS. Cliog air a 'cheangal sin gus faicinn mar a sheallas e.
Chan eil an clàr-bùird seo a 'cleachdadh ìomhaighean sam bith , dìreach HTML agus CSS 2 agus CSS 3. Faodar a dheasachadh gu furasta gus barrachd tabaichean a chur ris no an teacsa a thaghadh.
Taic Browsair
Obraichidh an clàr-taice tab anns a h-uile prìomh bhrabhsair . Cha sheall rannsachair eadar-lìn na h-oiseanan cruinn, ach air dhòigh eile, seallaidh e tabaichean dìreach mar Firefox, Safari, Opera, agus Chrome.
02 de 06
Sgrìobh Liosta na Clàr-taice agad
Is e dìreach liosta neo-òrdaichte a th 'anns a h-uile clàr-taice is tabaichean seòlaidh. Mar sin is e a 'chiad rud a tha thu airson a dhèanamh a tha a' sgrìobhadh liosta de cheanglaichean nach eil airidh air adhart far a bheil thu ag iarraidh gun tèid an seòladh tabbed agad.
Tha an oideachadh seo a 'gabhail ris gu bheil thu a' sgrìobhadh do HTML ann an deasaiche teacsa agus gu bheil fios agad càite an cuir thu HTML airson do chlàr-taice air an duilleag-lìn agad.
Sgrìobh do liosta neo-iomchaidh mar seo:
- class = "tablist">
- CSS 3
- id = "làithreach"> Tabaichean
- Airson
- Clàr-bìdh
Nochdaidh tu gu bheil an còd a 'gairm dà rud: class = "tablist" agus id = "làithreach". Tha a 'chiad fhear riatanach . Mura cuir thu a 'chlas tablist air an liosta neo-òrdaichte agad, cha obraich na tabaichean. Tha an dàrna roghainn. Cuir an id = "làithreach" air a 'phut a tha thu airson a bhith air a chomharrachadh air an duilleig sin. Bidh mi a 'cleachdadh seo mar as trice gus an duilleag a tha mi a' nochdadh a chomharrachadh ach faodaidh tu a chleachdadh gus an taba as cudromaiche a shoilleireachadh. No faodaidh tu a thoirt air falbh gu tur.
03 de 06
Tòisich a 'deasachadh an duilleag stoidhle agad
Faodaidh tu duilleag stoidhle a-muigh no duilleag stoidhle a - staigh a chleachdadh . Bidh duilleag na h-sampla clàr-taice a 'cleachdadh duilleag stoidhle a-staigh anns an
den sgrìobhainn.An toiseach Stèidhichidh sinn an UL Hun
Seo far a chleachdas sinn tablist a 'chlas. An HTML. An àite a bhith a 'dealbhadh tag UL, a bhiodh a' stoidhle gach liosta neo-iomchaidh air do dhuilleag, bu chòir dhut dìreach clas UL a stoidhle. tablist Mar sin bu chòir a 'chiad inntrigeadh a bhith agad san CSS agad:
.tablist {}Is toigh leam a bhith a 'cur a-steach a' chlach lùbach mu dheireadh (}) air thoiseach air an àm, agus mar sin cha dìochuimhnich mi nas fhaide air adhart.
Ged a tha sinn a 'cleachdadh tag liosta neo-òrdaichte airson liosta nan clàr tabaichean, ach chan eil sinn ag iarraidh gun tèid peilearan no àireamhan sam bith a shnàmh. Mar sin, is e an stoidhle a bu chòir dhut a chur ris. liosta-stoidhle: none; Tha seo ag innse don bhrobhsair ged a tha e na liosta, is e liosta a th 'ann agus chan eil stoidhlichean ro-dhearbhte (leithid peilearan no àireamhan).
An uairsin, is urrainn dhut àirde do liosta a shuidheachadh gus an àite a tha thu ag iarraidh a lìonadh a cho-fhreagairt. Thagh mi 2em airson mo dh 'àirde, oir tha sin dùbailte leis a' chlò-bhualadh àbhaisteach, agus bheir e timcheall air leth gu h-àrd agus fo teacs a 'chlàir. àirde: 2m; Ach faodaidh tu do leud a shuidheachadh a rèir dè a mheud a tha thu ag iarraidh. Bidh tagaichean UL a 'toirt suas 100% den leud gu fèin-obrachail, agus mar sin mura h-eil thu ag iarraidh gum bi e nas lugha na an uidheam làithreach, faodaidh tu an leud fhàgail.
Mu dheireadh, mura h-eil preets airson do chlàr maighstir stoidhle airson tagaichean UL agus OL, bidh thu airson an cur a-steach. Tha seo a 'ciallachadh gum bu chòir dhut na crìochan, na h-oirean, agus an cur air adhart air do UL. gleabadh: 0; iomall: 0; crìch: gin; Ma tha thu mar-thà air tagradh UL ath-shuidheachadh, faodaidh tu na h-oirean, an cleasachadh no an crìochan atharrachadh gu rudeigin a tha freagarrach don dealbhadh agad.
Bu chòir don chlas deireannach agad a bhith coltach ri seo:
.tablist {liosta-stoidhle: none; àirde: 2m; gleabadh: 0; iomall: 0; crìch: gin; }04 de 06
A 'deasachadh nan nithean LI Liosta
Aon uair 's gu bheil thu air liosta neo-òrdaichte a dhealbhadh, feumaidh tu na tagaichean LI a stigh a-staigh. Air an làimh eile, bidh iad ag obair mar liosta àbhaisteach agus gluaisidh iad chun an ath loidhne gun a bhith a 'cur nan tabaichean agad gu ceart.
An toiseach, cuir air dòigh an togalach stoidhle agad:
.tablist li {}An uairsin tha thu airson na tabaichean agad a shnatadh gus am bi iad a 'sìneadh suas air an itealan còmhnard. flùraichean: clì;
Agus na dì-chuimhnich gun cuir thu beagan iomall eadar na tabaichean, mar sin cha bhith iad a 'tighinn còmhla. ceart-taobh: 0.13em;
Bu chòir na stoidhlichean agad a bhith coltach mar seo:
.tablist li {flùr: clì; ceart-taobh: 0.13em; }05 de 06
A 'dèanamh nan tabaichean a' coimhead coltach ri tabs le CSS 3
Gus a 'mhòr-chuid de thogail trom a dhèanamh anns an duilleag stoidhle seo, tha mi a' cuimseachadh air na ceanglaichean taobh a-staigh an liosta neo-òrdaichte. Tha na brabhsair ag aithneachadh gu bheil ceanglaichean a 'dèanamh barrachd air duilleag-lìn na tagaichean eile, agus mar sin tha e nas fhasa do bhrabhsairean nas sine gèilleadh ri rudan mar stàite a tha ag innse ma chuireas tu iad ris a' chuairt ancair (ceanglaichean). Mar sin, sgrìobh an toiseach stoidhle do stoidhle:
.tablist li a {} .tablist li a: hover {}Air sgàth 's gum bu chòir dha na tabaichean seo tabs a chleachdadh ann an tagradh, tha thu ag iarraidh gum faighear cliogadh air farsaingeachd iomlan a' chlàir, chan e dìreach an teacsa ceangailte. Gus seo a dhèanamh, feumaidh tu an taga A a thionndadh bhon " inline " àbhaisteach aige a stàladh ann an eileamaid bloc . taisbeanaidh: bloc; (Ma tha ùidh agad ann a bhith a 'faighinn barrachd fiosrachaidh mu dheidhinn an eadar-dhealachaidh, leugh Block-Level vs. Inline Elements .)
An uairsin, tha e na dhòigh fhurasta do na tabaichean a bhith co-chothromach ri chèile, ach tha e fhathast sùbailte gus farsaingeachd an teacsa a fhreagairt gus an gleidheadh ceart agus clì a dhèanamh. Chleachd mi an stuth geàrr-ghlèidhte airson putadh airson a 'mhullach agus a' bhonn gu 0 agus an taobh dheas agus clì gu 1em. padadh: 0 1em;
Thagh mi cuideachd an ceangal eadar-dhealaichte a thoirt air falbh, gus am bi na tabaichean nas coltaiche ri ceanglaichean. Ach ma dh 'fhaodadh an luchd-èisteachd agad a bhith mì-thoilichte le sin, fàg a-mach an loidhne seo. link-decoration: none;
Le bhith a 'cur crìochan tana timcheall air na tabaichean, bidh ea' coimhead orra coltach ri tabaichean. Chleachd mi seilbh goirid air a 'chrìch gus an crìochan a chur timcheall a' chrìche air gach taobh: 0.06em solid # 000; Agus an uair sin chleachd iad an tobhta bun-toisich gus a thoirt bhon bhonn. aig a 'chrìch: 0;
An uairsin rinn mi beagan atharrachaidhean air cruth, dath, agus dath cùil nan tabaichean. Cuir iad sin gu na stoidhlichean a tha a 'maidseadh do làrach. cruth: cruaidh 0.88em / 2em arial, geneva, helvetica, sans-serif; dath: # 000; cùl-dath: #ccc;
Bu chòir a h-uile stoidhle gu h-àrd a dhol a-steach don roghnaichear .tablist li a, an riaghailt gus am bi iad a 'toirt buaidh air na tagaichean anchor san fharsaingeachd. An uairsin gus na tabaichean a dhèanamh nas coltaiche, bu chòir dhut riaghailt beagan stàite a chur ris .tablist li a: hover.
Is toigh leam dath an teacsa agus an cùl-raon atharrachadh gus an tabaig pop a dhèanamh nuair a luchaicheas tu thairis air. cùl-fhiosrachadh: # 3cf; dath: #fff;
Agus bha mi a 'toirt a-steach cuimhneachan eile dha na brabhsairean a tha mi airson nach bi an ceangal fhathast air a chuingealachadh. teacs-sgeadachadh: gin; Is e dòigh cumanta eile am bacadh a thoirt air ais nuair a bhios tu a 'luchag thairis air a' phut. Ma tha thu airson sin a dhèanamh, atharraich e gu sgeadachadh teacs: cuir loidhne air;
Ach Càite bheil an CSS 3?
Ma tha thu air a bhith a 'toirt aire dhut, is dòcha gu bheil thu air mothachadh nach eil stoidhlichean CSS 3 air a chleachdadh anns an duilleag stoidhle. Tha e na bhuannachd seo a bhith ag obair ann am brabhsair ùr-nodha sam bith, a 'gabhail a-steach Internet Explorer. Ach chan eil e a 'dèanamh gu bheil na tabaichean coltach ri rud sam bith eile na bogsaichean ceàrnagach. Le bhith a 'cur radius crìochan gairm stoidhle CSS 3 (agus na gairmean sònraichte air a' bhrobhsair agad) faodaidh tu na h-oirean a dhèanamh cruinn, airson coimhead nas coltaiche ri tabs air fillteall manila.
Na stoidhlichean a bu chòir dhut cur ris an riaghailt .tablist li: -webkit-border-top-right-radius: 0.50em; radius -webkit-border-top-left-radius: 0.50em; -moz-border-radius-topright: 0.50em; -moz-border-radius-topleft: 0.50em; radius top-top-right: 0.50em; radius clì-mullach-clì: 0.50em;
Is iad seo na riaghailtean stoidhle deireannach a sgrìobh mi:
.tablist li {{taisbeanadh: bloc; padadh: 0 1em; teacs-sgeadachadh: gin; crìochan: 0.06 cumanta # 000; aig a 'chrìch: 0; cruth: cruaidh 0.88em / 2em arial, geneva, helvetica, sans-serif; dath: # 000; cùl-dath: #ccc; / * CSS 3 eileamaidean * / webkit-border-top-right-radius: 0.50em; radius -webkit-border-top-left-radius: 0.50em; -moz-border-radius-topright: 0.50em; -moz-border-radius-topleft: 0.50em; radius top-top-right: 0.50em; radius clì-mullach-clì: 0.50em; } .tablist li a: hover {background: # 3cf; dath: #fff; teacs-sgeadachadh: gin; }Leis na stoidhlichean sin, tha clàr-taice tabbed agad a tha ag obair anns a h-uile prìomh bhrabhsair agus tha coltas ann air tabaichean clò-bhuailte deas ann am brabhsairean co-chòrdail CSS 3. Tha an ath dhuilleag a 'toirt dhut aon roghainn eile a dh' fhaodadh tu a chleachdadh gus a dhìon a-mach eadhon barrachd.
06 de 06
A 'cur cuideam air an tab làithreach
Anns an HTML a chruthaich mi, bha aon eileamaid liosta aig UL le ID. Leigidh seo leat aon stoidhle LI a thoirt seachad bhon chòrr. Is e an suidheachadh as cumanta a bhith a 'dèanamh a' chlàir làithreach a 'nochdadh ann an dòigh air choireigin. Is e dòigh eile air smaoineachadh air seo gu bheil thu airson na tabaichean a ghlasadh nach eil beò. An uairsin bidh thu ag atharrachadh far a bheil an ìomhaigh air na duilleagan eadar-dhealaichte.
Bidh mi a 'stoidhleadh an dà tag #current a bharrachd air an #current A: hover sta gus am bi an dà rud beagan eadar-dhealaichte. Faodaidh tu atharrachadh air dath, dath cùl-raoin, eadhon àirde, leud agus gleabadh an eileamaid sin. Dèan dè na h-atharrachaidhean a bhios a 'dèanamh ciall san dealbhadh agad.
.tablist li # an-dràsta {background-color: # 777; dath: #fff; } .tablist li # current a: hover {background: # 39C; }Agus tha thu deiseil! Tha thu dìreach air clàr tabbed a chruthachadh airson do làrach-lìn.