Rögzített sablon egy oszlop, ingyenes leckéket és CSS elrendezés

Ebben és a következő három órákat fogunk sablonokat, amely egy, kettő és három oszlopban. Először is, példa, rögzített elrendezésű.
Létrehozása az asztalon külön mappát rögzített elrendezés egy oszlopban nevét fix1.
Készítsen ezt a mappát két fájl: index.html és style.css.
Az index.html fájlt, írd be az alábbi kódot:
Itt a pakolás egység azonosítója fog szolgálni a konténer sapkák, a tartalom részt és egy pince. Töltsük be a blokkokat:
Most, minden blokk, akkor adjunk hozzá egy kevés szöveget, hogy tegye világossá, amikor a blokk a böngészőablakban:
Azt viszont, hogy a stílus fájlt. Először állítják az összes margók:
Most mi írjuk a tulajdonságokat a blokk egy azonosítóval pakolás:
margin tulajdonság, amelynek értéke 0 auto biztosítani kell, hogy az egység központjában található a weboldalt. Ez a funkció csak akkor működik, ha a blokk tartalmazza szélességét.
A fejléc és a lábléc A magasság:
A szín kiválasztásához az egyes blokkok, nézzük fűzze background-color tulajdonság az alábbiak közül:
A módosítások mentéséhez és nyissa meg a index.html fájlt a böngésző.
Nem elég padding az egységekben. A tartalma index.html fájl blokkolja bezárt címkék
A fájl a stílus ezen osztály felvenni padding a tulajdonságait padding:
Hogyan verte a pincétől a az oldal alján?
Nagyon gyakran az ügyfeleknek szükségük, hogy a pincében volt szögezve az az oldal alján. Ezt úgy lehet elérni, írásban néhány tulajdonságait a következő egységeket:
- Szelektor html és a test kell adnia a magassága egyenlő 100%.
- Létrehozni egy alapszintű választó #wrap magassága min-magasság: 100%;. valamint a relatív elhelyezése a helyzet: a relatív;.
- Ahhoz, hogy a pincében telepíteni abszolút pozicionálás position: absolute;. alsó margó alján: 0;. és a szélessége a blokk szélessége: 100%;.
Most, a pincében lesz szegezve az oldal alján. A módosítások mentéséhez és frissítse az oldalt a böngészőben.
Ha csökkenti a magassága a böngésző ablakot, akkor észrevehetjük, hogy a pincében fut be a blokk tartalmát az azonosító
A sablon kész. Az eredmény a böngésző itt lehet megtekinteni. CSS sablon itt bemutatott.