01 nan 06
Ki jan yo kreye Navigasyon Tabbed ak CSS ak okenn imaj
Navigasyon sou paj wèb se yon fòm yon lis, ak navigasyon gid se tankou yon lis orizontal. Li jistis fasil yo kreye navigasyon orizontal navigasyon ak CSS, men CSS 3 ba nou yon kèk plis zouti fè yo gade menm joli.
Tutorial sa a pral pran ou nan HTML a ak CSS bezwen yo kreye yon meni kat CSS. Klike sou lyen sa a pou wè ki jan li pral gade.
Meni an tabbed itilize pa gen okenn imaj , jis HTML ak CSS 2 ak CSS 3. Li ka fasil edited yo ajoute plis onglè oswa chanje tèks la nan yo.
Navigatè sipò
Meni tab sa a ap travay nan tout navigatè pi gwo . Eksploratè entènèt pa pral montre kwen awondi yo, men otreman, li pral montre onglè jis tankou Firefox, Safari, Opera, ak Chrome.
02 nan 06
Ekri Lis Menu ou a
Tout navigasyon meni ak onglè yo se reyèlman jis yon lis unordered. Se konsa, premye bagay ou vle fè se ekri yon lis san presedan nan lyen ki mennen nan kote ou vle navigasyon tabbed ou yo ale.
Tutorial sa a se asepte ke w ap ekri HTML ou a nan yon editè tèks ak ke ou konnen ki kote yo mete HTML la pou meni ou sou paj entènèt ou an.
Ekri lis unordered ou tankou sa a:
- klas = "tablist">
- CSS 3
- id = "aktyèl"> Tabs
- Pou
- Menas
Ou pral remake ke kòd la rele soti de bagay: klas = "tablist" ak id = "aktyèl". Premye a gen obligasyon . Si ou pa mete klas la tablist sou lis unordered ou a, onglè yo pa pral travay. Dezyèm lan se si ou vle. Mete ID = "aktyèl la" sou kèlkeswa sa ki tab ou ta renmen yo dwe make sou paj sa a. Mwen anjeneral itilize sa a mete aksan sou paj la ke mwen sou, men ou ka itilize li nan mete aksan sou tab la ki pi enpòtan. Oswa ou ka retire li konplètman.
03 nan 06
Kòmanse Korije Fèy Style ou
Ou ka itilize swa yon fèy style ekstèn oswa yon fèy style entèn yo . Paj nan paj echantiyon sèvi ak yon fèy style entèn nan
nan dokiman an.Premye Nou pral Style tèt la Ul
Sa a se kote nou itilize tablist klas la .nan HTML la. Olye ke manier tag nan UL, ki ta style tout lis ki nonmen nan paj ou a, ou ta dwe style sèlman klas la UL. Tablo Se konsa, antre nan premye nan CSS ou ta dwe:
.tablist {}Mwen renmen mete nan atèl la Curly atèl (}) devan yo nan tan, Se konsa, mwen pa bliye li pita.
Pandan ke nou ap itilize yon tag lis unordered pou lis meni tab la, men nou pa vle okenn bal oswa nimewo trennen sou vant Se konsa, style la premye ou ta dwe ajoute se. lis-style: Pa gen; Sa a di navigatè a ke pandan ke li nan yon lis, li nan yon lis ki pa gen okenn estil pre-detèmine (tankou bal oswa nimewo).
Lè sa a, ou ka mete wotè nan lis ou a matche ak espas ki la ou vle li ranpli. Mwen te chwazi 2em pou wotè m ', menm jan sa a doub gwosè a font estanda, epi li bay sou mwatye yon em pi wo a ak anba a tèks la nan tab la. wotè: 2em; Men, ou ka mete lajè ou a tou sa gwosè ou ta renmen. UL Tags pral otomatikman pran 100% nan lajè a, kidonk si ou vle li yo dwe pi piti pase resipyan aktyèl la, ou ka kite lajè a soti.
Finalman, si fèy style mèt ou a pa gen preregle pou UL ak OL Tags, ou pral vle mete yo pous Sa vle di ke ou ta dwe fèmen fontyè yo, marges, ak padding sou UL ou. padding: 0; Marge: 0; fwontyè: pa; Si ou deja gen Reyajiste UL tag la, ou ka chanje marges yo, padding, oswa fwontyè a yon bagay ki adapte ak konsepsyon ou.
Final ou a .tablist klas ta dwe gade tankou sa a:
.tablist {lis-style: okenn; wotè: 2em; padding: 0; Marge: 0; fwontyè: pa; }}04 nan 06
Korije lis LI atik yo
Yon fwa ou te estile lis unordered ou a, ou bezwen style LI Tags yo andedan li. Sinon, yo pral aji tankou yon lis estanda ak chak deplase nan pwochen liy lan san yo pa mete onglè ou kòrèkteman.
Premyèman, mete kanpe pwopriyete style ou:
.tablist li {}Lè sa a, ou vle flote onglè ou yo pou ke yo liy moute sou plan an orizontal. flote: agoch;
Epi pa bliye ajoute kèk maj ant onglè yo, pou yo pa rantre ansanm. Marge-dwa: 0.13em;
Styles li ou ta dwe gade tankou sa a:
.tablist li {flote: agoch; Marge-dwa: 0.13em; }}05 nan 06
Fè tab yo gade tankou Tabs ak CSS 3
Pou fè pi fò nan leve nan lou nan fèy style sa a, mwen vize lyen yo nan lis la unordered. Navigatè rekonèt ke lyen fè plis sou yon paj wèb pase lòt Tags, kidonk li pi fasil yo ka resevwa navigatè ki pi ansyen konfòme li avèk bagay sa yo tankou eta hover si ou mete yo nan tag an jeteur (lyen). Se konsa, premye ekri pwopriyete style ou:
.tablist li yon {} .tablist li yon: hover {}Paske sa yo onglè ta dwe aji tankou onglè nan yon aplikasyon, ou vle zòn nan tout nan tab la yo dwe klikabl, se pa sèlman tèks la lye. Pou fè sa, ou gen konvèti yon tag nan li nan nòmal " aliye " eta nan yon eleman blòk . ekspozisyon: blòk; (Si w enterese nan konnen plis sou diferans lan, li Blòk-Nivo vs Eleman Inline .)
Lè sa a, yon fason fasil fòse onglè ou yo dwe simetrik youn ak lòt, men yo toujou flèks nan anfòm lajè a nan tèks la se fè recho a dwa ak bò gòch menm bagay la. Mwen te itilize pwopriyete a shorthand padding yo mete tèt la ak anba a 0 ak dwa a ak bò gòch 1em. padding: 0 1em;
Mwen menm mwen te chwazi yo retire lyen ki souliye, se konsa ke onglè yo gade mwens tankou lyen yo. Men, si odyans ou ta ka konfonn pa sa, kite liy sa a. lyen-decoration: Pa gen;
Pa mete yon fwontyè mens alantou onglè yo, li fè yo gade tankou onglè. Mwen te itilize fwontyè a fwontyè yo mete fwontyè a nan tout kat bò fontyè: 0.06em solid # 000; Lè sa a, itilize pwopriyete a fontyè-anba yo retire li anba nan fon an. fontyè-anba: 0;
Lè sa a, mwen te fè kèk ajisteman nan font, koulè a, ak koulè background nan onglè yo. Mete sa yo nan estil ki matche ak sit ou. font: fonse 0.88em / 2em arial, geneva, helvetica, sans-serif; koulè: # 000; background-koulè: # cc;
Tout estil ki anwo yo ta dwe ale nan seleksyon an .tablist li a, règ la pou yo afekte tags yo jete an jeneral. Lè sa a, fè onglè yo parèt plis klikabl, ou ta dwe ajoute yon règ leta kèk .tablist li yon: hover.
Mwen renmen chanje koulè a nan tèks la ak background fè tab la pòp lè ou sourit sou li. background: # 3cf; koulè: # ff;
Apre sa, mwen enkli yon lòt rapèl navigatè yo ke mwen vle lyen an rete pa souliye. tèks-decoration: okenn; Yon lòt metòd komen se yo vire soulinye a tounen sou lè ou sourit sou tab la. Si ou vle fè sa, chanje li nan tèks-decoration: soulinye;
Men, ki kote CSS la 3?
Si ou ve yo te peye atansyon, ou te pwobableman remake ke gen pa te nenpòt CSS 3 Styles yo itilize nan fèy la style. Sa a gen avantaj nan k ap travay nan nenpòt navigatè modèn, ki gen ladan Internet Explorer. Men, li pa fè onglè yo gade tankou anyen plis pase bwat kare. Lè yo ajoute yon CSS 3 style rele fwontyè-reyon (ak li nan asosye apèl navigatè-espesifik) ou ka fè bor yo awondi, yo gade plis tankou onglè nan yon katab manila.
Styles yo ou ta dwe ajoute nan la .tablist li yon règ yo se: -webkit-fontyè-tèt-dwa-reyon: 0.50em; -webkit-fontyè-tèt-gòch-reyon: 0.50em; -moz-fontyè-reyon-tèt: 0.50em; -moz-fwontyè-reyon-topleft: 0.50em; fwontyè-tèt-dwat-reyon: 0.50em; fwontyè-tèt-gòch-reyon: 0.50em;
Sa yo se règ yo style final mwen te ekri:
.tabli li yon {ekspozisyon: blòk; padding: 0 1em; tèks-decoration: okenn; fwontyè: 0.06em solid # 000; fontyè-anba: 0; font: fonse 0.88em / 2em arial, geneva, helvetica, sans-serif; koulè: # 000; background-koulè: # cc; / * CSS 3 eleman * / webkit-fontyè-tèt-dwa-reyon: 0.50em; -webkit-fontyè-tèt-gòch-reyon: 0.50em; -moz-fontyè-reyon-tèt: 0.50em; -moz-fwontyè-reyon-topleft: 0.50em; fwontyè-tèt-dwat-reyon: 0.50em; fwontyè-tèt-gòch-reyon: 0.50em; } .tabli li a: hover {background: # 3cf; koulè: # ff; tèks-decoration: okenn; }}Avèk sa yo Styles, ou gen yon meni tabbed ki travay nan tout navigatè pi gwo ak sanble bèl onglè enprime nan navigatè CSS 3 konfòme. Pwochen paj la ba ou yon sèl opsyon plis ou ka itilize yo abiye l 'menm plis.
06 nan 06
Mete aksan sou Tab aktyèl la
Nan HTML la mwen te kreye, UL a te gen yon sèl eleman lis ak yon ID. Sa a pèmèt ou bay yon sèl LI yon style diferan de rès la. Sitiyasyon ki pi komen se fè tab la kounye a kanpe deyò nan kèk fason. Yon lòt fason yo panse a sa a se ke ou vle gri soti nan onglè yo ki pa ap viv. Ou Lè sa a, chanje kote id la se sou paj sa yo diferan.
Mwen style tou de #current Yon tag kòm byen ke # aktyèl la Yon: hover sta pou ke tou de se yon ti kras diferan. Ou ka chanje koulè a, koulè background, menm wotè, lajè ak padding nan eleman sa a. Fè tou sa chanjman fè sans nan konsepsyon ou.
.tablis li # aktyèl yon {background-koulè: # 777; koulè: # ff; } .tablist li # aktyèl yon: hover {background: # 39C; }}Epi w ap fè! Ou te jis kreye yon meni tablèt pou sit entènèt ou an.