Gorilla Ügynökség Web Design | Internet Marketing | SEO

Hét CSS elrendezés tippek

By: Sandesh
A legnehezebb dolog a CSS, hogy rögtön az elrendezés a webhelyen. Íme néhány tipp foglalkozik csak azzal. Néhány ezek a tippek nem éppen új, vagy rakéta tudomány, de remélhetőleg fognak menteni valakinek egy kis kellemetlenség valahol!

1. tipp: Clear ki az alapértelmezett padding és margin beállítások Mielőtt munkához lát.

A különböző böngészők különböző alapértelmezett margin és padding méretű így akar kezdeni, tiszta lappal, hogy úgy mondjam. Használja ezt a parancsot:

*

(

margin: 0;

padding: 0;

border: 0;

)

törölje az összes alapértelmezett margin és padding beállítás. Szintén fontos megjegyezni, a határ, amely a készlet 0-ra. Kérjük, vegye figyelembe, hogy ha ezt megteszi, akkor is megszabadulni a bosszantó lila határ kerek click-képes képek, de egyesek azzal érvelnek, hogy a lila határ szükséges elérhetőségét és felhasználását. De sokan nem szeretik a lila határ kerek képet, és ez az egyik módja, hogy könnyen el lehet távolítani róla egy lépésben valósítja meg anélkül, hogy img border = 0 minden kép (amely ellentétben áll a szigorú szabályok jelölő bármely ügy).

Tipp 2: A központ a elrendezés, használja a konténer div tartalmaz minden olyan tartalmat

Nyilvánítja az alábbiak szerint:

# Konténer

(
margin: 0 auto;
szélesség: xxxpx;
)

Van néhány pont itt, hogy vegye tudomásul. NE állapítsa meg a szélességet 100%. Ez a vereség az egész objektumot, mivel akkor csak be kell jelenteniük az al elemeit a tartályt, majd a központban azokat az "margin: 0 auto. Ez nagyon rossz, mivel ez azt jelenti, hogy ahelyett, hogy kimondja a központi elrendezést egyszer, akkor be kell jelenteniük, hogy több helyen minden egyes eleme a tartályba.

Tipp 3: A munka a felülről lefelé

Szó elkezd dolgozni a CSS layout kezdve a legfelső eleme a tervezés, valamint a "top" elemek a HTML, mint a test, valamint a fő konténer.

Állapítsa meg a CSS parancsok a lehető legmagasabb szinten, és próbálja meg, és állapítsa meg valamit csak egyszer, és hagyjuk, hogy lépcsőzetes az egész. Csak felülbírálja a parancsokat egy alacsonyabb szinten, ha feltétlenül szükséges. Ez megakadályozza, hogy egy részletes CSS fájl nehéz lenne fenntartani, és megérteni. Például, ha (margin: 0 auto) beállításokat minden egyes al div belül a tartályban - ha bajban vannak.

4. tipp: A dokumentum, amit csinálsz, és használja a Firebug, és a Firefox böngésző debug

Ön nincs írás a CSS kód csak magának, egy szép napon egy szegény pasi meg kell debug meg. Teszi számos észrevétel belül a CSS fájlban megmagyarázni, miért dolgokat egy bizonyos módon.

Pal való összhang e, akkor találja magát kelljen rögzíteni valaki másnak a CSS gyakrabban mint gondolnánk (vagy akár a saját, ami azt illeti). Használja a Firebug add-on a Firefox-hoz hibakeresés a CSS. Ez egy életmentő tekintetében, hogy így Ön betekintést, hogy hol a tervezési Lehet, hogy eltört, és miért.

Az egyetlen probléma ezzel az, hogy a tervezési munka is tökéletesen Firefox, de nem az IE5, IE6 és IE7. Ez elvezet minket a következő csúcsát.

5. tipp: Döntse el, milyen böngészőt fogsz építeni a CSS és a vizsgálat megkezdése

Néhány nyelvművelő ragaszkodnak ügyelve arra, hogy a webhely a munka minden lehetséges böngészők, mások csak az, hogy működjön a "nagy" böngészők. Honnan lehet tudni, pontosan melyik böngészőt használja a legjobban? Ismét W3 Schools siessen.

A következő oldalon látható, amely a böngészők a legnépszerűbbek: http://www.w3schools.com/browsers/browsers_stats.asp. Ezen az oldalon láthatod, hogy valami hasonló IE5 csak akkor kerül sor mintegy 1,1%-a böngészők. Ez rajtad múlik, hogy Ön szerint érdemes építeni a CSS, hogy összeegyeztethető legyen a böngésző, vagy akár csak megy, hogy tesztelje a kompatibilitás IE6, IE7 és Firefox, pl. Bármit is csinál, mikor kezdjék építeni a CSS-t, indul a felső, és a vizsgálat minden egyes beállítást az egyes böngészők, mint te menj végig. Semmi sem rosszabb, mint épület tökéletes honlap Firefox, majd kideríteni jogát, miután kódolt 1000 sort css fájlt, hogy sérült a IE6. Hogy aztán debug, és meghatározza a kód után az a tény is egy rémálom.

Tipp 6: Itt van egy kínos tippet rögzítésére a CSS IE6 és IE7

Tegyük fel, hogy a design tökéletesen működik a Firefox, de törve az IE6. Nem használhatja a Firebug meghatározni, ahol a probléma lehet, mivel működik a Firefox. Nem kell a luxus a Firebug segítségével az IE6, hogy hogyan hibakeresés az IE6 és IE7 stíluslap? Sokszor úgy találta, hogy ez segít hozzá (border: 1 px folyamatos vörös, vagy) (border: 1 px szilárd lila) a problémás elemek. Így gyakran látni, amiért egyes elemek nem fér bele a rendelkezésre álló hely. Ez egy kínos tippet, mert annyira primitív és egyszerű, de működik!

7. tipp: Értsd meg úszók

Lebegő elemek megértéséhez elengedhetetlenek, különösen az összefüggésben a szerzés lebegett elemek dolgozni a különböző böngészők!

Alapvetően elemek, mint például a divs lebegett a bal vagy a jobb (nem a felső vagy az alsó, csak az oldalra). Íme néhány dolog, hogy vegye figyelembe az lebegett elemekkel. Minden lebegett elemet kell kifejezett szélessége adott. Ha Ön kihasználva szállt divs létrehozni a 3 oszlop vagy 2 hasábos elrendezés, nem adja meg a szélességét tekintve százalékos helyett fix szélességű, és ha nem használja százalékos, győződjön meg arról, hogy a százalékok nem stimmel 100 %, ez gyakran okoz a jogot leginkább oszlop alá csökken a többi, egyértelműen jelzi, hogy a kívánt illik valamit a rendelkezésre álló teret, hogy túl széles hozzá. Inkább használja százalékok, hogy adja ki az valamivel kisebb, mint 100%, mint 25%, 49%, 24%-a bal oldali oszlop, középső oszlop és a jobb oldali oszlop.

Lebegő elemek rendkívül bonyolult megérteni, és azt érdemes eltölteni egy kis időt jó helyek, amelyek konkrét iránymutatások és tanácsok, mint például a pozíció Mindent honlapján.

Következtetés

Ezek a tippek CSS elrendezést remélhetőleg menteni egy kis időt és energiát, amikor legközelebb van a panel-beat asztali kevésbé design alázat!

© 2009, admin . Copyright 2009. Minden jog fenntartva.

Megment