01 van 06
Hoe om Navigasie te skep met CSS en geen prente
Navigasie op webblaaie is 'n vorm van 'n lys, en die gevoude navigasie is soos 'n horisontale lys. Dit is redelik maklik om 'n horisontale bladnavigasie met CSS te skep, maar CSS 3 gee ons 'n paar ekstra gereedskap om hulle nog beter te laat lyk.
Hierdie handleiding sal u deur die HTML en CSS benodig om 'n CSS-oortjie-menu te skep. Klik op die skakel om te sien hoe dit sal lyk.
Hierdie gekartelde spyskaart gebruik geen beelde , net HTML en CSS 2 en CSS 3. Dit kan maklik geredigeer word om meer oortjies by te voeg of die teks daarin te verander.
Browser Ondersteuning
Hierdie oortjie kieslys sal in alle groot blaaiers werk . Internet Explorer sal nie die afgeronde hoeke wys nie, maar andersins sal dit tabs soos Firefox, Safari, Opera en Chrome wys.
02 van 06
Skryf jou kieslys
Alle navigasie-spyskaarte en oortjies is eintlik net 'n ongeordende lys. So, die eerste ding wat jy wil doen, is om 'n ongeordende lys van skakels te skryf na waar jy wil hê dat jou tabblad navigasie gaan.
Hierdie handleiding neem aan dat jy jou HTML in 'n teksredakteur skryf en dat jy weet waar die HTML vir jou spyskaart op jou webblad geplaas moet word.
Skryf jou ongeordende lys soos volg:
- class = "tablist">
- CSS 3
- id = "huidige"> Tabs
- vir
- spyskaarte
Jy sal sien dat die kode twee dinge uitroep: class = "tablist" en id = "current". Die eerste is nodig . As u nie die klaslysklas op u ongeordende lys plaas nie, sal die oortjies nie werk nie. Die tweede is opsioneel. Plaas die id = "huidige" op watter blad jy op daardie bladsy uitgelig wil word. Ek gebruik dit gewoonlik om die bladsy wat ek aan is, uit te lig, maar jy kan dit gebruik om die belangrikste blad te verlig. Of jy kan dit heeltemal verwyder.
03 van 06
Begin met die wysiging van jou stylblad
U kan 'n eksterne stylblad of 'n interne stylblad gebruik . Die voorbeeld menu bladsy gebruik 'n interne styl blad in die
van die dokument.Eerstens sal ons die UL self vorm
Dit is waar ons die klaslyslys gebruik. In die HTML. Eerder as om die UL-tag te styl, wat alle ongeordende lyste op jou bladsy sal styl, moet jy net die UL-klas styl. tablist So die eerste inskrywing in jou CSS moet wees:
.tablist {}Ek hou van die eindige krulhakie (}) voor die tyd, so ek vergeet dit nie later nie.
Terwyl ons 'n ongeordende lysetiket gebruik vir die oortjielyslys, maar ons wil nie hê dat koeëls of nommers kruip nie, moet u die eerste styl wat u moet byvoeg. lys-styl: geen; Dit vertel die leser dat terwyl dit 'n lys is, dit 'n lys is sonder voorafbepaalde style (soos koeëls of nommers).
Dan kan jy die hoogte van jou lys stel om die spasie wat jy wil hê, te pas. Ek het 2em vir my lengte gekies, aangesien dit dubbel die standaard lettergrootte is, en gee ongeveer 'n halwe em bo en onder die teks van die oortjie. hoogte: 2em; Maar jy kan jou wydte bepaal volgens watter grootte jy wil. UL-etikette sal outomaties 100% van die wydte opneem. As jy dit nie kleiner as die huidige houer wil hê nie, kan jy die breedte uitlaat.
Ten slotte, as u meesterstylblad nie vooraf ingestel is vir UL- en OL-etikette nie, sal u dit wil plaas. Dit beteken dat u die grense, kantlyne en opskrifte van u UL moet afskakel. padding: 0; marge: 0; grens: geen; As u die UL-tag alreeds herstel het, kan u die marges, opskrifte of grense verander na iets wat by u ontwerp pas.
Jou finale .tablist-klas moet soos volg lyk:
.tablist {list-style: none; hoogte: 2em; padding: 0; marge: 0; grens: geen; }04 van 06
Die wysiging van die LI-lysitems
Sodra jy jou ongeordende lys gestileer het, moet jy die LI-etikette daarin binneste styl. Anders sal hulle optree soos 'n standaardlys en elke skuif na die volgende reël sonder om u oortjies korrek te plaas.
Stel eers jou styl eiendom op:
.tablist li {}Dan wil jy jou tabs dryf sodat hulle op die horisontale vlak reël. dryf: links;
En moenie vergeet om 'n mate tussen die tabs te voeg nie, sodat hulle nie saamsmelt nie. marge-reg: 0.13em;
Jou li style moet só lyk:
.tablist li (float: left; marge-reg: 0.13em; }05 van 06
Die tabs lyk soos Tabs met CSS 3
Om die meeste van die swaar opheffing in hierdie stylblad te doen, rig ek die skakels in die ongeordende lys. Browsers erken dat skakels meer op 'n webblad as ander etikette doen. Dit is dus makliker om ouer blaaiers te kry om te voldoen aan dinge soos hover-state as jy dit aan die anker-tag (skakels) heg. Skryf eers jou styl eienskappe neer:
.tablist li a {} .tablist li a: hover {}Aangesien hierdie oortjies soos tabs in 'n program moet optree, wil jy hê dat die hele gedeelte van die oortjie kliekbaar is, nie net die gekoppelde teks nie. Om dit te kan doen, moet jy die A-tag omskakel van die normale " inlyn " -staat in 'n blokelement . vertoon: blok; (As jy belangstel om meer te weet oor die verskil, lees Blokvlak vs. Inlyn-elemente .)
Dan, 'n maklike manier om jou tabs te dwing om simmetries met mekaar te wees, maar steeds buig om die wydte van die teks te pas, is om die regterkant en linker padding dieselfde te maak. Ek het die korthandige eienskap gebruik om die boonste en onderste na 0 te stel en die regterkant en links na 1em. padding: 0 1em;
Ek het ook gekies om die skakel onderstreep te verwyder, sodat die tabbladen minder lyk soos skakels. Maar as jou gehoor daardeur verwar word, laat hierdie reël uit. skakel-decoration: none;
Deur 'n dun rand om die tabs te plaas, laat dit hulle soos tabs lyk. Ek het die grensskorthand eienskap gebruik om die grens rondom al vier kante grens te plaas: 0.06em soliede # 000; En dan het die grens-onder- eiendom gebruik om dit van onder af te verwyder. grens-bottom: 0;
Toe het ek 'n paar aanpassings aangebring aan die lettertipe, kleur en agtergrond van die oortjies. Stel dit op die style wat by jou werf pas. font: bold 0.88em / 2em arial, geneva, helvetica, sans-serif; kleur: # 000; agtergrond-kleur: #ccc;
Al die bogenoemde style moet in die selector .tablist li a, die reël, sodat hulle die ankermerke in die algemeen beïnvloed. As u die tabbladen meer kliek, dan moet u 'n paar reël .tablist li a: hover voeg.
Ek hou daarvan om die kleur van die teks en agtergrond te verander om die oortjie te laat pop wanneer jy die muis daaroor beweeg. agtergrond: # 3cf; kleur: #fff;
En ek het nog 'n herinnering aan die blaaiers ingesluit wat ek wil hê die skakel moet nie onderstreep word nie. text-decoration: none; Nog 'n algemene metode is om die onderstreep weer aan te draai wanneer jy die muis oor die oortjie beweeg. As jy dit wil doen, verander dit na teksversiering: onderstreep;
Maar waar is die CSS 3?
As jy aandag gegee het, het jy waarskynlik opgemerk dat daar geen CSS 3-style is wat in die stylblad gebruik is nie. Dit het die voordeel om in enige moderne blaaier te werk, insluitend Internet Explorer. Maar dit maak nie die tabs lyk soos enigiets meer as vierkantige bokse nie. Deur 'n CSS 3-styl oproep-radius toe te voeg (en dit is geassosieerde blaaierspesifieke oproepe), kan jy die rande afgerond, om meer soos tabs op 'n manila-lêergids te lyk.
Die style wat jy by die .tablist li-reël moet voeg, is: -webkit-grens-bo-regs-radius: 0.50em; -webkit-grens-top-linker-radius: 0.50em; -moz-grens-radius-topright: 0.50em; -moz-grens-radius-topleft: 0.50em; grens-top-regs-radius: 0.50em; grens-top-links-radius: 0.50em;
Dit is die finale stylreëls wat ek geskryf het:
.tablist li a {display: block; padding: 0 1em; text-decoration: none; grens: 0.06em soliede # 000; grens-bottom: 0; font: bold 0.88em / 2em arial, geneva, helvetica, sans-serif; kleur: # 000; agtergrond-kleur: #ccc; / * CSS 3 elemente * / webkit-grens-bo-regs-radius: 0.50em; -webkit-grens-top-linker-radius: 0.50em; -moz-grens-radius-topright: 0.50em; -moz-grens-radius-topleft: 0.50em; grens-top-regs-radius: 0.50em; grens-top-links-radius: 0.50em; } .tablist li a: hover (agtergrond: # 3cf; kleur: #fff; text-decoration: none; }Met hierdie style het jy 'n oortjie-kieslys wat in alle groot blaaiers werk en lyk soos lekker gedrukte oortjies in CSS 3-voldoen blaaiers. Die volgende bladsy gee jou nog een opsie wat jy kan gebruik om dit nog meer aan te trek.
06 van 06
Merk die huidige oortjie
In die HTML wat ek geskep het, het die UL een lys element met 'n ID. Dit laat jou toe om een LI 'n ander styl van die res te gee. Die mees algemene situasie is om die huidige blad op een of ander manier uit te steek. Nog 'n manier om hieraan te dink, is dat jy die oortjies wat nie lewendig is, wil grys nie. Jy verander dan waar die ID op die verskillende bladsye is.
Ek styl beide die #stroming A-tag sowel as die #stroming A: hover sta sodat beide effens anders is. U kan die kleur, agtergrondkleur, selfs die hoogte, breedte en opvulling van die element verander. Maak enige veranderinge sinvol in jou ontwerp.
.tablist li # current a (agtergrond-kleur: # 777; kleur: #fff; } .tablist li # current a: hover (agtergrond: # 39C; }En jy is klaar! Jy het pas 'n oortjie spyskaart vir jou webwerf geskep.