șablon fix cu o singură coloană, lecții gratuite și aspect css

In aceasta si in următoarele trei lecții vom crea template-uri formate din una, două și trei coloane. În primul rând, exemple pentru a face aspect fix.
Creează un dosar separat pe desktop pentru un aspect fix cu o singură coloană, nume îl fix1.
Creați acest dosar sunt două fișiere: index.html și style.css.
Fișierul index.html, scrie următorul cod:
Aici, un identificator de unitate de folie va servi ca un container pentru capace, partea de conținut și un subsol. Să Completați blocuri:
Acum, în fiecare bloc, puteți adăuga un text pentru a face clar în cazul în care un bloc este în fereastra de browser:
Ne întoarcem la fișierul stiluri. Mai întâi restabiliți toate marjele:
Acum vom scrie proprietatile pentru blocul cu o folie de identificare:
proprietate marja cu o valoare de la 0 auto necesare pentru a se asigura că unitatea a fost localizat în centrul paginii web. Această caracteristică funcționează numai în cazul în care blocul conține lățime.
Pentru antet și subsol specifica înălțimea:
Pentru a selecta culoarea fiecărui bloc, să adăugați proprietăți culoare de fundal pentru următoarele selecții:
Salvați modificările și deschideți fișierul index.html în browser.
Nu este suficient de umplutură în interiorul unităților. Conținutul de blocuri de fișier index.html închise între tag-uri
Fișierul cu stiluri pentru această clasă pentru a adăuga umplutură folosind proprietățile umplutură:
Cum să bată subsol în partea de jos a paginii?
Foarte des clienții cer ca subsol a fost bătut în cuie în partea de jos a paginii. Acest lucru poate fi realizat prin scris câteva proprietăți pentru următoarele unități:
- Selectoare pentru HTML și corp trebuie să specificați o înălțime egală cu 100%.
- Pentru a stabili un selector înălțime minimă #wrap min-height: 100%;. precum și poziționarea relativă a poziției: relative;.
- La subsol pentru a instala poziția de poziționare absolută: absolută;. bottom bottom margin: 0;. și lățimea lățimii blocului: 100%;.
Acum, subsol va fi bătut în cuie la partea de jos a paginii. Salvați modificările și actualizați pagina în browser.
Dacă reduceți înălțimea ferestrei browser-ului, veți observa că în pivniță se execută conținutul blocului cu identificatorul
Șablonul este gata. Rezultatul browser-ul poate fi vizualizat aici. CSS pentru șablonul prezentat aici.