01 of 06
Çawa ku bi CSS û No Images bi Navnîşa Tabbed Navigation çêbike
Navîgasyon li ser malperên navnîşan eşkere ye, û navîgasyonê tabbed wekî mîna lîstek horizontal e. Vê hêsantir e ku ji bo CSS-ê navîgasyonê ya horizontal tabbed biafirîne, lê CSS 3- sê meha hinek alavên me dike ku ji hêla xwe re xuya dike.
Ev tutorial dê ji hêla HTML û CSS dixwaze ku menuê tabbedê ava bike. Li ser vê rûpelê bitikîne ku bibînin ka ew ê çawa bibînin.
Dema vê tabbedê wêneyan tune , tenê HTML û CSS 2 û CSS. 3. Ew bi hêsanî tête guherîn dikare ji bo pirtûkên nû ve zêde bike an jî di nav wan de veguherînin.
Support Browser
Mîhengê vê tablo dê di hemû browseyên mezin de xebitîne. Wek explorer Internet dê êkûpêk nedîtin, lê din, ew ê wekî Firefox, Safari, Opera, û Zebûr nîşan dide.
02 of 06
Lîsteya Mîhengê binivîse
Hemû mîhengên navîgasyon û taban bi rastî tenê lîstek bêhempa ne. Ji ber vê yekê yekem tiştê ku hûn dixwazin dixwazin lîsteya nehebkirî ya girêdanên ku hûn dixwazin ku hûn dixwazin navîgasyonê veguherîna xwe ya tabbed.
Vê tutorial ev e ku tête ku hûn di HTML-ê de edîtorê nivîskî nivîskî binivîsin û hûn dizanin ku li malpera xwe li cîhê malpera xwe ji HTML-ê re cîh bikin.
Lîsteya xwe ya nenaskirî binivîse like this:
- class = "tablist">
- CSS 3
- id = "niha"> Tabs
- Bo
- Menus
Hûn dizanin ku kodê du tiştan digire: class = "tabul" û id = "niha". Yekem pêwîst e . Ger hûn lîsteya pirtûkxaneyê li ser lîsteya unorganized do not put, lêbigere dê kar nekin. Ya duyemîn e. Li ser vê rûpelê ku tu dixwazî tabloyê bikişîne id id "" niha "bînin. Ez bi gelemperî vê bikar tîne ku da ku ez li ser vê rûpelê bikişînin, lê hûn dikarin bikar bînin ku tabloya herî girîng aşkere bikin. An jî hûn dikarin bi temamî derxînin.
03 of 06
Guhertina Weqfa Xwe Destpêk Bike
Hûn dikarin an pirtûka stîrek an an çarçoveya stîra navxweyî bikar bînin. Peldanka menuê li ser sernavê belgeya şêweya navxweyî tê bikaranîn.
Berî em ê bi navê UL
Ev e ku em tabloyek dersa bikar bînin .Di HTML de. Ji bila tagê UL ê, ku lîsteya hemî unordered li ser rûpela te dê tevlihev bikin, divê hûn tenê çîna UL-style. Ji ber vê yekê pirtirkêmtirîn di navnîşana CSS de divê bibe:
.tablist {}Ez dixwazim ku di demên pêşî de çepikêşî bidim (}) pêşî, da ku ez vê paşê jibîr bikim.
Dema ku em ji bo lîsteya tabloya tablo ya bêhempa tê bikar anîn, lê em ne naxwazin ku tu gulan an hejmarên ku di nav xwe de têne çêkirin. list-style: none; Vê gavê gerok e ku lîsteya ew e, ew lîsteyek ku tu pêşniyarên pêşdibistanî (wekî guley û hejmaran) lîsteyê ye.
Hingê, hûn dikarin dirêjahiya lîsteya xwe binivîse ku ji cîhê ku hûn bixwazin wê diaxivin ku ew tije bikin. Min ji bo minahiya 2em bijarte, wekî ku du qonaxa fonê ya standardî ye, û hema nîv-an-ê ji jor û li jêr gotarê tabê. height: 2em; Lê tu dikarî çarçoveya xwe bi her çi sîgortê dixwazî bikî. UL tags dê bixweberê% 100 hilweşînin, da ku hûn nexwest ku ji hêla kantonê piçûktir be, hûn dikarin dihêlin derve.
Di dawiyê de, heger hûn pirtûkên xwe yên pîşesaziyê ne ji bo UL û OL tags, ne jî dixwazin ku hûn li wan binivîsin . Ev wateya ku hûn li sînorên xwe, Uzîn û serdema xwe ya UL veguherînin. padding: 0; margin: 0; sînor: none; Heke hûn ji hêla UL ve ve hatî veguhestin, hûn dikarin navîn, padding, an sînorê ku tiştek bi designa we re têkevin.
Divê kursiya xwe .tablista te divê vê yekê bibînin:
.tablist {list-style: none; height: 2em; padding: 0; margin: 0; sînor: none; }04 of 06
Lîsteya LI LIŞTÎN
Dema ku te lîsteya we nenaskirî ne, hûn hewce ne bi xalên tîpên LI LI. Wekî din, ew ê lîsteya wekî lîstek standardî dikin û her gavê li ser rêza bêyî bêyî ku tabên xwe rast rast derxistin.
Ya yekem, xwedan xwerûya xwe ya xwe hilberandin:
.tablist li {}Hingê hûn dixwazin ku tabanên xwe hilweşin, da ku ew li balafirên horizontal vekin. float: çep;
Û ji bîr nekin ku di navbera tabloyên hin hûrgelan de zêde bikin, da ku ew bi hev re hev nekin. margin-right: 0.13em;
Li ser şêweyên we divê vê yekê bibînin:
.tablist li {float: çep; margin-right: 0.13em; }05 ê 06
Vebijêrin Taban Wek Tabên Wek CSS-3
Ji bo ku di vê şêweyê de piraniya hilberê giran de, ez lîsteya navnîşan li hundirê lîstikek nexşirandim. Browser nas dikin ku girêdan li ser malpera din li ser pirtûkên din jî hene, da ku hêsantirên kevn ên ku ji wan re hûrgelên kevneşopî digire heger e ku hûn bi e-nameya girêdanê (girêdanên) ve girêdayî bikin. Wê yekê yekem taybetmendiyên xwe binivîse:
.tablist li a {} .tablist li a: hover {}Ji ber ku ev tabs divê wekî pîlanek li serîlêdana çalak bikin, hûn dixwazin tevahiya qada tabê binivîsin, ne tenê teksta girêdayî. Ji bo vê yekê, divê hûn ji A-tagê ji "dewleta" inline "di nav blokek blokek normal de biguherînin. display: block; (Heke hûn li ser fêrbûna bêtir bizanibin bêtir dixwazin, bixebitînin Block-Level-Elektrîkê .)
Piştre, rêbazek hêsantir ku bi hêza we re hevpeymanên xwe bi hev re hevdu bibin, lê hê jî hûrbîn e ku çarçoveyek nivîskî biqewimin e ku ew eynî rast û çepê damezrandin. Min xwediyê xwerû xemgîniya karûbarê bikar anîn ku ji jor û jêrîn bi 0 û rast û çepê heta 1em ava bike. padding: 0 1em;
Min jî da ku hilbijêre girêdankê jê derxistin, da ku tabs kêm mîna girêdan. Lê heger hûn guhdarvanên ku ji hêla wê ve tevlihev bibin, ev xaçê derkeve. link-decoration: none;
Bi dora sînorek pîrek dorpêçî, tabloya wan mîna taban. Min qada sînorê sînor a karûbarê ku li seranserê her çar aliyan sînor danîn: 0.06em solid # 000; Û paşê ji sîteyê jêrîn bikar anîn ku ji wê dûr veke. border-bottom: 0;
Piştre min hinek guherînan bi rengê rengê, reng û rengê paşîn ya tabloyan çêkir. Vê van stylesên ku ji malpera xwe re bihev bikin. font: bord 0.88em / 2em arial, geneva, helvetica, sans-serif; rengê # 000 background-color: #ccc;
Hemî şêweyên jorîn divê di hilbijêre .tablist li li ser rêjîmê, da ku ew li ser sînorên lûksî bi gelemperî bandor bikin. Piştre ji bo tabloyên bêhtir clicklîzî nîşan bide, divê hûn çend hindek desthilatdariya dewletê binivîsînin .tablist li a: hover.
Ez dixwazim rengê pirtûk û paşnavê biguherim da ku hûn li ser wê diçin tabê pop. background: # 3cf; rengê: #fff;
Û ez ji bo gerokên ku ez dixwazim girêdana ku bimîne ne diyariyek din din. text-decoration: none; Methodên din ên din ew e ku hûn di binê tabloyê de gava ku di mûçikê de dişibînin. Ger hûn bixwazin wê, bi vî rengî veguherîna nivîsandinê-nivîsandinê: binivîse;
Lê CSS 3 li vir e?
Heke hûn baldarî bikişînin, hûn guman xuya kirin ku ti şêweyên sê CSS-ê ku di çarçoveya şêweyê de têne bikaranîn. Ev efsaneya ku di gerdûnî ya înternetê de dixebite, including Explorer Explorer. Lê ev nabe ku tabs ji hêla çepê çiqas bêtir binêrin. Bi hêla CSS-style style-radius (û telefonên taybet yên barkêş-ê girêdayî ye), hûn dikarin girêdan çêbikin, wekî peldanka li ser peldanka li a manila bibînin.
Hûn şêweyên ku hûn di navnîşanê .bablist li ser rêkûpêk zêde dibin: -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; border-top-right-radius: 0.50em; border-top-left-radius: 0.50em;
Ev rêbazên dawî yên dawîn in ku min nivîsandine:
.tablist li a {display: block; padding: 0 1em; text-decoration: none; sînor: 0.06em solid # 000; border-bottom: 0; font: bord 0.88em / 2em arial, geneva, helvetica, sans-serif; rengê # 000 background-color: #ccc; / * CSS-3 element * / 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; border-top-right-radius: 0.50em; border-top-left-radius: 0.50em; } .tablist li a: hover {background: # 3cf; rengê: #fff; text-decoration: none; }Bi van şêwazan, hûn menuê tabbed hene ku li ser hemû browsenên mezin dixebite û dixebitin û pirtûkên CSS-yê li gor CSS-ê hêja xweş dike. Rûpela pirtûka we ji bo ku hûn dikarin bikar bînin ku hûn bêtir bêtir bikin.
06 of 06
Vebijêrk Bêhtir
Di HTML-ê de çêkir, UL lîsteyeke elementek bi nasnameyeke xwedî bû. Ev yek ji we re li LI şêweyeke cûda ji restên din ve dide. Rewşa herî gelemper e ku li ser awayek tabûya niha ya berbiçav dike. Riyeke din jî ji bo ramana vê yekê ye ku hûn dixwazin tabên ku ji wan dijîn nebêjin. Hûn vê yekê biguherînin ku id li ser rûpelên cuda hene.
Ez hemî hemî hemî ciwantek A-tag û hem jî wek # averber A: hover sta so ku her du hindik cuda ne. Hûn dikarin rengê rengê rengê, heta hêjahiyê, hejmar û çarçoveya wê elementê biguherînin. Hûn guhertinên ku hûn di nav sêwirîna xwe de fêm dikin fam bikin
.tablist li # niha a {reng-reng: # 777; rengê: #fff; } .tablist li # current a: hover {background: # 39C; }Û hûn çê kirin! Hûn ji bo malpera we ji mîhengek tabbedek çêkir.