Cum se creează o navigare în CSS3 cu file

Oameni buni! Astăzi ne vom distra creând o navigare CSS3 cu file. În acest tut va fi de a crea varianta întuneric jean din numeroasele teme diferite disponibile pentru aceste file minunat doar pentru că? # 1 putem și # 2, există mai mult stil implicat și vă pot arăta mai multe trucuri îngrijite cu CSS3 decât cu celelalte stiluri. Dacă preferați, există teme mult mai simple în fișierele sursă, deci simțiți-vă liber să urmați, împreună cu acelea, deoarece structura este aproape aceeași.

Notă: Suportul pentru IE7 și 8 este limitat doar prin faptul că funcționalitatea funcționează perfect, dar unele stiluri suprapuse nu sunt tratate corespunzător. Dacă nu pentru minunat și minunat CSSPIE și Dean Edwards fix, nu ar exista nici un sprijin pentru orice versiune, altele decât IE9.

Bine, acum că a ieșit din cale, cred că este timpul să începem!

Tutorialul video

Oferim acest tutorial în două formate diferite: un videoclip și un tutorial complet scris de mai jos. Urmați împreună cu oricare dintre metodele de învățare pe care le preferați (sau ambele!):

Tutorialul scris

Tutorialul scris pas cu pas este de mai jos. Asigurați-vă că ați apucat și sursa complet descărcabilă!

Pasul 1 Crearea marcajului

Capul

Pentru primul nostru bit de marcare, vom crea capul nostru folosind HTML5 doctype, inserând foile de stil și spunând IE 7 & 8 că e bine să folosiți CSS3.

    CSS3 Tabs

Construirea containerelor

După ce ați adăugat capul, între etichetele corpului trebuie să creați niște containere pentru navigarea cu file. Să-l rupem?

După cum puteți vedea, primul container este. Acest lucru este folosit pentru a crea o lățime maximă a navigării cu file și pentru a o poziționa oricum doriți.

Ultimul este cel care se înfășoară pentru filele propriu-zise, precum și ajută la conținutul blocului de conținut. Aceasta este o clasă foarte importantă și nu este nevoie să o editați, deși voi explica stilul mai târziu în acest tutorial.

     Taburile vor merge aici

"Ultima este. Aceasta este o clasă foarte importantă și nu este nevoie să o editați"

Crearea primei fila

Ultimul marcaj pe care vom dori să-l scriem este pentru filele noastre reale și conținutul din ele.

Mai întâi de toate dorim să creăm un div cu un id astfel încât să știm ce conținut trebuie să fie afișat când faceți clic pe fila corespunzătoare. Arată așa?

  // Marcajul următor va merge aici

Apoi vom crea fila pentru acel id de conținut și îi vom spune să arate div cu un id de c1 folosind un hash cu c1 după acesta în link. Deci, marcajul dvs. ar trebui să arate așa?

  Primul  // Următorul Markup va merge aici

Acum să creăm un loc pentru a ne pune conținutul. Pentru a face acest lucru, vom crea pur și simplu un div cu o clasă de conținut .tab și vom introduce un text fictiv, făcând semnul tău acum să arate așa?

  Primul          2 tipuri de file - Regular și Newsreel
 Dacă aveți o filă de deschidere ca aceasta, ea ar trebui să fie întotdeauna ultima în lista filelor, altfel nu va apărea mai întâi când pagina se încarcă.
 Textul se suprapune uneori cu filele ascunse în IE7 & 8

Navigarea dvs. în tab-uri ar trebui să arate așa. Arată frumos în forma sa de bază, dar să adăugăm un stil și să-l duc pe acest copil!

Pasul 2 Săpat în unele CSS

Acum, că avem markup-ul care a avut grijă, simțiți-vă ca un câștigător chiar acum! Să mergem cu un pas mai departe și să construim acea încredere prin aplicarea unor CSS minunate pentru marcajul pe care tocmai l-ați creat? atunci veți avea cu adevărat ceva la care să vă bateți!

Etichete globale

Ok, pentru scopurile acestui tutorial, folosim o navigare independentă în tab-uri, deci să adăugăm câteva stiluri globale, cum ar fi corpul, etichetele p, titlul etc..

Când implementați filele, este posibil să aveți deja aceste stiluri în foaia de stil. În acest caz, puteți fie să ștergeți aceste stiluri, fie să le etichetați .tab-container pentru a crea un anumit stil de joc tab, astfel încât să nu suprascrieți propriile stiluri de site-uri web.

 corp font-size: 13px; font-familie: Arial, Helvetica, sans-serif; Culoare: # E7E7E7;  p, .tab-content li, h1, h2, h3 / * Aceasta asigură că există suficient spațiu între paragrafe, titluri, etc * / margin-bottom: 10px;  a text-decoration: none; Culoare: # EFD24A;  a: hover culoare: # AF9B41;  .tab-container h3 / * Efectuează numai titlurile h3 din interiorul filelor * / font-size: 147%; Culoare: # EFDFB3;

Modelarea containerelor

Acum o să stilăm cele două containere. Pentru acest tutorial vom centraliza acest container principal folosind marja: 0 auto, dati-i o lățime de 480px și împingeți-l jos din partea de sus aproximativ 4%.

 #container / * Utilizați acest buton pentru a poziționa întregul modul tab * / margine: 0 auto; lățime: 480 x; margine-top: 4%;

Pentru containerul .tab, este important să adăugați o poziție relativă pentru fiecare bloc de conținut de file pentru a se suprapune reciproc într-un spațiu frumos și limitat. Vrem ca lățimea noastră să se potrivească cu lățimea containerului principal 100% și cu un index z de 0, ceea ce va ajuta IE să nu afișeze textul blocului de conținut dincolo de cel curent.

 .tab-container poziție: relativă; lățime: 100%; z-index: 0;

În acest moment ar trebui să aveți o navigare cu tab-uri de lucru. Nu prea arata, dar hei? functioneaza! Îmi cer scuze dacă e greu de văzut.

Modelarea filelor și a conținutului acestora

Ok, din moment ce avem tab-uri de lucru, primul lucru pe care vrem să-l facem este să-i aliniem orizontal. Pentru a face acest lucru, vom adăuga pur și simplu un afișaj: inline la primul div de fiecare fila.

 .tab-container> div afișare: inline;

Deci, acum trebuie să adăugăm câteva stiluri implicite la filele în sine. Vom adăuga o poziție de rudă care este importantă pentru IE. De asemenea, vom afișa un bloc de intrare, astfel încât să le aliniem corespunzător cu conținutul filelor. Prin plasarea unei marje de 2 pixeli, putem adăuga un spațiu în jurul fiecărei file pentru ao face mai curată. Vom adăuga, de asemenea, un fundal de gradient pentru fiecare browser, împreună cu o rază de graniță și o umbra de cutie pentru unele extra minunate! Din moment ce folosim din nou CSSPIE pentru IE 7 & 8, nu este nevoie de filtre urâte în gradiente.

 .tab-container> div> a poziție: relativ important; / * Menținerea filelor în linie unul cu celălalt * / text-decoration: none; culoare: # D7D7D7; afișare: inline-block; padding: 4px 14px; font-size: 15px; font-familie: "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight: bold; text-transform: majuscule; margin: 2px; fundal: # 4C4648; / * browsere vechi * / fundal: -moz-linear-gradient (top, # 4C4648 0%, # 474344 52%, # 2F2D2E 100%); / * firefox * / fundal: gradient liniar (top, # 4C4648 0%, # 474344 52%, # 2F2D2E 100%); / * browsere viitoare * / -pie-fundal: gradient liniar (top, # 4C4648 0%, # 474344 52%, # 2F2D2E 100%); / * placă pentru ie * / fundal: -webkit-gradient (linii, stânga sus, jos stânga, oprire color (0%, # 4C4648) , # 2F2D2E)); / * webkit * / margine: dashed 2px # CFA840; padding: 4px 14px; -moz-border-radius: 3px; -webkit-border-radius: 0px; raza de graniță: 3 pixeli; text-umbra: 0 -1px 0 # 000000; -moz-box-umbra: 0 4px 10px -5px # 000000; cutie-umbra: 0 4px 10px -5px # 000000; -webkit-box-shadow: 0 4px 10px -5px # 000000;

În continuare, pe lista dorim să îi lăsăm pe utilizatori să știe la ce filă se află. Deci, pentru a face acest lucru vom folosi selectorul țintă și de a folosi Dean Edwards IE9.js pentru a face IE 7 & 8 să recunoască.

Deci .tab-container> div: target> spune că atunci când primul div (de exemplu: div, etc) este selectat sau este țintă, atunci vom schimba ce butonul (a:.

 .tab-container> div: țintă> a fundal: nici o parcurgere repetată 0 0 # 948a81; text-shadow: 0 1px 0 # 4C4648;

Acum că am desenat butoanele filelor, să mergem mai departe și să adăugăm un anumit caracter în zona de conținut.

Ceea ce vom face aici este să vizeze al doilea div în containerul .tab care este div și să-i dea o înălțime de min. De 250px, care este important pentru ca tot conținutul să se situeze în spatele divului țintă să nu se suprapună. Deoarece avem conținutul cu înălțimea corectă, trebuie să ascundem în continuare conținutul inactiv din spatele celui țintă și, pentru a face acest lucru, vom adăuga pur și simplu un z-index de -2. De asemenea, dorim ca IE 7 & 8 să joace frumos, astfel încât să adăugăm o poziție absolută. Deci, asta e chestiile importante, iar restul codului este acolo pentru a adăuga ceva stil suplimentar și pentru a ne da un aspect frumos.

 .tab-container> div> div / * Acesta este containerul care deține conținutul filei * / background: # 4C4648; / * browsere vechi * / fundal: -moz-linear-gradient (top, # 4C4648 0%, # 474344 84%, # 2F2D2E 100%); / * firefox * / fundal: gradient liniar (top, # 4C4648 0%, # 474344 84%, # 2F2D2E 100%); / * browsere viitoare * / -pie-background: gradient liniar (top, # 4C4648 0%, # 474344 84%, # 2F2D2E 100%); / * placă pentru ie * / fundal: -webkit-gradient (linii, stânga sus, jos stânga, oprire color (0%, # 4C4648) , # 2F2D2E)); / * webkit * / -moz-box-shadow: 0 0 12px 1px # 000000 inset; -webkit-box-shadow: 0 0 12px 1px # 000000 inset; box-shadow: 0 0 12px 1px # 000000 inset; z-index: -2; top: 50px; padding: 20px; frontieră: solid 6px # 4C4648; contur: 2px dashed # CFA840; contur-offset: -8px; / * Șterge dacă nu vrei un offset * / min-height: 250px; / * Modificați această valoare dacă aveți nevoie de mai mult sau mai puțin spațiu de conținut * / poziție: absolută; / * Fixe IE 7 & 8 * /

După ce conținutul inițial a fost redactat, vom dori să aducem țintă în față. Pentru a face acest lucru, pur și simplu folosim selectorul țintă cu un z-index de 3 și îl facem important.

 .tab-container> div: țintă> div poziție: absolută; z-index: 3! important; / * Aduce conținutul în față, în funcție de fila care a fost făcută clic pe * /

Ultimul lucru pe care îl vom face este să adăugați unele elemente de umplutură la conținut și unele stil implicit dacă doriți să adăugați o imagine în filele dvs..

Pe o notă laterală, nu uitați să importați fișierul reset.css în partea superioară a foii de stil, avem nevoie de aceasta pentru a suprascrie setările prestabilite ale browserului.

 div.tab-content / * Stiluri conținutul interior al filelor * / padding-bottom: 70px; padding-left: 20px; umplutură-dreapta: 20px;  .tab-content img margine: 0 auto; display: block; padding-bottom: 20px; padding-top: 10px;  / ****** Această importă alte foi de stil, astfel încât nu trebuie să le apelați într-un fișier html ***** / @import url ('? /? /Reset.css');

După ce ați terminat totul, ar trebui să ajungeți la ceva asemănător imaginii următoare. Dacă dvs. nu arătați la fel sau similar, atunci fie că ați pierdut ceva, fie că ați decis să mergeți cu propriul dvs. stil, trebuie doar să vă întoarceți și să vă verificați din nou activitatea, sunt sigur că este doar ceva minore.

Inca un lucru?

Vrem să le spunem IE7 și 8 că este bine să folosim umbrele de pe cutie, colțurile rotunjite etc. Deci, pur și simplu adăugăm elementele din foaia de stil cu caracteristicile CSS3 în fișierul nostru ie.css, apoi vom folosi comportamentul pentru CSSPIE ca astfel?

 .tab-container> div> div, .tab-container> div> a comportament: url (? /styles/csspie/PIE.htc);

Buna treaba? Ai terminat!

Dacă ați ajuns atât de departe, atunci asta înseamnă că ați făcut toate astea? Felicitări! Sper că te-ai bucurat de acest tutorial la fel de mult cum mi-a plăcut scrisul. Este întotdeauna o plăcere să-ți înveți noi sfaturi și trucuri pe care probabil nu le știi deja. Cu asta a spus, lucrați bine, fiți răbdători și continuați să vă îmbogățiți cât mai multe cunoștințe posibil și înainte de a ști că veți fi maestru la ceea ce faceți!

Lăsați-vă comentariile și întrebările de mai jos;)

Web design