Share
Îmi place tab-urile, am făcut atât timp cât au fost în jur! Să vedem dacă putem folosi un javascript și o putere CSS3 pentru a construi o navigație cu tab-uri. Vom folosi javascript pentru a detecta automat tab-ul pe care vizitatorul este în prezent și chiar face acest lucru compatibil încă din IE6. Trăiască îndelung CSS3pie!
Partea ușoară?
Întrucât dorim ca pagina noastră să fie compatibilă cu IE 6-8, folosim doctype "HTML - 4.01 Transitional". Să aruncăm o privire la șablon:
testfile
Link-urile moarte sunt mai bune decât nici o legătură!
Editorul dvs. web ar trebui să aibă acest șablon, în caz contrar copiați-l în index.php în dosarul principal.
Avem trei fișiere externe pe care le vom crea sau adăuga mai târziu. Ca și străbunicul meu a spus întotdeauna: legăturile moarte sunt mai bune decât nici o legătură. pie.htc va fi legat din fișierul css, așa că trebuie doar să conectăm fișierul javascript și css.
testfile
Acesta este planul:
Containerul, antetul și conținutul sunt div straturi. Containerul conține totul și funcția sa este de a împiedica scăderea conținutului cu mai mult de 800 de pixeli. Antetul este sistemul tab și conținutul vorbește de la sine. Sistemul de taburi constă dintr-o listă neordonată pe care o aliniem orizontal. Fiecare element de listă conține un link către o altă pagină. Având în vedere acest lucru nu este greu să vină cu marcajele:
testfile
- DSNR Home
- Protecţie
- Brainz!
conţinut
Aceasta este ceea ce avem până acum:
Are toate funcționalitățile, dar clienții nu vor fi niciodată mulțumiți de un design atât de simplu. Veste bună pentru tine?
Deci avem nevoie de un stil de bază. Creați tabs.css și plasați-l în același director ca index.php
Începem cu styling-ul corpului și al containerului:
corp margine: 12px -12px; fundal-culoare: # 003; font-family: Arial, "MS Trebuchet", sans-serif; font-size: 16px; lățime: 100%; #container width: 800px; margin-stânga: auto; margin-dreapta: auto;
Nici un element nu are nimic special, cu excepția marjei. Containerul este ușor: dacă marginea-stânga și marginea dreaptă a unui element (cu o lățime definită) sunt setate automat, fiecare browser va încerca să centreze acel element.
Marja orizontală negativă a corpului nu este atât de greu. Lățimea containerului este de 800 de pixeli pentru compatibilitatea cu ecranele vechi, dar noi le vom adăuga colțuri rotunjite, fiecare cu o rază de 12 pixeli. Acest lucru face ca colțurile să se micșoreze, astfel încât să adăugăm o rezervă de 12 pixeli la container.
Verificați ce ați construit până acum. Dacă ecranul este prea mic (sub 800 de pixeli), veți observa marginile rotunjite la stânga. Ele nu sunt necesare, astfel încât marginea noastră negativă le împușcă frumos din vedere.
Pentru a păstra lucrurile ușor de citit, ar trebui să schimbăm culoarea de fond a conținutului și a filelor.
#header ul culoare-fundal: # 566AAA; #content background-color: #FFF;
Înainte de a continua să stylizăm filele, vrem să adăugăm una dintre cele mai importante (și chiar strălucitoare, deși eu spun eu) părți din aceasta: fila selectată trebuie să fie albă. Nu vom schimba filele pe fiecare pagină. Lăsăm javascriptul să facă munca murdară.
Accentsconagua
dacă document.addEventListener document.addEventListener ("DOMContentLoaded", funcție () ran = 1; init (), false) altfel dacă (document.all &&! window.opera) document.write (' testfile - DSNR Home
- Protecţie
- Brainz!
conţinut corp margine: 12px -12px; fundal-culoare: # 003; font-family: Arial, "MS Trebuchet", sans-serif; font-size: 16px; lățime: 100%; #container width: 800px; margin-stânga: auto; margin-dreapta: auto; #header width: 600px; marja: 0 auto; / * fundal-culoare: #FFF; * / #content background-color: #FFF; -moz-border-radius: 12px; -webkit-border-radius: 12px; raza de graniță: 12 pixeli; padding: 12px; comportament: url (/PIE.htc); #header ul -moz-border-radius: 12px 12px 0 0; -webkit-border-radius: 12px; raza de graniță: 12px 12px 0 0; marja: 0; lățime: 600px; umplutura: 0; fundal-culoare: # 566AAA; fundal: -webkit-gradient (liniar, 0 0, 0 de jos, de la (# 9FB6CD), la (# 003F87)); fundal: -moz-linear-gradient (# 9FB6CD, # 003F87); fundal: gradient liniar (# 9FB6CD, # 003F87); - fundal-fundal: gradient liniar (# 9FB6CD, # 003F87); listă-tip: none; comportament: url (/PIE.htc); overflow: vizibil; #header ul li margine: 0; padding: 0; afișare: inline-block; lățime: 33,3%; / * personalizați acest lucru! * / text-align: center; zoom: 1; * afișare: inline; #header ul li a text-decorare: nimic; culoare: # 005; font-weight: bold; lățime: 100%; înălțime: 100%; afișare: bloc; padding: 12px 0; text-shadow: 0 1px 1px #AAA; comportament: url (/PIE.htc); selectate behavior: url (/PIE.htc); box-shadow: 0 -3px 3px -1px # 222; -moz-border-radius: 12px 12px 0 0; -webkit-border-radius: 12px; raza de graniță: 12px 12px 0 0; fundal-culoare: #FFF;
dacă document.addEventListener document.addEventListener ("DOMContentLoaded", funcție () ran = 1; init (), false) altfel dacă (document.all &&! window.opera) document.write (''
