01 din 06
Cum se creează navigare cu file cu CSS și fără imagini
Navigarea pe paginile web este o formă de listă, iar navigarea cu file este ca o listă orizontală. Este destul de ușor să creați navigare orizontală cu CSS, dar CSS 3 ne oferă și alte câteva instrumente care să le facă să pară și mai plăcute.
Acest tutorial vă va duce prin codurile HTML și CSS necesare pentru a crea un meniu cu file CSS. Faceți clic pe acel link pentru a vedea cum va arăta.
Acest meniu tabel nu utilizează imagini , doar HTML și CSS 2 și CSS 3. Acesta poate fi ușor editat pentru a adăuga mai multe file sau pentru a schimba textul în ele.
Suport pentru browser
Acest meniu tab va funcționa în toate browserele majore . Exploratorul de Internet nu va afișa colțurile rotunjite, dar în caz contrar, va afișa file ca Firefox, Safari, Opera și Chrome.
02 din 06
Scrieți lista de meniuri
Toate meniurile și filele de navigare sunt într-adevăr doar o listă neordonată. Deci, primul lucru pe care doriți să-l faceți este să scrieți o listă neordonată de linkuri către locul în care doriți să navigați prin navigarea cu file.
Acest tutorial presupune că scrieți codul HTML într-un editor de text și că știți unde să plasați codul HTML pentru meniul dvs. pe pagina dvs. Web.
Scrieți lista neordonată astfel:
- class = "tablist">
- CSS 3
- id = "curent"> Tab-uri
- Pentru
- Meniuri
Veți observa că codul cheamă două lucruri: class = "tablist" și id = "current". Primul este necesar . Dacă nu puneți clasa tablist pe lista neordonată, filele nu vor funcționa. Al doilea este opțional. Puneți id = "curent" pe oricare fila pe care doriți să o evidențiați pe acea pagină. De obicei, utilizez acest lucru pentru a evidenția pagina pe care sunt în desfășurare, dar o puteți folosi pentru a evidenția cea mai importantă filă. Sau puteți să o eliminați complet.
03 din 06
Începeți editarea foii de stil
Puteți utiliza fie o foaie de stil externă, fie o foaie de stil internă . Pagina de meniu a eșantionului utilizează o foaie de stil internă în
a documentului.Mai intai vom modela UL-ul propriu-zis
Aici folosim tabela de clasă în HTML. Mai degrabă decât stilul etichetei UL, care ar schița toate listele neordonate pe pagina dvs., ar trebui să stil doar clasa UL. tablist Deci, prima intrare în CSS ar trebui să fie:
.tablist {}Îmi place să pun piciorul înclinat în capăt (}) înainte de timp, așa că nu o mai uit mai târziu.
În timp ce folosim o etichetă de listă neordonată pentru lista de meniuri tab, dar nu vrem să intrăm în ghilimele sau numerele. Deci, primul stil pe care trebuie să-l adăugați este. list-style: none; Acest lucru îi spune browserului că, deși este o listă, este o listă fără stiluri predefinite (cum ar fi gloanțe sau numere).
Apoi, puteți seta înălțimea listei dvs. pentru a se potrivi spațiului pe care doriți să îl umpleți. Am ales 2EM pentru înălțimea mea, deoarece aceasta este dublul dimensiunii standard a fontului și oferă aproximativ o jumătate de pixel deasupra și sub textul filei. înălțime: 2em; Dar puteți să vă setați lățimea la orice dimensiune doriți. Etichetele UL vor prelua în mod automat 100% din lățime, deci dacă nu doriți să fie mai mică decât containerul curent, puteți lăsa lățimea în afară.
În cele din urmă, dacă foaia dvs. de stil de master nu are presetări pentru etichetele UL și OL, veți dori să le puneți înăuntru. Aceasta înseamnă că ar trebui să dezactivați marginea, marginile și umplutura pe UL. padding: 0; margin: 0; frontieră: nici una; Dacă ați resetat deja eticheta UL, aveți posibilitatea să modificați margini, plăcuțe sau bordură la ceva care se potrivește cu designul.
Clasa dvs. finală .tablist ar trebui să arate astfel:
.tablist {style-style: none; înălțime: 2em; padding: 0; margin: 0; frontieră: nici una; }04 din 06
Editarea elementelor din lista LI
După ce ați creat lista neordonată, trebuie să stilizați etichetele LI din interiorul acesteia. În caz contrar, acestea se vor comporta ca o listă standard și fiecare muta la linia următoare fără a plasa filele corect.
Mai întâi, configurați proprietatea stilului:
.tablist li {}Apoi, doriți să plutiți filele astfel încât să se alinieze în plan orizontal. plutește la stânga;
Și nu uitați să adăugați o marjă între file, astfel încât să nu se îmbine împreună. marja de-dreapta: 0.13em;
Stilurile dvs. li ar trebui să arate astfel:
.tablist li {float: stânga; marja de-dreapta: 0.13em; }05 din 06
Efectuarea filelor arata ca file cu CSS 3
Pentru a face cea mai mare parte a ridicării grele în această foaie de stil, țintesc legăturile din lista neordonată. Utilizatorii de browsere recunosc că linkurile fac mai mult pe o pagină web decât alte etichete, astfel încât este mai ușor să obțineți browsere mai vechi pentru a se conforma unor lucruri precum starea de hover, dacă le atașați la eticheta de ancorare (link-uri). Deci, mai întâi scrieți proprietățile de stil:
.tablist li a {} .tablist li a: hover {}Deoarece aceste file ar trebui să acționeze ca filele dintr-o aplicație, doriți ca întreaga zonă a filei să fie clicabilă, nu doar textul conectat. Pentru a face acest lucru, trebuie să convertiți eticheta A din starea normală " inline " într-un element de bloc . display: block; (Dacă sunteți interesat să aflați mai multe despre diferența, citiți Elemente de nivel în bloc față de elemente inline .)
Apoi, o modalitate ușoară de a forța filele să fie simetrice unul cu altul, dar încă flex pentru a se potrivi lățimea textului este de a face padding dreapta și stânga la fel. Am folosit proprietatea stenografiei de umplere pentru a seta partea superioară și inferioară la 0 și dreapta și stânga la 1em. umplutura: 0 1em;
De asemenea, am ales să eliminați subliniază linkurile, astfel încât filele să arate mai puțin ca linkurile. Dar dacă audiența dvs. ar putea fi confundată de asta, renunțați la această linie. link-decoration: none;
Prin plasarea unei margini subțiri în jurul filelor, le face să arate ca file. Am folosit proprietatea de stenografie a graniței pentru a pune granița în jurul tuturor celor patru laturi de graniță: 0.06m solid # 000; Apoi a folosit proprietatea de jos a frontierei pentru ao elimina din partea de jos. border-bottom: 0;
Apoi am efectuat unele ajustări ale fontului, culorii și culorii de fundal a filelor. Setați-le pe stilurile care se potrivesc site-ului dvs. font: bold 0.88e / 2m arial, geneva, helvetica, sans-serif; color: # 000; culoare de fundal: #ccc;
Toate stilurile de mai sus ar trebui să treacă în selectorul .tablist li a, astfel încât acestea să afecteze în general etichetele de ancorare. Apoi, pentru a face ca filele să apară mai clicabile, ar trebui să adăugați câteva reguli de stat .tablist li a: hover.
Îmi place să schimb culoarea textului și a fundalului pentru a face tab-ul pop atunci când faceți clic pe mouse-ul peste el. fundal: # 3cf; Culoare: #fff;
Și am inclus un alt memento pentru browsere că vreau ca link-ul să nu rămână subliniat. text-decoration: none; O altă metodă obișnuită este să activați subliniați când mouse-ul trece peste file. Dacă doriți să faceți acest lucru, schimbați-l în text-decoration: underline;
Dar unde este CSS 3?
Dacă ați acordat atenție, probabil ați observat că în foaia de stil nu au existat niciun fel de stiluri CSS 3. Acest lucru are avantajul de a lucra în orice browser modern, inclusiv în Internet Explorer. Dar nu face ca filele să pară mai mult decât cutiile pătrate. Prin adăugarea unei raze de rază de apel pentru CSS 3 (și apelurile specifice asociate browserului) puteți face marginile rotunjite, pentru a arăta mai mult ca filele dintr-un director manila.
Stilurile pe care ar trebui să le adăugați la lista .list de reguli sunt: -webkit-border-top-right-radius: 0.50em; -webkit-border-top-stânga-rază: 0.50em; -moz-border-radius-topright: 0.50em; -moz-border-radius-topleft: 0.50em; border-top-dreapta-rază: 0.50em; border-top-left-rază: 0.50em;
Acestea sunt regulile finale de stil pe care le-am scris:
.tablist li a {afișare: bloc; umplutura: 0 1em; text-decoration: none; frontieră: 0,06m solid # 000; border-bottom: 0; font: bold 0.88e / 2m arial, geneva, helvetica, sans-serif; color: # 000; culoare de fundal: #ccc; / * CSS 3 elemente * / webkit-border-top-right-radius: 0.50em; -webkit-border-top-stânga-rază: 0.50em; -moz-border-radius-topright: 0.50em; -moz-border-radius-topleft: 0.50em; border-top-dreapta-rază: 0.50em; border-top-left-rază: 0.50em; } .tablist li a: hover {fundal: # 3cf; Culoare: #fff; text-decoration: none; }Cu aceste stiluri, aveți un meniu tabelat care funcționează în toate browserele majore și arată ca fișiere imprimate frumos în browserele compatibile cu CSS 3. Următoarea pagină vă oferă o altă opțiune pe care o puteți folosi pentru ao îmbraca și mai mult.
06 din 06
Evidențiați fila curentă
În HTML-ul pe care l-am creat, UL a avut un element de listă cu un ID. Acest lucru vă permite să acordați un LI un stil diferit față de restul. Cea mai comună situație este de a face ca fila curentă să iasă într-un fel. Un alt mod de a vă gândi la acest lucru este că doriți să ștergeți filele care nu sunt live. Apoi schimbați unde se află ID-ul pe paginile diferite.
Am stil atît eticheta #current A, cît și cea curentă A: stați așa că ambele sunt ușor diferite. Puteți schimba culoarea, culoarea de fundal, chiar înălțimea, lățimea și umplutura elementului respectiv. Efectuați orice schimbare are sens în designul dvs.
.tablist li # curent a {background-color: # 777; culoare: #fff; } .tablist li # curent a: hover {fundal: # 39C; }Și ați terminat! Tocmai ați creat un meniu tabelat pentru site-ul dvs. web.