Selles artiklis selgitatakse, kuidas kolmes veerus paigutust CSS-is üles ehitada. Juhised kehtivad CSS3 ja vanemate versioonide kohta.

Joonista oma paigutus

Küljenduse saate joonistada paberile või a graafika programm. Kui teil on juba traadiraami või veelgi ulatuslikumat disaini silmas pidades, lihtsustage seda saidi moodustavate põhikastidega. Selle artikliga kaasasoleval kujundusel on põhisisu piirkonnas kolm veergu, samuti päis ja jalus. Lähemalt uurides näete, et kolm veergu ei ole võrdse laiusega.

Kui olete oma kujunduse välja joonistanud, võite hakata mõõtmeid mõtlema. Sellel disainilahenduse näidisel on järgmised põhimõõtmed:

• Mitte rohkem kui 900 pikslit lai
• 20 px renn vasakul
• 10 px veergude ja ridade vahel
• Veerud, mille laius on 250 pikslit, 300 pikslit ja 300 pikslit
• Ülemine rida on 150px pikk
• Alumine rida on 100 pikslit kõrge

Kirjutage Basic HTML / CSS ja looge konteinerelement

Kuna see leht on kehtiv HTML dokumendi, alustage tühja HTML-konteineriga.

Lisage CSS-i põhistiilid asukohta nullib lehe veerised, äärised ja padjad. Kuigi on ka teisi standardsed CSS-stiilid uute dokumentide jaoks on need stiilid minimaalsed, mida vajate puhta paigutuse saamiseks. Lisage need oma dokumendi otsa.

Paigutuse koostamise alustamiseks pange konteineri element. Mõnikord juhtub, et saate konteinerist hiljem vabaneda, kuid enamiku fikseeritud laiusega paigutuste korral on konteineri elemendi olemasolu hõlpsam haldamine kogu veebis brauserid.

Säilitage konteiner

Konteiner määratleb veebisaidi sisu laiuse, samuti kõik välised veerised ja siseküljed. Selle dokumendi jaoks on konteineri laius 870 pikslit, vasakul on 20 piksliline renn. Renn on seatud veerise stiiliga, kuid konteineri polster nullitakse, et ükski element ei oleks sama lai kui konteiner.

Kui salvestate oma dokumendi kohe, on konteinerit raske näha, kuna selles pole midagi. Kui lisate kohatäite teksti, näete konteineri elementi selgemini.

Kasutage päise jaoks pealkirja silti

See, kuidas otsustate päiserea stiili kujundada, sõltub paljuski selles sisalduvast. Kui päisereal on lihtsalt logo graafika ja pealkiri, siis pealkirja sildi (

) on mõttekam kui a

. Pealkirja saate kujundada samamoodi nagu div-i ja väldite kõrvalisi silte.

Päiserea HTML läheb konteineri ülaossa ja näeb välja selline:

Seejärel lisati sellele stiilide seadmiseks põhja punane ääris, nii et näete, kus see lõpeb, veerised ja polsterdused nulliti, laiuseks määrati 100% ja kõrguseks 150 pikslit.

Ärge unustage seda elementi ujukiga hõljuda: vasak; vara. CSS-paigutuste kirjutamise võti on hõljuda kõike, isegi asju, mis on konteineriga sama laiused. Nii teate alati, kus elemendid lehel asuvad.

A CSS järeltulija valija rakendas stiile ainult H1 elementidele, mis on elemendi #container sees.

Kolme veeru saamiseks alustage kahe veeru ehitamist

Kolme veerulise paigutuse loomisel CSS-iga peate jagama paigutuse kaheks rühmaks. Nii et selle kolme veeruga paigutuse jaoks rühmitatakse keskmine ja parem veerg ning paigutatakse vasakpoolse veeru kõrvale kahes veerus paigutus kus vasaku veeru laius on 250 pikslit ja parempoolse veeru laius 610 pikslit (kahe veeru jaoks kumbki 300 ja pluss 10 neid).

Vasakpoolne veerg hõljub vasakule, teine ​​aga paremale. Kuna mõlema veeru kogulaius on 860px, on nende vahel 10px renn.

Lisage laia teise veeru sisse kaks veergu

Kolme veeru loomiseks lisage laiema teise veeru sisse kaks divi, nagu lisasite viimases etapis konteineri veeru sisse 2 divi.

Kuna need kaks 300px laiust kasti asuvad 610px laiuse kasti sees, jääb nende vahele jällegi 10px renn.

Lisage jalusesse

Nüüd, kui ülejäänud leht on kujundatud, saate selle lisada jalusesse. Kasutage viimast div "jaluse" ID-ga ja lisage sisu nii, et saaksite seda näha. Ülaossa saate lisada ka piiri, nii et saate teada, kust see algab.

Lisage oma isiklikud stiilid ja sisu

Nüüd, kui küljendus on valmis, saate hakata lisama oma isiklikke stiile ja sisu. Pidage meeles, et päise ja jaluse piirid lisati paigutusosade kuvamiseks, mitte spetsiaalselt kujunduse jaoks.