01 de 06
Kiel Krei pestañas Navigado kun CSS kaj Neniu Bildoj
Navigado en retpaĝoj estas formo de listo, kaj pestañas navigado estas kiel horizontala listo. Ĝi estas sufiĉe facile krei horizontalan pestaña navigado kun CSS, sed CSS 3 donas al ni kelkajn pliajn ilojn por fari ilin aspekti eĉ pli belaj.
Ĉi tiu lernilo prenos vin tra la HTML kaj CSS bezonas krei CSS pestañas menuon. Alklaku tiun ligilon por vidi kiel aspektos.
Ĉi tiu pestaña menuo ne uzas bildojn , nur HTML kaj CSS 2 kaj CSS 3. Ĝi povas esti facile redaktata por aldoni pli langetoj aŭ ŝanĝi la tekston en ili.
Foliumilo Subtenado
Ĉi tiu langeto-menuo funkcios en ĉiuj ĉefaj retumiloj . Interreta esploristo ne montros la rondajn angulojn, sed alie, ĝi montros pestaĝojn kiel Firefox, Safaro, Opero, kaj Chrome.
02 de 06
Skribu vian menuon
Ĉiuj navigaj menuoj kaj pestañas estas vere nur senordigita listo. Do la unua afero, kiun vi volas fari estas skribi neordigitan liston de ligiloj al kie vi volas, ke via pestaña navigado iros.
Ĉi tiu lernilo supozas, ke vi skribas vian HTML en teksta redaktilo kaj ke vi scias, kie meti la HTML por via menuo en via retpaĝo.
Skribu vian neordigitan liston kiel ĉi:
- class = "tablist">
- CSS 3
- id = "aktuala"> Taboj
- Por
- Menuoj
Vi rimarkos, ke la kodo nomas du aferojn: class = "tablist" kaj id = "nun". La unua estas postulita . Se vi ne metas la tablist-klason sur vian neordigitan liston, la langetoj ne funkcios. La dua estas laŭvola. Metu la id = "nuna" en kiom ajn pestaña vi ŝatus esti reliefigita sur tiu paĝo. Mi kutime uzas ĉi tion por reliefigi la paĝon, kiun mi havas, sed vi povas uzi ĝin por reliefigi la plej gravan langeton. Aŭ vi povas forigi ĝin tute.
03 de 06
Komenci Redaktante Vian Stilon-Folion
Vi povas uzi ĉu ekstera stilo-folio aŭ interna stilo-folio . La paĝo de specimena menuo uzas interna stila folio en la
Unue Ni Stilos la UL Sin
Jen kie ni uzas la klasan langeton .in la HTML. Prefere ol desegni la UL-etikedon, kiu stilus ĉiujn neordigitajn listojn en via paĝo, vi devas stiligi nur la UL-klason. tablist Do la unua eniro en via CSS devus esti:
.tablist {}Mi ŝatas enmeti la finan buklan bracegon antaŭ la tempo, do mi ne forgesas ĝin poste.
Dum ni uzas neordigitan list-etikedon por la pesta menuo, sed ni ne volas ke kugloj aŭ nombroj rampas. Do la unua stilo, kiun vi devas aldoni, estas. listo-stilo: neniu; Ĉi tio rakontas al la retumilo, ke dum ĝi estas listo, ĝi estas listo sen antaŭdifinitaj stiloj (kiel kugloj aŭ nombroj).
Tiam vi povas agordi la altecon de via listo por kongrui kun la spaco, kiun vi volas plenigi. Mi elektis 2em por mia alteco, ĉar tio estas duobla norma tipara grandeco, kaj donas proksimume duonon de supre kaj sub la teksto de la langeto. alteco: 2em; Sed vi povas agordi vian larĝecon al kiom ajn grandeco vi ŝatus. UL-etikedoj aŭtomate prenos 100% de la larĝo, do se vi deziras, ke ĝi estas pli malgranda ol la nuna ujo, vi povas forlasi la larĝecon.
Fine, se via majstila folio ne havas presetojn por UL kaj OL-etikedoj, vi volas enmeti ilin. Tio signifas, ke vi forĵetu la limojn, randojn kaj kompletigon de via UL. Plenigado: 0; rando: 0; limo: neniu; Se vi jam restarigis la UL-etikedon, vi povas ŝanĝi la randojn, kompletigon, aŭ limon al io, kio konvenas kun via dezajno.
Via fina .tablista klaso devus aspekti tiel:
.tablist {listo-stilo: neniu; alteco: 2em; Plenigado: 0; rando: 0; limo: neniu; }04 de 06
Redaktante la LI-Listo Erojn
Unufoje vi stiligis vian neordigitan liston, vi devas stiligi la LI-etikedojn ene de ĝi. Alie, ili agos kiel norma listo kaj ĉiu moviĝos al la sekva linio sen meti viajn pestaĵojn ĝuste.
Unue, starigu vian stilon posedaĵon:
.tablist li {}Tiam vi volas flosi viajn langetoj tiel ke ili aliĝas sur la horizontala ebeno. flosas: maldekstre;
Kaj ne forgesu aldoni iun randon inter la pestañas, do ili ne kunfandas kune. rando-dekstra: 0.13em;
Viaj li-stiloj devus aspekti kiel ĉi:
.tablist li {flosas: maldekstre; rando-dekstra: 0.13em; }05 de 06
Farante la Tabs Rigardu Tabs kun CSS 3
Por fari la plej multajn pezajn levojn en ĉi tiu stilo, mi celas la ligilojn ene de la neordigita listo. Foliumiloj agnoskas, ke ligiloj faras pli en retpaĝaro ol aliaj etikedoj, do pli facile atingi pli malnovajn foliumilojn plenumi aferojn kiel ŝvebi statojn, se vi aliĝas ilin al la ankro etikedo (ligiloj). Do unue skribu viajn stilojn:
.tablist li a {} .tablist li a: ŝvebu {}Ĉar ĉi tiuj pestañas devus agi kiel pestañas en apliko, vi volas ke la tuta areo de la langeto estu klakebla, ne nur la ligita teksto. Por fari tion, vi devas konverti la A etikedon de la normala " inline " ŝtato en blokan elementon . montriĝo: bloko; (Se vi interesas scii pli pri la diferenco, legu Bloknivelo vs. Inline Elements .)
Tiam, facila maniero por devigi viajn langetoj simetrike unu kun la alia, sed ankoraŭ fleksebla por ĝustigi la larĝecon de la teksto estas fari la dekstran kaj maldekstran kompletigon. Mi uzis la kompletigan taŭgan proprieton por starigi supre kaj malsupre al 0 kaj dekstre kaj maldekstren al 1em. Plenigado: 0 1em;
Mi ankaŭ elektis forigi la ligon substrekas, tiel ke la pestañas aspektas malpli kiel ligiloj. Sed se via aŭdienco povus esti konfuzita de tio, forlasu ĉi tiun linion. ligilo-dekoracio: nenio;
Metante maldikan limon ĉirkaŭ la pestañas, ĝi faras ilin aspekti kiel langetoj. Mi uzis la landliman taŭgan proprieton por meti la limon ĉirkaŭ la kvar flankoj limo: 0.06em solida nombro 000; Kaj tiam uzis la landlima fundo por forigi ĝin de la fundo. limo-fundo: 0;
Tiam mi faris iujn adaptojn al la tiparo, koloro, kaj fonkoloro de la pestañas. Fiksu ĉi tiujn al la stiloj, kiuj kongruas kun via retejo. tiparo: aŭdaca 0.88em / 2em arial, geneva, helvetica, sans-serif; koloro: # 000; fonkoloro: #ccc;
Ĉiuj supraj stiloj devas iri en la elektilo .tablist li a, la regulo por ke ili ĝenerale influas la ankrumetikajn etikedojn. Tiam por fari la langetoj aperas pli klareblaj, vi devus aldoni kelkajn ŝtatajn regulojn .tablist li a: hover.
Mi ŝatas ŝanĝi la koloron de la teksto kaj fono por fari la langeton popo kiam vi musos ĝin. fono: # 3cf; koloro: #fff;
Kaj mi inkludis alian rememorigilon al la retumiloj, kiujn mi volas, ke la ligo restos ne submetita. teksto-dekoracio: neniu; Alia komuna metodo estas turni la substrekon reen kiam vi muso super la langeto. Se vi volas fari tion, ŝanĝu ĝin al teksto-dekoracio: subskribu;
Sed Kie estas la CSS 3?
Se vi atentis, vi verŝajne rimarkis, ke ne ekzistas CSS-stiloj uzataj en la stilo-folio. Ĉi tio havas la avantaĝon funkcii en iu moderna retumilo, inkluzive de Interreto Explorer. Sed ĝi ne faras ke la pestañas aspektas kiel io pli ol kvadrataj skatoloj. Aldonante laŭvokitan limon-radiuson de CSS 3 (kaj la alvokoj de specifaj retumiloj) vi povas fari la randojn rondigitaj, por aspekti pli kiel langetoj en manila dosierujo.
La stiloj, kiujn vi devas aldoni al la .tablist li regulo estas: -webkit-border-top-right-radius: 0.50em; -bendaĵo-limo-supro-maldekstra-radiuso: 0.50em; -moz-limo-radiuso-dekstra: 0.50em; -moz-limo-radiuso-topletaĵo: 0.50em; limo-supre-dekstra radiuso: 0.50em; limo-supro-maldekstra-radiuso: 0.50em;
Ĉi tiuj estas la finaj reguloj, kiujn mi skribis:
.tablist li a {montriĝo: bloko; Plenigado: 0 1em; teksto-dekoracio: neniu; limo: 0.06em solida # 000; limo-fundo: 0; tiparo: aŭdaca 0.88em / 2em arial, geneva, helvetica, sans-serif; koloro: # 000; fonkoloro: #ccc; / * CSS 3 elementoj * / webkit-border-top-right-radius: 0.50em; -bendaĵo-limo-supro-maldekstra-radiuso: 0.50em; -moz-limo-radiuso-dekstra: 0.50em; -moz-limo-radiuso-topletaĵo: 0.50em; limo-supre-dekstra radiuso: 0.50em; limo-supro-maldekstra-radiuso: 0.50em; } .tablist li a: ŝvebu {background: # 3cf; koloro: #fff; teksto-dekoracio: neniu; }Kun ĉi tiuj stiloj, vi havas pestañas menuon, kiu funkcias en ĉiuj ĉefaj retumiloj kaj aspektas kiel belaj presitaj pestañas en CSS 3 kompataj retumiloj. La sekva paĝo donas al vi unu pli eblon, kiun vi povas uzi por vesti ĝin eĉ pli.
06 de 06
Elstreku la Nuna Tab
En la HTML mi kreis, la UL havis unu listan elementon per ID. Ĉi tio permesas doni al vi alian malsaman stilon de la resto. La plej ofta situacio estas krei la nunan pestaĵon elstaras de iu maniero. Alia maniero por pensi pri tio estas, ke vi volas grizigi la pestaĵojn, kiuj ne vivas. Vi tiam ŝanĝas, kie la ido estas sur la malsamaj paĝoj.
Mi stiras ambaŭ la #current A etikedo tiel kiel la #currenta A: ŝvebi sta tiel ke ambaŭ estas iomete malsamaj. Vi povas ŝanĝi la koloron, fonkoloron, eĉ la altecon, larĝon kaj kompletigon de tiu elemento. Faru kiajn ŝanĝojn havas senton en via dezajno.
.tablist li # nuna {background-color: # 777; koloro: #fff; } .tablist li # nuna a: ŝvebu {background: # 39C; }Kaj vi fariĝis! Vi ĵus kreis pestañas menuon por via retejo.