Salutări, dragi cititori ai micului meu blog!
Astăzi, nu este vorba despre programare ci despre aspect. Ne vom ocupa de filele site-ului. Tab-urile sunt tab-uri miniatură în care este localizat alt conținut. Ei ocupă foarte puțin spațiu, dar conținutul se potrivește foarte mult. De obicei, ele sunt situate în bara laterală (bara laterală) a site-ului.
Deci - facem file!
Una dintre problemele cele mai comune ale designerilor web este amplasarea unei cantități mari de informații pe o singură pagină fără pierderea confortului. Una dintre cele mai bune soluții la această problemă este folosirea filelor, care sunt adesea folosite de bloggeri. Acum vom examina un exemplu de creare a unei substraturi de informații ...
În primul rând, trebuie să creăm în Photoshop rezultatul final al chinurilor noastre, adică. alegeți culorile, dimensiunile, locația, astfel încât în viitor nu ar trebui să inventați nimic. Sincer, nu mi-am ales culorile, etc. pentru că designerul meu este inutil. Pe scurt, iată ce vom face:
Următorul pas este să creați cel puțin un aspect HTML aproximativ care arată astfel:
Aici am pus totul în etichetă
, și pentru tab-uri utilizate o listă, atunci există trei divas în ele va avea conținutul filelor.
Adăugăm la Html Css, sper că nu trebuie să fie descrisă conexiunea CSS în HTML. Apoi selectați și salvați fundalul din documentul PSD ca o imagine separată în același director ca și Html, mi-am sunat imaginea de fundal backraund.jpg. În continuare, îi prescriim corpului următoarele:
Aici am setat fundalul pentru corp, locația fundalului, a eliminat repetarea, a indicat și culoarea de fundal, adică fundalul din spatele imaginii.
Singurul lucru pe care aș vrea să-l notez aici este clasa activă care va avea tab-uri active, bine, restul sper să înțeleg. Acum, totul arată după cum urmează:
Acum vom începe să descrie toate clasele și ID-urile, și vom începe de la nivelul foarte sus-l
Apoi, descriem antetul, scriem fonturi, etc.
Ei bine, aici totul pare clar, nimic greu de explicat, nu voi merge mai departe.
Mai departe vom descrie un div intern cu o clasă tabbed_area pe care o descriem:
Aici am descris limitele cu o dimensiune de 1pixel și culorile # 494e52, de asemenea descrise pentru el un fundal gri și o margine internă de 8 pixeli care este umplutura.
Acum mergem în final la file. Va trebui să mergem mult înainte ca elementele noastre li să arate ca file:
Acest cod descrie ceea ce ul cu filele de clasă pot avea nici o padding nu externă internă, iar elementele Li se află în lista cu clasa de tab-uri nu au imagini rămase care apar în mod implicit, și pentru aceste elemente descrise astfel de proprietate ca afișaj în mod implicit, același bloc, ci la elementele listei care este aranjată orizontal li egalăm în linie de afișare.
Bineînțeles, filele noastre nu arată foarte bine, dar o vom rezolva acum, pentru poziționarea pe care am folosit-o
Acum, filele noastre arată astfel:
Schimbați ul.tabs după cum urmează, astfel încât să nu se intersecteze cu conținutul:
Acum vom completa filele cu conținut semnificativ. Am această listă de linkuri va schimba codul Html la:
Ei bine, pentru frumusetea lor, scriem următoarele stiluri:
Am acest lucru nu voi descrie, pentru că nu este o lecție osozdanii krassivo liste, cel care nu cunoaște css poate copia pur și simplu codul, iar cei care cunosc vor înțelege singurul lucru pe care aș dori să menționez este ul .content Li: ultimul copil cu ajutorul acestei noi udbiraem ultima linie din listă, precum și CSS3 în browsere mai vechi, iar unele noi încă va fi:
Descrieți pe scurt logica funcției. După cum puteți vedea funcția noastră trebuie să treacă două valori este new_tab și NEW_CONTENT, și așa mai treacă vom face ei au id-ul în jos file și conținutul filei, atunci funcția elimină toate clasa filele active A, chiar și în jos pentru că noi nu știm fila activă, și setați clasa activă la idul trecut, adică new_tab, după care devine alb, etc. Sootvetsyatvenno face același lucru pentru conținutul numai, noi nu l-au pus clasă și să-l conținut vizibil și invizibil ostolnoe cu ajutorul etalate: nici unul;
Acum trebuie să vă asigurați că faceți clic pe tab-ul efectuat tabSwitch () și peredovat id-ul ei și id-ul fila Conținut curent fila sootvetsvyuschego pentru a schimba lista de tab-uri, după cum urmează:
Acestea sunt filele pe care le avem!
În acest sens, lasă-mă să plec! Cu tine erai Yurich-ul tău!
P.S. În următorul articol, vom discuta cum să realizăm un calendar utilizând PHP și CSS. Ne vedem curând!
(Încă nu există rating)
Trimiteți-le prietenilor: