01 ta '06
Kif Oħloq Navigation Tabbed ma 'CSS u Nru Stampi
In-navigazzjoni fuq il-paġni tal-web hija forma ta 'lista, u n-navigazzjoni bit-tabbed hija bħal lista orizzontali. Huwa pjuttost faċli li tinħoloq navigazzjoni bil-pannelli orizzontali ma 'CSS, iżda CSS 3 jagħtina ftit aktar għodda biex tagħmilhom look even nicer.
Dan it-tutorja ser iwassal permezz tal-HTML u s-CSS meħtieġa biex toħloq menu bit-tabella tas-CSS. Ikklikkja fuq dik ir-rabta biex tara kif se tfittex.
Dan il-menu tabbed juża l- ebda immaġni , sempliċement HTML u CSS 2 u CSS 3. Jista 'jiġi editjat faċilment biex iżid aktar tabs jew ibiddel it-test fihom.
Appoġġ għall-Browser
Dan il-menu tal-tab se jaħdem fil -browsers ewlenin kollha . L-Internet Explorer mhux se juri l-kantunieri fit-tond, iżda inkella, se juri tabs bħad Firefox, Safari, Opera u Chrome.
02 ta '06
Ikteb il-Lista tal-Menu tiegħek
Il-menus u t-tabelli kollha tan-navigazzjoni huma tassew biss lista mhux organizzata. Allura l-ewwel ħaġa li trid tagħmel hu li tikteb lista mhux immarkata ta 'links għal fejn trid li d-navigazzjoni bil-linka tiegħek tmur.
Dan tutorial jassumi li qed tikteb il-HTML tiegħek f'edukatur tat-test u li taf fejn tista 'tqiegħed l-HTML għall-menu tiegħek fuq il-paġna web tiegħek.
Ikteb il-lista mhux immarkata tiegħek bħal din:
- klassi = "tablist">
- CSS 3
- id = "kurrenti"> Tabs
- Għal
- Menus
Int tinduna li l-kodiċi jsejjaħ żewġ affarijiet: klassi = "tablist" u id = "kurrenti". L-ewwel hija meħtieġa . Jekk ma tpoġġi l-klassi tablist fuq il-lista mhux immarkata tiegħek, it-tabs ma jaħdmux. It-tieni hija fakultattiva. Poġġi l-id = "kurrenti" fuq liema tab għandek tixtieq tiġi enfasizzata f'dik il-paġna. Normalment nuża dan biex tenfasizza l-paġna li għandi, iżda tista 'tużaha biex tenfasizza l-aktar tab importanti. Jew tista 'tneħħiha kompletament.
03 ta '06
Ibda L-Editjar tal-Karta tal-Istil tiegħek
Tista 'tuża folja ta' stil estern jew folja ta ' stil intern . Il-paġna tal-menu tal-kampjun tuża folja ta 'stil interna fid-
tad-dokument.L-Ewwel We'll Style l-UL innifsu
Dan huwa fejn nużaw il-tablist tal-klassi. Fl-HTML. Minflok ma grafika t-tikketta UL, li tkun stil il-listi kollha mhux immarkati fuq il-paġna tiegħek, għandek tuża biss il-klassi UL. tablist Allura l-ewwel daħla fis-CSS tiegħek għandha tkun:
.tablist {}Qed nagħmel fit-tmiem tal-kaboċċi (}) qabel iż-żmien, għalhekk ma ninsewx aktar tard.
Filwaqt li aħna qed nużaw tikketta tal-lista mhux organizzata għal-lista tal-menu tab, iżda ma rridux xi balal jew numri creeping in. Allura l-ewwel stil li għandek iżżid hu. list-style: xejn; Dan jgħidlek lill-browser li filwaqt li hija lista, hija lista mingħajr stili predeterminati (bħal balal jew numri).
Imbagħad, tista 'tistabbilixxi l-għoli tal-lista tiegħek biex tqabbel l-ispazju li trid timla. Jiena għażilt 2em għall-għoli tiegħi, għax dak huwa d-doppju tad-daqs standard tat-tipa, u jagħti madwar nofs em fuq u taħt it-test tal-tab. għoli: 2em; Imma tista 'tissettja l-wisa' tiegħek għal kull daqs li tixtieq. It-tikketti UL jieħdu awtomatikament 100% tal-wisa ', hekk sakemm ma tkunx tixtieq li tkun iżgħar mill-kontenitur attwali, tista' tħalli l-wisa '.
Fl-aħħarnett, jekk il- karta tal-istil tal - kaptan ma jkollhiex presets għal tikketti UL u OL, int trid ipoġġihom. Dan ifisser li għandek itfi l-fruntieri, il-marġni u l-ikkuttunar fuq UL tiegħek. padding: 0; marġni: 0; fruntiera: ħadd; Jekk diġà reset it-tikketta UL, tista 'tbiddel il-marġini, il-padding jew il-fruntiera għal xi ħaġa li taqbel mad-disinn tiegħek.
Il-klassi finali tiegħek għandha tidher bħal din:
.tablist {list-style: xejn; għoli: 2em; padding: 0; marġni: 0; fruntiera: ħadd; }04 ta '06
Editjar ta 'l-Oġġetti tal-Lista LI
Ladarba inti tkun styled lista unordered tiegħek, inti għandek bżonn stil-tikketti LI ġewwa fih. Inkella, dawn se jaġixxu bħal lista standard u kull bidla fil-linja li jmiss mingħajr ma tpoġġi t-tabs tiegħek b'mod korrett.
L-ewwel, waqqaf il-proprjetà ta 'l-istil tiegħek:
.tablist li {}Imbagħad inti tixtieq li jżommu flas-tabs tiegħek sabiex ikunu line up fuq il-pjan orizzontali. float: left;
U tinsiex li żżid xi marġni bejn it-tabs, sabiex dawn ma jingħaqdux flimkien. dritt tal-marġni: 0.13em;
L-istili tiegħek għandhom ikunu bħal dawn:
.tabblist li {float: left; dritt tal-marġni: 0.13em; }05 ta '06
Nagħmlu l-Tabs Ħares Bħall Tabs b'CSS 3
Biex tagħmel ħafna mill-irfigħ qawwi f'din il-folja tal-istil, jien immirat lejn ir-rabtiet fi ħdan il-lista mhux immarkata. Browsers jirrikonoxxu li r-rabtiet jagħmlu aktar fuq webpage minn tikketti oħra, u għalhekk huwa aktar faċli li browsers aktar anzjani jikkonformaw ma 'affarijiet bħal dawk li jdoqqu' l hinn jekk twaħħalhom mat-tikketta tal-ankra (links). Allura l-ewwel tikteb il-proprjetajiet ta '
.tablist li a {} .tablist li a: hover {}Minħabba li dawn it-tabs għandhom jaġixxu bħal tabs f'applikazzjoni, trid li ż-żona kollha tat-tab tkun ikklikkja, mhux biss it-test marbut. Biex tagħmel dan, għandek tikkonverti l-lametta A mill-istat " inline " normali tagħha għal element ta ' blokka . wiri: blokka; (Jekk int interessat li tkun taf aktar dwar id-differenza, aqra Elementi ta 'Livell-Livell vs. Inline ).
Imbagħad, mod faċli biex twaħħal it-tabs tiegħek ikunu simetriċi ma 'xulxin, iżda xorta tiffissa biex taqbel mal-wisa' tat-test huwa li tagħmel il-padding dritt u tax-xellug l-istess. Jiena użajt il-proprjetà tat-tajjar tal-padding biex nistabbilixxu l-parti ta 'fuq u ta' isfel għal 0 u l-lemin u xellug għal 1em. ikkuttunar: 0 1em;
Jiena wkoll għażel li tneħħi r-rabta jenfasizza, sabiex it-tabs iħarsu inqas il-links. Imma jekk l-udjenza tiegħek tista 'tkun konfuża minn dik, ħalli barra din il-linja. link-dekorazzjoni: xejn;
Billi tpoġġi fruntiera rqiqa madwar it-tabs, tagħmilhom look like tabs. Jiena użajt il-proprjetà tal-qasba tal-fruntiera biex tpoġġi l-fruntiera madwar l-erba 'naħat kollha tal-fruntiera: 0.06em solidu # 000; U mbagħad użat il - proprjetà tal-qiegħ tal-qiegħ biex tneħħiha mill-qiegħ. qiegħ tal-qiegħ: 0;
Imbagħad għamilt xi aġġustamenti għat-tipa, il-kulur u l-kulur tal-isfond tat-tabs. Issettja dawn l-istili li jaqblu mas-sit tiegħek. font: b'tipa grassa 0.88em / 2em arial, ġeneva, helvetica, sans-serif; kulur: # 000; sfond kulur: #ccc;
L-istili ta 'hawn fuq kollha għandhom jidħlu fis-selettur .tablist li a, ir-regola sabiex dawn jaffettwaw it-tikketti tal-ankri b'mod ġenerali. Imbagħad biex it-tabs jidhru aktar ikklikkja, għandek iżżid xi regola tal-istat .tablist li a: imbagħad.
Nixtieq inbiddel il-kulur tat-test u l-isfond biex tagħmel il-tab pop meta tpoġġi fuqha. isfond: # 3cf; kulur: #fff;
U jien inkludiet tfakkira oħra lill-browsers li nixtieq li r-rabta tibqa 'mhux enfasizzata. dekorazzjoni tat-test: ħadd; Metodu ieħor komuni huwa li ddawwar l-enfasi fuq meta timmarka fuq il-tab. Jekk trid tagħmel dan, ibdelha għal dekorazzjoni tat-test: tissottolinja;
Iżda Fejn hi s-CSS 3?
Jekk kont qed tingħata attenzjoni, probabilment ħadt nota li ma kienx hemm stili CSS 3 użati fil-folja ta 'l-istil. Dan għandu l-vantaġġ li jaħdem fi kwalunkwe browser modern, inkluż l-Internet Explorer. Imma ma tagħmilx il-Korpi għal Valutazzjoni Teknika bħala xejn aktar minn kaxex kwadri. Biż-żieda ta 'radju tal-fruntiera tas-sejħa stil CSS 3 (u s-sejħiet speċifiċi tal-browser assoċjati) tista' tagħmel it-truf arrotondati, biex tħares aktar bħal tabs fuq manila folder.
L-istili li għandek iżżid mal-.tablist li regola huma: -webkit-border-top-right-radius: 0.50em; -webkit-border-top-left-radius: 0.50em; -moz-border-radius-topright: 0.50em; -moz-border-radius-topleft: 0.50em; raġġ tal-lemin fuq il-fruntiera: 0.50em; tar-raġġ tax-xellug fuq il-fruntiera: 0.50em;
Dawn huma r-regoli tal-istil finali li kiteb:
.tablist li a {display: block; ikkuttunar: 0 1em; dekorazzjoni tat-test: ħadd; fruntiera: 0.06em solidu # 000; qiegħ tal-qiegħ: 0; font: b'tipa grassa 0.88em / 2em arial, ġeneva, helvetica, sans-serif; kulur: # 000; sfond kulur: #ccc; / * Elementi CSS 3 * / webkit-border-top-right-radius: 0.50em; -webkit-border-top-left-radius: 0.50em; -moz-border-radius-topright: 0.50em; -moz-border-radius-topleft: 0.50em; raġġ tal-lemin fuq il-fruntiera: 0.50em; tar-raġġ tax-xellug fuq il-fruntiera: 0.50em; } .tablist li a: hover {background: # 3cf; kulur: #fff; dekorazzjoni tat-test: ħadd; }B'dawn l-istili, għandek menu tabbed li jaħdem fil-browsers ewlenin kollha u tidher qisha tabs sbieħ stampati f'laxxaturi konformi CSS 3. Il-paġna li jmiss tagħtik għażla oħra li tista 'tuża biex tilbesha saħansitra aktar.
06 ta '06
Irreferek it-Tab kurrenti
Fl-HTML I maħluqa, l-UL kellha element ta 'lista waħda b'ID. Dan jippermettilek tagħti lil wieħed LI stil differenti mill-bqija. L-iktar sitwazzjoni komuni hija li t-tab kurrenti jispikka b'xi mod. Mod ieħor biex wieħed jaħseb dwar dan huwa li inti tixtieq li tfarrak it-tabs li mhumiex ħajjin. Imbagħad ibdel fejn l-id hija fuq il-paġni differenti.
I stil kemm il-tikketta # kurrenti kif ukoll il-kurrent # A: itfi sta sabiex iż-żewġ huma ftit differenti. Tista 'tbiddel il-kulur, il-kulur fl-isfond, anke l-għoli, il-wisa' u l-ikkuttunar ta 'dak l-element. Agħmel kwalunkwe tibdil li jagħmel sens fid-disinn tiegħek.
.tablist li # current a {isfond-kulur: # 777; kulur: #fff; } .tablist li # kurrenti a: hover {background: # 39C; }U qed isir! Int għadek ħolqu menu tabbed għall-websajt tiegħek.