1. Crearea unui bloc-recipient comun
Blocuri desemnate de deschidere și eticheta de închidere
Așa cum am creat pagina va crea un container comun si identefitsiruem-l ca un „container“, codul va fi:
și în fișierul style.css adăuga stil la acest container, vom specifica dimensiunea lățimea și înălțimea containerului, culoarea de fundal, bine, care a fost în mod clar vizibil container cadru va adăuga bordură
Marja de #container: 0 auto;
text-align: left;
lățime: 1037px;
înălțime: 700 de pixeli;
background-color: # F3FAFF;
frontieră: solid 1px # 999999;
>
și uite ce sa întâmplat pe exemplu pagina html (se deschide într-o filă nouă) și în fișierul de intrare style.css ar arăta
După cum puteți vedea containerul nostru de bloc pornit dimensiunile stabilite
width: width = "1037px",
Înălțime: înălțime = „700 de pixeli“
bloc De obicei, dimensiunea lățimii este setată în cifre concrete, și înălțimea ca un procent de 100%, iar cel puțin umple conținutul paginii, acesta va fi tras de mare, dar un bun exemplu este listat înălțimea reală, dacă am stabilit înălțime = 100%, veți vedea doar pe pagina bara orizontală de sus, este marginea de sus și de jos, comasate într-o singură linie, pentru că nimic nu este plasat în container
2. Crearea unui bloc pentru antet și meniul de sus
Mai departe în blocul „container“ pentru a plasa antetul bloc a site-ului și să identifice-l ca un „antet“ și o unitate pentru meniul de sus, identefitsiruem-l ca „top_menu“
Pentru blocuri „antet“ și „top_menu“ prescrie stiluri în fișierul style.css
#header background-image: url (images / header.jpg);
lățime: 1037px;
height: 197px;
>
#top_menu background-color: # E1C435;
background-image: url (images / menu.jpg);
lățime: 1037px;
înălțime: 37px;
>
Acum, pagina noastră va arăta. un record în csstakoy fișierului de stil
3. Stabilirea stânga, dreapta și centru de blocuri
Apoi, creați blocuri stânga, dreapta și centru al paginii și le indefetsiruem ca:
id = "left"
id = "dreapta"
id = "conținut"
Fișierul de stil css pentru aceste blocuri prescrie stiluri, coloana din stânga și din dreapta cere latime dimensiunea 230px, iar valoarea float-folie pentru difuzor stânga și, respectiv, coloana din dreapta-dreapta și lățimea coloanei centrul setat nu este necesar, și numai decalajele din stânga și marginea din dreapta a unității centrale. Adăugați la lățimea blocurilor din stânga și din dreapta de 2 pixeli în stiluri și prescrie indentare 232px
Acum, pagina de site-ul nostru arată. și intrarea în style.css fișier va fi un astfel de
4. Crearea unui bloc de fund pentru o pagină
Înainte de partea de jos bloc a paginii, a crea un bloc gol și indefitsiruem-l ca un „clar“, acest bloc, deoarece trage o linie sub trei blocuri - stânga, dreapta și centru de difuzoare, precum și a crea un bloc și indefitsiruem-l ca un „subsol“
Iar în fișierul style.css adăuga stiluri pentru aceste blocuri
#footer background-color: # C5AC2E;
background-image: url (images / footer.jpg);
lățime: 1036px;
înălțime: 25px;
padding-top: 0px;
text-align: center;
>
Acum, pagina noastră de HTML a site-ului arata ca. și intrarea în style.css fișierul va fi
Rămâne să se stabilească partea de sus și meniurile din stânga și cadru pagină este gata, urmăriți continuare, apăsați 4