Három oszlop elrendezések gumi honlapok
- Három oszlop gumi
- A központi gumi, rögzített sidebars
- Gumi bal, jobb oldali oszlop rögzítve
- Három oszlop előtt egy gumi tartalom
Abban bevezetését elrendezések ne felejtsük el, hogy ha valamilyen HTML-elemeket a keret (CSS border tulajdonság), a külső területeken (CSS margin tulajdonság) vagy belső bemélyedés (CSS padding tulajdonság) növeli a méretét, és ez nagyobb lesz, mint azt a szélessége ( szélesség) és a magasság (magasság). Ha ez nem veszi figyelembe a bevezetését elrendezések is „megy”, vagy lesz a bevezetését az egyes HTML elemek egymás tetejére. Ilyen esetekben szükséges, hogy csökkentsék a szélessége és magassága az elemet a kívánt méretet.
Három oszlop gumi
Minta HTML és CSS: layout elrendezés három oszlop gumi
Leírás elrendezés
- Minden oszlop a három hasábos elrendezés lett megadva százalékos szélességét CSS szélességét.
- Oszlopok a menü és oldalsáv vittük CSS float tulajdonság azok megmászta a oldalára, hogy megakadályozza a tartalom emelkedett az azonos szinten velük.
- Ahhoz, hogy az oszlop tartalma nem úszni alatti id „menü” és id „oldalsáv”. Az ő oldalán a külső területeken meghatározásra kerültek (CSS margin) egyenlő a szélessége az oldalsó oszlopok.
- Hogy blokkolja a lábléc nem folyt az oszlop körül, amikor egy részük magasabb lesz, mint a többi, van id „footer” hozta létre áramlás megszakítása (CSS clear: both).
A központi gumi, rögzített sidebars
Minta HTML és CSS: layout elrendezés egy központi gumi és oldalsó fix oszlopok
Leírás elrendezés
Ebben a három oszlopot elrendezésének ugyanazokat a módszereket, mint az előző, azzal az eltéréssel, hogy a százalékok helyébe pixel.
Gumi bal, jobb oldali oszlop rögzítve
Minta HTML és CSS: layout elrendezés gumi Bal és jobb rögzített oszlopok
Leírás elrendezés
- Menü és az oldalsáv van állítva feljutás a jobb (CSS float), a tartalom az oszlop is obtech és egy szinttel feljebb a számukra.
- Az oszlopot az id = „content” jelzett kívül a jobb oldali mező (CSS margin-right) egyenlő a teljes szélessége a menü és az oldalsáv, így ő nem úszik alattuk.
- A lábléc semmilyen körülmények között nem folyt az oszlop körül, ő kapott CSS tiszta tulajdonság: mind a megszakítását az áramlás.
Három oszlop előtt egy gumi tartalom
Minta HTML és CSS: layout elrendezés egy gumiiartalom oszlop előtt
Leírás elrendezés
- Ahhoz, hogy ez a három hasábos elrendezés, a tartalom lehet kiszerelni a HTML-kódot, akkor kellett zárhatjuk egy extra burkolat blokk id = „cont_wrap”. Ő kapta a bal emelkedés (CSS float: left), hogy az oldalsó oszlopok egy szinttel feljebb léphet a tartalommal, és egy teljes szélességű (CSS szélesség: 100%) a mérete nem csökkent az azt követő emelkedés.
- Oszlopon tartalma nem merüljön alá oldalsáv, az id = „content” lettek telepítve oldali külső területeken (CSS margin) egyenlő a szélessége a helyi menüben.
- Ahhoz, hogy a hátsó hangsugárzók került a sor, kaptak egy negatív bal mező tulajdonságait CSS margin-left. menü, ahol ez egyenlő a 100% -os, és a tálaló - szélessége magát.
- A lábléc állítottuk megszakítás flow (CSS tiszta), úgy, hogy az oszlopokat.
- Hogyan készítsünk egy honlapot
magát ingyenes - HTML bemutató
kezdőknek - CSS Tutorial
kezdőknek - Irodalom
HTML és CSS - példák
HTML és CSS - referenciák
Hasznos weboldalak webmestereknek - szerszámok
Programok a weboldalak létrehozására