01 ti 06
Bawo ni lati Ṣẹda Lilọ kiri ti o wa pẹlu CSS ati Ko si Awọn aworan
Lilọ kiri lori awọn oju-iwe wẹẹbu jẹ apẹrẹ akojọ kan, ati pe lilọ kiri lilọ kiri dabi akojọ atokọ. O rọrun lati ṣetan lati ṣe iṣeduro lilọ kiri pẹlu CSS, ṣugbọn CSS 3 n fun wa ni awọn irinṣẹ diẹ diẹ lati ṣe ki wọn wo ani diẹ sii.
Ilana yii yoo gba ọ nipasẹ awọn HTML ati CSS ti o nilo lati ṣẹda akojọ CSS. Tẹ lori ọna asopọ naa lati wo bi o ṣe le wo.
Yi akojọ aṣayan ko lo awọn aworan , o kan HTML ati CSS 2 ati CSS 3. O le ṣe atunṣe ṣatunkọ lati fi awọn taabu diẹ sii tabi yi ọrọ pada sinu wọn.
Abojuto Burausa
Akojọ aṣayan taabu yoo ṣiṣẹ ni gbogbo awọn aṣàwákiri pàtàkì . Oluwakiri Intanẹẹti yoo ko awọn igun ti o ni igun, ṣugbọn bibẹkọ, yoo han awọn taabu bi Firefox, Safari, Opera, ati Chrome.
02 ti 06
Kọ Iwe Akojọ Akojọ rẹ
Gbogbo awọn akojọ aṣayan lilọ kiri ati awọn taabu ni o kan gangan akojọ kan ti ko ni aifọwọyi. Nitorina ohun akọkọ ti o fẹ ṣe ni kọwe akojọ ti a ko ni iyasọtọ si awọn ọna asopọ si ibiti o fẹ ki o ṣe lilọ kiri si lilọ kiri.
Ikẹkọ yii jẹ pe o n kọ HTML rẹ sinu olootu ọrọ ati pe iwọ mọ ibiti o ti gbe HTML fun akojọ aṣayan rẹ lori oju-iwe ayelujara rẹ.
Kọ akojọ rẹ ti ko ni ibamu bi eyi:
- kilasi = "tablist">
- CSS 3
- id = "lọwọlọwọ"> Awọn taabu
- Fun
- Awọn akojọ aṣayan
Iwọ yoo ṣe akiyesi pe koodu awọn ipe jade awọn ohun meji: kilasi = "tablist" ati id = "lọwọlọwọ". A nilo ti akọkọ. Ti o ko ba fi akojọ akojọ tablist sori akojọ rẹ ti a ko mọ, awọn taabu naa yoo ko ṣiṣẹ. Keji jẹ aṣayan. Fi id = "lọwọlọwọ" lori eyikeyi taabu ti o fẹ lati ṣe ifojusi lori oju-iwe yii. Mo maa n lo eyi lati ṣafihan oju-iwe ti mo n lọ, ṣugbọn o le lo o lati ṣe ifamihan taabu pataki julọ. Tabi o le yọ kuro patapata.
03 ti 06
Bẹrẹ Ṣatunkọ rẹ Style Sheet
O le lo boya folda ti ita ita tabi folda ti inu . Oju-iwe akojọ aṣayan nlo iwe ti ara inu "ori> ti iwe-ipamọ.
Akọkọ A yoo Style ara rẹ
Eyi ni ibi ti a nlo akojọ taabu .in awọn HTML. Dipo ki o ṣe afiwe aami UL, eyi ti yoo ṣe akojọ gbogbo awọn akojọ ti ko ni aijọpọ lori oju-iwe rẹ, o yẹ ki o ṣe ara nikan ni kilasi UL. tablist Nitorina titẹsi akọkọ ninu CSS rẹ jẹ:
.tablist {}Mo fẹ lati fi si àmúró ipari igbasilẹ (}) niwaju akoko, nitorina emi ko gbagbe nigbamii.
Nigba ti a nlo aami aifọwọyi ti aifọwọyi fun akojọ akojọ akojọ, ṣugbọn a ko fẹ eyikeyi awako tabi awọn nọmba ti nṣiṣẹ ni. Nitorina ọna akọkọ ti o yẹ ki o fi kun jẹ. akojọ-ara: kò; Eyi sọ fun aṣàwákiri pe nigba ti o jẹ akojọ kan, o jẹ akojọ kan laisi awọn ami ti a ti pinnu tẹlẹ (bi awako tabi awọn nọmba).
Lẹhinna, o le ṣeto iga ti akojọ rẹ lati baamu aaye ti o fẹ ki o kun. Mo ti yàn 2m fun giga mi, bi o ṣe jẹ pe iwọn iwọn iwọn deede, o si fun nipa idaji awọn ami loke ati labẹ awọn ọrọ ti taabu. iga: 2; Ṣugbọn o le ṣeto iwọn rẹ si iwọn eyikeyi ti o fẹ. Awọn afiwe UL yoo gba iwọn 100% ti iwọn rẹ, nitorina ayafi ti o ba fẹ ki o kere ju apo idaniloju lọ, o le fi iwọn rẹ silẹ.
Níkẹyìn, ti o ba jẹ pe aṣiṣe style style rẹ ko ni awọn iṣeto fun awọn afiwe UL ati OL, iwọ yoo fẹ lati fi wọn sinu. Eyi tumọ si pe o yẹ ki o pa awọn aala, awọn ala, ati awọn padding lori UL rẹ. padding: 0; ala: 0; aala: kò si; Ti o ba ti tun atunto UL tag, o le yi awọn agbegbe, igbẹkẹle, tabi aala si ipo ti o baamu pẹlu aṣiṣe rẹ.
Igbimọ ikẹkọ rẹ .tablist yẹ ki o dabi eyi:
.tablist [akojọ-ọna: kò; iga: 2; padding: 0; ala: 0; aala: kò si; }04 ti 06
Ṣiṣatunkọ awọn ohun-akojọ Akojọ LI
Lọgan ti o ti ṣe akojọpọ akojọ rẹ ti ko ni aifọwọyi, o nilo lati ṣe afiwe awọn afi HTML ni inu rẹ. Bibẹkọkọ, wọn yoo ṣiṣẹ gẹgẹbi akojọpọ atokọ ati pe kọọkan lọ si ila laini lai gbe awọn taabu rẹ ni ọna ti o tọ.
Akọkọ, ṣeto ohun elo ara rẹ:
.tablist ni {}Lẹhinna o fẹ lati ṣafo awọn taabu rẹ ki wọn fi ara wọn si ọkọ ofurufu. float: osi;
Ma ṣe gbagbe lati fi aaye diẹ kun laarin awọn taabu, ki wọn ko ba dapọ pọ. ala-ọtun: 0.13em;
Awọn iyatọ rẹ yẹ ki o dabi eyi:
.tablist ni {float: sosi; ala-ọtun: 0.13em; }05 ti 06
Ṣiṣe awọn taabu Awọn taabu bi awọn taabu pẹlu CSS 3
Lati ṣe ọpọlọpọ awọn igbega ti o wuwo ninu iwe-ara yii, Mo n ṣe ifojusi awọn ìsopọ laarin akojọ ti a ko ni aifọwọyi. Awọn aṣàwákiri mọ pe ìjápọ ṣe diẹ sii lori oju-iwe ayelujara ju awọn ami miiran lọ, nitorina o rọrun lati gba awọn aṣàwákiri àgbà lati ni ibamu pẹlu awọn ohun ti o ba jẹ awọn ipo ti o bajẹ nigbati o ba so wọn pọ si ami tag (awọn itọpọ). Nítorí kọkọ kọ awọn ara-ara rẹ:
.tablist ni {} .tablist ni: hover {}Nitori awọn taabu yii yẹ ki o ṣiṣẹ bi awọn taabu ninu ohun elo kan, o fẹ ki gbogbo agbegbe ti taabu naa jẹ ṣalaye, kii ṣe ọrọ ti a ti sopọ mọ. Lati ṣe eyi, o ni lati yi iyipada A tag kuro ni ipo deede " inline " sinu iṣiro kan . àfihàn: dènà; (Ti o ba ni ife lati mọ diẹ sii nipa iyatọ, ka Block-Level vs. Election Elections .)
Lehin na, ọna ti o rọrun lati ṣe ipa awọn taabu rẹ lati wa ni ibamu pẹlu ara wọn, ṣugbọn si tun rọ lati ba iwọn ti ọrọ naa jẹ lati ṣe awọn fifa ọtun ati osi ni kanna. Mo ti lo awọn ohun elo ti o padadẹ lati pa oke ati isalẹ si 0 ati si ọtun ati osi si 1m. padding: 0 1m;
Mo tun yàn lati yọ ọna asopọ kuro, ki awọn taabu naa ko dabi awọn asopọ. Ṣugbọn ti o ba jẹ pe awọn olugbọ rẹ le daamu nipa eyi, lọ kuro ni ila yii. ọna asopọ-ọṣọ: kò;
Nipa fifi ipinlẹ ti o kere si agbegbe awọn taabu, o jẹ ki wọn dabi awọn taabu. Mo ti lo awọn ohun-ini ti a ti ni ihamọ lati fi agbegbe naa si ni ayika gbogbo awọn ẹgbẹ mẹrin: 0.06em lagbara # 000; Ati lẹhinna lo ohun - ini ti aala-isalẹ lati yọ kuro lati isalẹ. aala-isalẹ: 0;
Nigbana ni mo ṣe diẹ ninu awọn atunṣe si fonti, awọ, ati awọ lẹhin awọn taabu. Ṣeto awọn wọnyi si awọn aza ti o baamu aaye rẹ. fonti: igboya 0.88 / 2a arial, geneva, helvetica, sans-serif; awọ: # 000; lẹhin-awọ: #ccc;
Gbogbo awọn aṣa ti o wa loke yẹ ki o lọ si ayanfẹ .tablist ni kan, ofin naa ki wọn ba ni ipa lori awọn ami oran ni apapọ. Lẹhinna lati ṣe awọn taabu naa han diẹ ẹ sii, o yẹ ki o fi ofin kan diẹ si .tablist ni: hover.
Mo fẹ lati yi awọ ti ọrọ naa ati lẹhin wa pada lati ṣe agbejade pop nigbati o ba ṣii lori rẹ. lẹhin: # 3cf; awọ: #fff;
Ati pe mo ṣafikun olurannileti miiran si awọn aṣàwákiri ti mo fẹ ki asopọ naa ki o wa ni ṣiṣafihan. ohun-ọṣọ: kò; Ọna miiran ti o wọpọ ni lati tan awọn akọle pada si nigba ti o ba ni Asin lori taabu. Ti o ba fẹ ṣe eyi, yi i pada si ohun-ọṣọ: akọle;
Ṣugbọn Nibo ni CSS 3 wa?
Ti o ba ti gbọ ifojusi, o ti ṣe akiyesi pe ko si eyikeyi CSS 3 awọn aza ti o lo ninu iwe ara. Eyi ni anfani ti ṣiṣẹ ni eyikeyi aṣàwákiri tuntun, pẹlu Internet Explorer. Ṣugbọn o ko ṣe awọn taabu ti o dabi ohunkohun diẹ ẹ sii ju apoti apoti. Nipa fifi ikan-a-radius ipe-ara CSS 3 kan (ati pe o ni awọn ipe pataki-kiri-ẹrọ) o le ṣe awọn ẹgbẹ rẹ ni ayika, lati wo awọn taabu diẹ sii bi folda manila.
Awọn aza ti o yẹ ki o fi kun si .tablist ni ofin ni: -disitii-aala-oke-ọtun-radius: 0.50em; -initiipa-aala-oke-osi-radius: 0.50em; -moz-border-radius-topright: 0.50em; -moz-border-radius-topleft: 0.50em; laala-oke-ọtun-radius: 0.50em; laini-oke-osi-radius: 0.50em;
Awọn wọnyi ni awọn ọna-ara ikẹhin ti mo kowe:
.tablist ni {Àpapọ: Àkọsílẹ; padding: 0 1m; ohun-ọṣọ: kò; aala: 0.06em lagbara # 000; aala-isalẹ: 0; fonti: igboya 0.88 / 2a arial, geneva, helvetica, sans-serif; awọ: # 000; lẹhin-awọ: #ccc; / * CSS 3 eroja * / webkit-border-top-right-radius: 0.50em; -initiipa-aala-oke-osi-radius: 0.50em; -moz-border-radius-topright: 0.50em; -moz-border-radius-topleft: 0.50em; laala-oke-ọtun-radius: 0.50em; laini-oke-osi-radius: 0.50em; } .tablist ni kan: hover {lẹhin: # 3cf; awọ: #fff; ohun-ọṣọ: kò; }Pẹlu awọn aza wọnyi, o ni akojọ aṣayan ti o ṣiṣẹ ni gbogbo awọn aṣàwákiri pataki ati ki o wulẹ bi awọn iwe itẹjade ti o dara ni awọn aṣàwákiri ifura ni CSS 3. Oju-iwe keji yoo fun ọ ni aṣayan diẹ kan ti o le lo lati ṣe itọju rẹ paapa siwaju sii.
06 ti 06
Ṣe afihan Taabu ti isiyi
Ni HTML ti mo da, UL ni ọkan ninu awọn akojọ akojọ pẹlu ID kan. Eyi n gba ọ laaye lati fun IR ni oriṣiriṣi oriṣiriṣi lati awọn iyokù. Ipo ti o wọpọ julọ ni lati ṣe ki taabu ti isiyi duro ni ọna kan. Ọnà miiran lati ronu eyi ni pe o fẹ lati ṣaṣe awọn awọ ti o ko wa laaye. Lẹhinna o yipada nibiti id jẹ lori awọn oju-ewe miiran.
Mo ti ara mejeeji ni tag tag #current ati pẹlu #current A: hover sta ki awọn mejeeji wa ni oriṣiriṣi oriṣiriṣi. O le yi awọ pada, awọ lẹhin, paapaa iga, iwọn ati ideri ti opo naa. Ṣe awọn ayipada eyikeyi ti o ni oye ninu aṣa rẹ.
.tablist ni # lọwọlọwọ kan {awọ-awọ: # 777; awọ: #fff; } .tablist ni # lọwọlọwọ a: hover {lẹhin: # 39C; }Ati pe o ti ṣetan! O ti ṣẹda akojọ aṣayan nikan fun aaye ayelujara rẹ.