aspect modular în CSS
Ca un exemplu, se va face o (rigidă) cu aspect fix bloc - care este, site-ul atunci când modificați fereastra browser-ul Web este redimensionat va păstra dimensiunile lor. Șablonul va fi: un capac; Unitate de conținut; blocul din stânga; și subsol;
Deși de mai sus și a fost numit 4 blocuri - de fapt, nu vor fi mai mult. Pentru ca ar bloca tehnologia typesetting a fost clar - să se uite la fiecare bloc și un identificator utilizat pentru el singur:
#main_pole <…> (
) - în acest bloc este tot designul site-ului. Folosind stiluri de aplicat pe aceasta este determinată de poziția unui site în raport cu fereastra browser web, iar lungimea câmpului antet al conținutului (nu subsol);#header <…> (
) - această unitate se află mai presus de toate celelalte și este lungimea întregului site. În important să publice numele site-ului. Cu acesta, puteți specifica stiluri: înălțimea, devierilor de culoare și a altor parametri;#middle <…> (
) - un bloc mare în care sunt mai mult de trei. Cu stiluri, puteți specifica lățimea conținutului și padding pe site-ul pivniță. În important să se plaseze meniul orizontal, deoarece va fi întinsă la lungimea întregului site și să fie pe teren pentru conținut și difuzoarele dreapta.#middle selector: după <…> Acesta va avea trei atribute care valoarea navryatli le cunoașteți:
Element în sine (proprietate): după - înseamnă că conținutul blocului la care să utilizeze această proprietate va fi afișată după ea. Adică, dacă ai scrie în schimb: după proprietate: înainte - subsolul site-ului „crawl“ sub capacul de pe partea de sus a altor blocuri (puteți încerca);
conținut: „“ - întregul conținut de afișare este scris după aceea unitate;
clar: ambele - se specifică faptul că pe ambele părți ale elementului interzis să-l înfășurați celelalte elemente;
afișare: tabel - acest atribut oferă tabelul de proprietate element al blocului;
#container <…> (
) - plasarea nimic în această casetă, acesta va fi afișat în partea de sus a întregului conținut, dar pe același nivel cu coloana din dreapta.#content <…> (
) - Această unitate ar trebui să fie plasat tot conținutul de bază (articole, tabele, imagini, link-uri, etc.). Selectorul a stabilit un singur parametru care specifică indentare.#right_bar <…> (
) - coloana din dreapta. Parametrul selector margine-stânga: ... ar trebui să fie egală cu lățimea (lungimea) a blocului.#footer <…> (
) - site-ul pivniță a fost găzduit pe contoare și link-uri la feedback-ul, de asistență pentru clienți și mai mult. Valoarea lățimii selectorului: ... Valoarea trebuie să fie lățime egală: ... în #main_pole.Creați fișiere div_style.css și puneți-l sub codul scris. Acest lucru poate fi un stylesheet șablon pentru site-ul dvs. în viitor.
Acum creați fișierul index_test.html. In ea va fi plasat structura șablon, precum și câteva exemple care arată stiluri de lucru. În special, acesta va fi plasat orizontal meniul vertical, din care unitatea a fost văzută într-o lecție anterioară. La capul paginii (
) Plug stiluri pentru pagini și meniuri.
Poti sa o faci singur pentru a adăuga stilul necesar atributele pentru blocurile pe baza informațiilor conținute în lecțiile CSS și HTML.
Astfel, este posibil să se facă un motor simplu pentru site-ul dvs., în cazul în care fiecare dintre blocurile au fost plasate într-un fișier separat și să-l conecteze cu ajutorul PHP - Deci, va fi posibil să se facă modificări într-un singur fișier, iar acestea vor apărea în toate fișierele, care a anunțat această conexiune elementul. (PHP includ va funcționa numai dacă HTML-pagină este pe serverul de hosting sau acasă).