Blokk elrendezés css - CSS osztályok
Moduláris elrendezés CSS
Példaként azt lesz egy fix (merev) blokk elrendezés - azaz, ha megváltoztatja a böngésző ablakot átméretezi webhely őrizniük méreteiket. A sablon lesz: egy kupakot; egység tartalom; bal blokk; és pince;
Bár a fenti nevezték 4 blokk - valójában nem lesz több. Annak érdekében, hogy blokkolja nyomdai technológia egyértelmű volt -, hogy nézd meg az egyes blokk, és egy azonosító használható egyedül:
#main_pole <…> (
) - ebben a blokkban az egész site design. Stílusok használata azokra alkalmazott határozza meg a helyzetét egy hely tekintetében a böngésző ablakot, és a hossza a fejléc mező tartalmának (nem a pince);#header <…> (
) - a készülék felett található összes többi, és a hossza az egész oldalon. A fontos, hogy tegye közzé a nevét a honlapon. Vele, akkor megadhatja stílusok: a magasság, a szín eltolás és más paraméterek;#middle <…> (
) - egy nagy blokk, amelyen belül még három. A stílusok, megadhatja a szélessége a tartalom és a padding helyben pince. A fontos, hogy a vízszintes menü, hiszen lesz feszített a hossza az egész oldal, és a pályán a tartalmi és a jobb oldali hangszórók.A kiválasztó #middle: miután <…> Ez lesz három attribútumok navryatli érték tudod:
Element is (tulajdon): miután - azt jelenti, hogy a blokk tartalmát, amelyre használni az ingatlan után jelenik meg. Azaz, ha írsz helyette: miután tulajdonság: mielőtt - az alagsorban a honlap „csúszás” kupak alatti felül egyéb blokkok (kipróbálhatja);
tartalom: „” - a kijelző teljes tartalmát van írva követően egység;
clear: both - meghatározza, hogy mindkét oldalán az elem megtiltotta neki, csomagolja a többi elem;
display: table - ez jellemző az a tulajdonság-elem blokk asztal;
#container <…> (
) - tegyen rá ebben a mezőben, akkor az megjelenik a tetején minden tartalom, de ugyanazon a szinten a jobb oldali oszlopban.#content <…> (
) - Ez az egység kell elhelyezni az összes alapvető tartalommal (cikkek, táblázatok, képek, linkek, stb.) A kiválasztó létre egyetlen paraméter, amely megadja a behúzás.#right_bar <…> (
) - jobb oldali oszlopban. A kiválasztó paraméter margin-left: ... meg kell egyeznie a szélessége (hossza) a blokk.#footer <…> (
) - pince webhelyet számlálók és a linkeket a visszacsatolás, az ügyfélszolgálat és így tovább. A kiválasztó érték szélessége: ... értékűnek kell lennie, egyenlő szélességű: ... a #main_pole.Készítsen div_style.css fájlt, és helyezze alá írt kódot. Ez stíluslap lehet egy sablont a jövőben oldalon.
Most hozzon létre index_test.html fájlt. Ebben kerülnek elhelyezésre sablon szerkezetét, valamint néhány példa mutatja, munkastílus. Különösen kerül vízszintes legördülő menüből, amelynek létrehozását látták az előző leckét. Élén az oldal (
) Plug stílusok oldalakat és menüket.
Akkor csináld magad, hogy a szükséges stílust attribútumok blokkok feltüntetett adatok alapján a tanulságokat a CSS és HTML.
Így lehetséges, hogy egy egyszerű motor a helyén, ha minden egyes blokk helyezni egy külön fájlban, és csatlakoztassa a segítségével PHP - Így lehetővé válik, hogy a változások egy fájl, és meg fog jelenni az összes fájlt, amely bejelentette, ez az elem kapcsolatot. (PHP include csak akkor működik, ha a html-oldal a tárhely vagy otthoni szerver).