Sedem CSS Layout Nasveti

By: Sandesh
Najtežja stvar v CSS, da se pravica je postavitev vaše spletne strani. Tukaj je nekaj nasvetov, ki se ukvarjajo samo s tem. Nekatere od teh nasvetov niso ravno nove, ali raketni tehniki, vendar upamo, bo prihranek nekdo malo moti nekje!

Nasvet 1: Clear iz privzete nastavitve robov in oblazinjenja, preden začnete delati.

Različnimi brskalniki imajo različne default kapital in polnilo velikosti, tako da boste želeli začeti s čisto skrilavca, tako rekoč. Uporabite ta ukaz:

*

(

marža: 0;

padding: 0;

border: 0;

)

Če želite počistiti vse privzete nastavitve kapital in polnilo. Upoštevajte tudi, meje, ki je nastavljena na 0. Prosimo, upoštevajte, da če to naredite, boste tudi znebili nadležen vijolične okrogle meje klik-lahko slike, čeprav nekateri ljudje trdijo, da je vijolična meja, potrebnih za dostopnost in uporabnost. Ampak veliko ljudi ne marajo vijolične slike okroglo mejo, in to je eden od načinov, da lahko dobili rešiti česa to v enem naletu, ne da bi iz img border = 0 za vsako sliko (kar je v nasprotju s strogimi pravili markup v vsakem primeru).

Nasvet 2: Če želite centra za postavitev, uporabite posodo div, da vsebuje vse svoje vsebine

Izjavi, da na naslednji način:

# Zabojnik

(
marža: 0 auto;
širina: xxxpx;
)

Obstaja nekaj točk tukaj, da upoštevajo. NE razglasi širine, ki jo 100%. Ta poraz celotnega objekta, saj boste le morali prijaviti pod elementi v posodo in nato center, ki jih uporabljajo stopnje: 0 avto. To je zelo slabo, saj pomeni, da namesto o razglasitvi centralnih postavitev enkrat, boste morali, da ga razglasi na več mestih za vsak element v vašem posodo.

Nasvet 3: Delo od zgoraj navzdol

Dobesedno začeli delati na vaši postavitev CSS začenši z vrha najbolj elementov v oblikovanju, kot tudi "top" elementov v HTML, kot je telo, kot tudi vaše glavne posode.

Razglasi svoj CSS ukazov na najvišji možni ravni, in poskusite in izjaviti, nekaj samo enkrat in jo pustiti kaskade v celotnem besedilu. Samo prednost ukaze na nižji ravni, kadar je to nujno potrebno. To preprečuje verbose CSS datoteko, ki je težko vzdrževati in razumeti. Na primer, če imate (margin: 0 auto) nastavitve na vsak sub div v vašem posodo - ti so v težavah.

Nasvet 4: Listina, kaj počnete in uporabo Palikuća in brskalnik Firefox za debug

Niste pisanje CSS kode samo za sebe, nekega dne bodo nekateri slabe sod življati v debug. Znamka številne pripombe v vašem CSS datoteko, da pojasni, zakaj počneš stvari na določen način.

Umestitve v tem, lahko, da boš ob določiti nekoga drugega CSS pogosteje, kot si mislite (ali celo vaše lastne, za to zadevo). Uporabite Firebug add-on za Firefox, da debug vaš CSS. To je življenje varčevanja v zvezi z vam vpogled v prav tam, kjer lahko vaš design zdrobljen in zakaj.

Edini problem pri tem je, da bi vaš načrt dela, v celoti v Firefox, vendar ne v IE5, IE6 ali IE7. To nas pripelje do naslednjega vrha.

Nasvet 5: Odločite se, katero brskalniki boste, da zgradite svoj CSS za test in od začetka

Nekateri puristi vztrajajo na zagotavljanje, da vaše spletne strani dela za vse možne brskalnike, druge pa le da bo delo za "velike" brskalniki. Kako veš točno, ki se uporabljajo brskalnike najbolj? Še enkrat W3 šole prišel na pomoč.

Na naslednji strani lahko vidite, kateri brskalniki so najbolj priljubljenih: http://www.w3schools.com/browsers/browsers_stats.asp. S te strani lahko vidite, da nekaj takega IE5 se uporablja samo za približno 1,1% brskalnikov. To je do vas, ali menite, da je pomembno, da zgradite svoj CSS, da so združljivi s tem brskalnikom, ali ste šele tekoč, da preizkusite svoje združljivosti z IE6, IE7 in Firefox, na primer. Karkoli narediš, ko ste začeli gradnjo svojega CSS, začnete z vrha, in test vsak nastavitev v vseh brskalnikih, kot si gredo skupaj. Nič ni slabše, kot izgradnjo odlično spletno stran v Firefox, potem pa ugotovite, desno, ko ste kodiran css 1000 črto datoteke, ki je razbit v IE6. Nato debug in določi vaš šifro po Dejstvo je nočna mora.

Nasvet 6: Tukaj je neprijetno mali namig za določitev vaš CSS v IE6 ali IE7

Recimo, da vaš načrt dela, v celoti v Firefox, vendar pa je zdrobljen v IE6. Ne morete uporabiti Palikuća ugotoviti, kje bi lahko problem, saj deluje v Firefox. Nimate razkošje uporabe Palikuća v IE6, tako da kako si debug IE6 ali IE7 slogi? Sem pogosto ugotovila, da pomaga dodati (border: 1 px trdna rdeča) ali (border: 1 px trdna vijolično) za problematične elemente. Na ta način lahko pogosto videti, zakaj določene elemente, se ne prilegajo v prostor na voljo. To je neprijetno malo tip, saj je tako primitivna in enostavna, vendar deluje!

Nasvet 7: Razumevanje boje

Plavajoča elementov je bistveno razumeti, zlasti v zvezi z pridobivanje vaš zraku elemente za delo v različnih brskalnikih!

V bistvu elementi, kot so divs so v zraku v levo ali desno (nikoli na vrh ali na dno, samo vstran). Tukaj je nekaj stvari upoštevati z elementi v zraku. Vsak element v zraku mora imeti izrecno določeno širino. Če ste se z uporabo v zraku divs za ustvarjanje a 3 stolpec ali 2 stolpca postavitev, bolj natančno širine v zvezi z odstotki in ne od določene širine, in če ne uporabljajo odstotki, poskrbite, da odstotki ne ujemajo s 100 %, bo to pogosto povzroča desni stolpec najbolj padel pod ostalo, jasno kaže, da se potrudiš, da ustreza nekaj v razpoložljivega prostora, ki je preširok za to. Raje uporabiti odstotek, ki ga dodate do malo pod 100%, kot 25%, 49%, 24% za levi stolpec, srednji stolpec in desni stolpec.

Plavajoča elementov lahko zelo zapleten za razumevanje in je vredno, da bi preživela nekaj časa, je dobro mest, ki zagotavljajo posebne smernice in nasvete, kot je položaj vse strani.

Zaključek

Ti CSS nasvetov za postavitev bi upamo prihranite nekaj časa in truda, ko boste naslednjič morali panel-beat namiznih manj design v oddajo!

© 2009, admin . Copyright 2009. Vse pravice pridržane.

Shrani

Tags: css postavitev , CSS nasveti

Ta vnos je bil objavljen na ponedeljek, oktober 26th, 2009 v 1121: pm ter je vložena na podlagi Web Design . Lahko sledenje vseh odzivov na to vstop skozi RSS 2.0 feed.