Hogyan készítsünk egy gumi keret webhelyről
Műszaki problémák „Layout, design, grafika
Hogyan készítsünk egy gumi keret webhelyről
1. lépés - Az általános koncepció. Mi határozza meg a maximális és minimális mérete a helyszínen, a számos oldalsáv.
2. lépés - Készítse elő a munkahelyen. Hozzon létre egy mappát, amely létrehozza a HTML és CSS dokumentumot.
3. lépés - a html dokumentum előírja blokkok: fejléc, topNav, leftNav, tartalom, rightNav, lábléc.
4. lépés - vizsgáltuk a CSS.
Beszéljen a prioritások gumi oldalakat, azt hiszem, nincs értelme. Ebben a tutorial, fejlesztünk keret gumi DIVah weboldal CSS segítségével.
1. lépés: a helyszínen kezdődik az általános fogalom, azaz a coder határozza meg a teljes design az oldalon. Tegyük fel, hogy meg kell előírni helyszínen 3 blokk navigáció - top, balra és jobbra. A maximális szélessége a helyszínen kell lennie 1660px, és a minimális 990px, ma ez a legjobb megoldás.
Az összes kijelölése kód:
Ha részt vesz az internetes marketing, thenyou've valószínűleg már szemtől-szembe a saját # 1enemy - „időrabló”.
Ne ctr + c és ctr + v, akkor jobb, ha előírják az ujjait (a kalapáccsal az ujjai a hölgyek)! Megírása után mentse a fájlt (CTR + s).
4. lépés: Az előző lépésben regisztráltunk html keret, de ez semmi. Mi lenne neki az összes tulajdonságait a gumi keret kell dolgozni css, mint mi most nem.
Nyissa meg a style.css. Először is nézzük, hogy a körvonal - line.
Ez a szabály -, hogy minden a div. sor: 1piksel feketének;. Mentsd el a fájlt (CTR + s), futtassa az index.html egy böngészővel. Ha helyesen tette, ha az oldal egy rekordot, amely körül 4 sor.
Adunk magassága és szélessége blokkok
Az összes kijelölése kód: #wrapper szélesség: 96%;
magasság: 2300px;
margin: 0 auto;
vázlat: 1px solid # FF0000;
>
Ebben a kódot adtunk csomagoló (wrapper) - a szélesség (szélesség) 96%, mert mi gumi tervezési magassága (magasság) 2300pikselya, hogy középre wrapper margin: 0 auto. Valószínűleg észrevette, hogy egy ismerős vázlat ingatlan, most egy külön blokkot borítás adta piros vonal. Mentsd el a fájlt (CTR + s), frissítse a böngészőt (F5). Meg kell látni egy piros vonal. Ha igen, lépni:
Az összes kijelölése kód: #header magassága: 150px;
szélesség: 100%;
margin-bottom: 20px;
vázlat: 1px solid # 000000;
>
#topNav magasság: 48px;
szélesség: 100%;
margin-bottom: 20px;
vázlat: 1px solid # 4813F4;
>
#content float: left;
margin: 0 255px;
vázlat: 1px solid # d5c904;
text-align: indokolják;
>
#leftNav árrés: -245px 0 -100 0%;
float: left;
szélesség: 240px;
magasság: 500px;
vázlat: 1px solid # 000000
>
#rightNav margin-left: -245px;
float: right;
szélesség: 240px;
magasság: 400px;
vázlat: 1px solid # 000000;
>
#footer magassága: 50 képpont;
vázlat: 1px solid # 4813F4;
>
Mit csináltunk:
Egység tartalom:
Tartalom letiltása adott áramlási körbe balra (float: left), külső padding margin: 0 255px, hogy a bal és jobb 255pikselya. Szöveg adott tulajdonság a text-align: bizonyíthat;, hogy a szöveg az egész blokk.
leftNav egység:
margin: 0 -245px 0 -100%; - ez azt jelenti,: felülről 0pikselya a jobb -245pikselya a 0pikselya lefelé és balról -100% (nem maradt a blokk a tartalommal). Szélességű 240pikselya, és a magassága amelyet el kell távolítani a megjelenése után a navigációt.
rightNav egység:
margin-left: -245px - mászni a blokk tartalmát. float: right - lezárja a jobb oldalon. Magasság után el kell távolítani a megjelenése bejegyzések ebben a blokkban.
Most a tetején a dokumentum felsorolja a style.css
min-width - a minimális szélessége az oldalon.
max-width - a maximális szélessége a helyszínen, azaz a site nyúlik 1660pikseley esetünkben.
És mit csinál a gumi keret oldalon.
_________________
tárcámat
Hogyan írja elő azt a HTML és CSS.
_________________
Itt veszek forgalom
andreykashops írta (a): Ruslan, itt vagyok, hogy vordperss témája a helyszínen, a letöltött téma -, amelyek alapján azt megváltoztatják maga alá.
Nem szeretem a menüt, amely a tetején az oldalon, szeretnék mozgatni a kupak alatt.
Hogyan írja elő azt a HTML és CSS?
1. lehetőség. A html fájl vágott menüt, ahol be szeretné szúrni
2. lehetőség. A szelektor css fájl, amely a tulajdonságok menüt, regisztrálja
top: -160px; - ez függ a mérete sapkák. Ha ez 150px, akkor bude menü alatta 10px.
Ja, és hagyja, hogy a kupakot positin: relatív; - kell elhelyezni, viszonyítva a blokk kupakot.