01 nga 06
Si të krijoni lundrim me tabela me CSS dhe pa imazhe
Lundrimi në faqet e uebit është një formë e një liste dhe navigimi me tabela është si një listë horizontale. Është mjaft e lehtë për të krijuar navigacion horizontale me tabela me CSS, por CSS 3 na jep disa mjete të tjera për t'i bërë ato të duken edhe më të bukur.
Ky tutorial do t'ju çojë përmes HTML dhe CSS të nevojshëm për të krijuar një menu CSS me tabela. Klikoni mbi atë lidhje për të parë se si do të duket.
Ky menu me skeda nuk përdor imazhe , vetëm HTML dhe CSS 2 dhe CSS 3. Mund të redaktohet lehtë për të shtuar më shumë skeda ose për të ndryshuar tekstin në to.
Mbështetja e shfletuesit
Kjo skedë do të funksionojë në të gjitha shfletuesit kryesorë . Internet Explorer nuk do të tregojë qoshet e rrumbullakëta, por përndryshe, do të shfaqë tabela ashtu si Firefox, Safari, Opera dhe Chrome.
02 nga 06
Shkruani listën tuaj të menysë
Të gjithë menutë dhe skedat e navigimit janë me të vërtetë vetëm një listë e parregulluar. Pra, gjëja e parë që dëshironi të bëni është të shkruani një listë të renditur të lidhjeve ku doni që navigimi juaj me tabela të shkojë.
Ky tutorial po supozon se po shkruani HTML-në tuaj në një redaktues teksti dhe se e dini se ku të vendosni HTML-në për menunë tuaj në faqen tuaj të internetit.
Shkruani listën tuaj të parregulluar si kjo:
- class = "Tablist">
- CSS 3
- id = "aktuale"> Tab
- për
- Menus
Do të vëreni se kodi i telefonon dy gjëra: class = "tablist" dhe id = "current". E para është e nevojshme . Nëse nuk e vendosni klasën e tabelave në listën tuaj të parregulluar, skedat nuk do të funksionojnë. E dyta është fakultative. Vendos id = "aktual" në cilindo tab që dëshironi të theksohet në atë faqe. Unë zakonisht e përdor këtë për të nxjerrë në pah faqen në të cilën jam, por mund ta përdorni për të nxjerrë në pah skedën më të rëndësishme. Ose mund ta hiqni plotësisht.
03 nga 06
Filloni të redaktoni fletën tuaj të stilit
Ju mund të përdorni ose një fletë të stilit të jashtëm ose një fletë të stilit të brendshëm . Faqja e menysë së mostrës përdor një fletë të brendshme të stilit në
të dokumentit.Së pari ne do të Style UL veten
Kjo është ajo ku ne përdorim tabelën e klasës në HTML. Në vend që të modifikoni etiketën UL, e cila do të stilonte të gjitha listat e pa renditura në faqen tënde, duhet të vendosni vetëm klasën UL. tablist Pra hyrja e parë në CSS duhet të jetë:
.tablist {}Më pëlqen t'i vë fund mbajtjes së kaçurrelës (}) përpara kohe, kështu që nuk e harroj më vonë.
Ndërsa ne po përdorim një listë të renditur të listës për listën e menysë tab, por ne nuk duam që ndonjë plumb apo numër të rrëshqasë. Pra, stili i parë që duhet të shtoni është. list-style: none; Kjo tregon shfletuesit se ndërsa është një listë, kjo është një listë pa stilet e paracaktuara (si plumba ose numra).
Pastaj, mund të vendosni lartësinë e listës suaj që të përputhet me hapësirën që dëshironi ta plotësoni. Unë zgjodha 2em për lartësinë time, pasi kjo është dyfishi i madhësisë standarde të shkronjave dhe jep rreth gjysmë em lart dhe poshtë tekstit të skedës. lartësi: 2em; Por ju mund të vendosni gjerësinë tuaj në çfarëdo madhësie që dëshironi. Etiketat UL automatikisht do të marrin 100% të gjerësisë, kështu që nëse nuk dëshironi që të jetë më e vogël se ena e tanishme, mund të largoni gjerësinë.
Së fundi, nëse fletori i stilit tënd master nuk ka paraprakisht për etiketat UL dhe OL, ju do të dëshironi të vendosni ato. Kjo do të thotë që ju duhet të fikni kufijtë, kufijtë dhe mbushjen në UL tuaj. mbushje: 0; diferencë: 0; kufiri: asnjë; Nëse tashmë e keni rivendosur tagin UL, mund të ndryshoni kufijtë, mbushjen, ose kufirin me diçka që përshtatet me dizajnin tuaj.
Klasa juaj finale e stilit duhet të duket kështu:
.tablist {list-style: none; lartësi: 2em; mbushje: 0; diferencë: 0; kufiri: asnjë; }04 nga 06
Redaktimi i artikujve të listës LI
Pasi të keni krijuar listën tuaj të parregulluar, duhet të stilizoni etiketat LI brenda saj. Përndryshe, ata do të veprojnë si një listë standarde dhe çdo lëvizje në vijën tjetër pa vendosur skedat tuaja në mënyrë korrekte.
Së pari, vendosni pronën tuaj të stilit:
.tablist li {}Pastaj doni të notoni tabs tuaj në mënyrë që ata të vijë deri në aeroplan horizontale. float: majtas;
Dhe mos harroni të shtoni një diferencë midis tabs, kështu që ata nuk do të bashkohen së bashku. diferencë-drejtë: 0.13em;
Stili juaj li duhet të duket kështu:
.ltablist li {float: left; diferencë-drejtë: 0.13em; }05 i 06
Bërja e tabelave të duken si tabela me CSS 3
Për të bërë pjesën më të madhe të heqjes së rëndë në këtë fletë stili, unë po shënjestroj lidhjet brenda listës së parregulluar. Shfletuesit e kuptojnë se lidhjet bëhen më shumë në një faqe interneti sesa etiketat e tjerë, prandaj është më e lehtë që shfletuesit më të vjetër të jenë në përputhje me gjërat si shtigjet e pezullimit nëse i bashkëngjitni ato në tagun (lidhjet) e ankorimit. Pra së pari shkruani pronat tuaja të stilit:
.tablist li a {} .tablist li a: hover {}Meqë këto skeda duhet të veprojnë si skeda në një aplikacion, ju dëshironi që të gjithë zonën e skedës të klikohen, jo vetëm tekstin e lidhur. Për ta bërë këtë, duhet të konvertoheni një etiketë A nga gjendja normale " inline " në një element bllok . display: block; (Nëse jeni i interesuar të njihni më shumë për ndryshimin, lexoni Elementët e nivelit të bllokut dhe elementeve inline .)
Pastaj, një mënyrë e lehtë për të detyruar tabs tuaj të jenë simetrik me njëri-tjetrin, por ende përkul për të përshtaten gjerësinë e tekstit është për të bërë të drejtë dhe të majtë padding të njëjtën gjë. I përdorur pronën stenografi mbushje për të vendosur pjesën e sipërme dhe të poshtme në 0 dhe të drejtën dhe të majtën në 1em. mbushje: 0 1em;
Unë gjithashtu zgjodha për të hequr lidhjen nënvizon, kështu që tabs duken më pak si lidhje. Por nëse audienca juaj mund të jetë e hutuar nga kjo, hiqni këtë rresht. Lidhje-dekoratë: none;
Duke vendosur një kornizë të hollë rreth tabs, kjo i bën ata të duken si tabs. Kam përdorur stemën e kufirit të pronës për të vënë kufirin rreth të katër anëve kufirin: 0.06em solid # 000; Dhe pastaj përdorën pronën e kufirit për ta hequr atë nga fundi. kufirit-bottom: 0;
Pastaj bëra disa ndryshime në fontin, ngjyrën dhe ngjyrën e sfondit të skedave. Caktoni këto tek stilet që përputhen me faqen tuaj. font: guximshëm 0.88em / 2em arial, geneva, helvetica, sans-serif; color: # 000; background-color: #ccc;
Të gjitha stilet e mësipërme duhet të shkojnë në përzgjedhësin .tablist li a, rregull në mënyrë që ato të ndikojnë në etiketat e ankorimit në përgjithësi. Pastaj, për të bërë që skedat të duken më të klikueshme, duhet të shtoni një rregull të shtetit.
Më pëlqen të ndryshoj ngjyrën e tekstit dhe sfondit për të bërë tab pop kur ju miun mbi të. background: # 3cf; Ngjyra: #fff;
Dhe unë përfshinte një tjetër kujtesë për shfletuesit se unë dua që lidhja të mbetet e nënvizuar. text-decoration: asnjë; Një tjetër metodë e zakonshme është kthimi i nënvizimit kur ju klikoni mbi tab. Nëse doni ta bëni këtë, ndryshoni atë në tekst-dekorim: nënvizoni;
Por Ku është CSS 3?
Nëse ju keni qenë duke i kushtuar vëmendje, ju ndoshta keni vënë re se nuk ka pasur ndonjë CSS 3 stilet e përdorur në fletën e stilit. Kjo ka përparësinë e punës në çdo shfletues modern, duke përfshirë Internet Explorer. Por kjo nuk i bën tabs të duken si asgjë më shumë se kutitë katrore. Duke shtuar një rreze kufitare të thirrjes stilit CSS 3 (dhe kjo lidhet me thirrjet specifike të shfletuesit), ju mund të bëni skajet të rrumbullakosura, që të duken më shumë si tabela në një dosje të manilës.
Stilet që duhet t'i shtoni rregullit .tablist li janë: -webkit-border-top-right-radius: 0.50em; -webkit-kufirit-top-majtas-rreze: 0.50em; -moz-kufitare-rreze-Topright: 0.50em; -moz-kufitare-rreze-topleft: 0.50em; Kufiri-top-djathtë-rreze: 0.50em; Kufiri-top-majtas-rreze: 0.50em;
Këto janë rregullat përfundimtare të stilit që kam shkruar:
.tablist li a {display: bllok; mbushje: 0 1em; text-decoration: asnjë; kufiri: 0.06em solid # 000; kufirit-bottom: 0; font: guximshëm 0.88em / 2em arial, geneva, helvetica, sans-serif; color: # 000; background-color: #ccc; / * CSS 3 elemente * / webkit-border-top-right-radius: 0.50em; -webkit-kufirit-top-majtas-rreze: 0.50em; -moz-kufitare-rreze-Topright: 0.50em; -moz-kufitare-rreze-topleft: 0.50em; Kufiri-top-djathtë-rreze: 0.50em; Kufiri-top-majtas-rreze: 0.50em; } .stilitist li a: hover {background: # 3cf; Ngjyra: #fff; text-decoration: asnjë; }Me këto stile, ju keni një menu me skeda që funksionon në të gjithë shfletuesit më të mëdhenj dhe duket si skedarë të bukur të shtypur në shfletues të përputhshëm me CSS 3. Faqja tjetra ju jep një mundësi tjetër që mund ta përdorni për të veshur atë edhe më shumë.
06 i 06
Theksoni tabin aktual
Në HTML që kam krijuar, UL kishte një element lista me një ID. Kjo ju lejon të jepni një LI një stil tjetër nga pjesa tjetër. Situata më e zakonshme është që tabela aktuale të dalë në një farë mënyre. Një tjetër mënyrë për të menduar për këtë është që ju doni të gri nga tabs që nuk janë të jetojnë. Ju pastaj ndryshoni ku id është në faqet e ndryshme.
I stilit si tag #current Një, ashtu edhe #current A: hover sta në mënyrë që të dyja janë paksa të ndryshme. Ju mund të ndryshoni ngjyrën, ngjyrën e sfondit, madje lartësinë, gjerësinë dhe mbushjen e atij elementi. Bëni çfarëdo ndryshimesh të ketë kuptim në dizajnin tuaj.
.tabilist li # aktuale a {background-color: # 777; ngjyra: #fff; } .tablist li # aktual a: hover {background: # 39C; }Dhe ke mbaruar! Ju keni krijuar vetëm një menu me tabela për faqen tuaj te internetit.