Tässä artikkelissa kerrotaan, miten 3-sarakkeinen ulkoasu rakennetaan CSS: ssä. Ohjeet koskevat CSS3: ta ja vanhempia.

Piirrä asettelu

Voit piirtää asettelusi paperille tai a grafiikkaohjelma. Jos sinulla on jo mielessä langankehys tai jopa laajempi muotoilu, yksinkertaista se sivuston laatikoihin. Tässä artikkelissa mukana olevassa mallissa on kolme saraketta pääsisältöalueella sekä otsikko ja alatunniste. Tarkastellessasi tarkalleen näet, että kolme saraketta eivät ole yhtä leveitä.

Kun olet asettanut ulkoasun, voit alkaa miettiä ulottuvuuksia. Tällä mallisuunnitelmalla on seuraavat perusmitat:

• Enintään 900 pikseliä leveä
• 20 px kouru vasemmalla
• 10 pikseliä sarakkeiden ja rivien välillä
• Sarakkeet, jotka ovat 250 kuvapistettä, 300 kuvapistettä ja 300 kuvapistettä
instagram viewer
• Ylimmän rivin pituus on 150 kuvapistettä
• Alarivi on 100 kuvapistettä pitkä

Kirjoita HTML / CSS-perustiedot ja luo säiliöelementti

Koska tämä sivu on kelvollinen HTML aloita tyhjällä HTML-säilöllä.

Lisää CSS: n perustyyleihin nollaa sivun marginaalit, reunukset ja pehmusteet. Vaikka on muitakin tavalliset CSS-tyylit Uusille asiakirjoille nämä tyylit ovat vähimmäisvaatimukset, jotta saat siistin asettelun. Lisää ne asiakirjan päähän.

Aloita asettelun rakentaminen asettamalla konttielementti. Joskus tapahtuu, että voit päästä eroon säilöstä myöhemmin, mutta useimmille kiinteän leveyden asetteluille konttielementin hallinta helpottaa hallintaa eri Webissä selaimet.

Tyylittele kontti

Säiliö määrittää, kuinka leveä verkkosivun sisältö on, sekä mahdolliset marginaalit ympärillä ja sisäpuoliset täytteet. Tätä asiakirjaa varten säiliön leveys on 870 kuvapistettä ja vasemmalla puolella on 20 kuvapisteen kouru. Kouru on asetettu marginaalityyliin, mutta säiliön pehmuste nollataan, jotta elementit eivät ole yhtä leveitä kuin säiliö.

Jos tallennat asiakirjan nyt, säilöä on vaikea nähdä, koska siinä ei ole mitään. Jos lisäät paikkamerkkitekstin, näet säiliöelementin selkeämmin.

Käytä otsikkotunnistetta otsikkotunnisteella

Kuinka päätät tyylittää otsikkorivin, riippuu paljon siitä, mitä siinä on. Jos otsikkorivillä on vain logokuvio ja otsikko, käytä otsikkotunnistetta (

) on järkevämpää kuin käyttää a

. Voit tyylittää otsikon samalla tavalla kuin div-tyylin, ja vältät ylimääräisiä tunnisteita.

Otsikkorivin HTML-koodi menee säilön yläosaan ja näyttää tältä:

Sitten sen tyylien asettamiseksi alareunaan lisättiin punainen reunus, jotta voit nähdä, mihin se päättyy, marginaalit ja pehmusteet nollattiin, leveys asetettiin 100%: ksi ja korkeus 150 pikseliksi.

Älä unohda kelluttaa tätä elementtiä kellukkeella: vasen; omaisuus. CSS-asettelujen kirjoittamisen avain on kellua kaikessa, jopa asiat, jotka ovat samaa leveyttä kuin säilö. Näin tiedät aina, missä elementit sijaitsevat sivulla.

A CSS-jälkeläisten valitsin käytti tyylejä vain H1-elementteihin, jotka ovat #container-elementin sisällä.

Jos haluat saada kolme saraketta, aloita rakentamalla kaksi saraketta

Kun rakennat kolmen sarakkeen asettelun CSS: n avulla, sinun on jaettava asettelu kahteen ryhmään. Joten tälle kolmen sarakkeen asettelulle keski- ja oikea sarake ja ryhmitelty ja sijoitettu vasemman sarakkeen viereen kahden sarakkeen asettelussa jossa vasemman sarakkeen leveys on 250 kuvapistettä ja oikean sarakkeen leveys on 610 kuvapistettä (300 saraketta kahdelle sarakkeelle ja 10 kuvapistettä kourulle niitä).

Vasemmalla oleva sarake kelluu vasemmalle, kun taas toinen kelluu oikealle. Koska molempien sarakkeiden kokonaisleveys on 860 kuvapistettä, niiden välissä on 10 kuvapisteen kouru.

Lisää kaksi saraketta leveän toisen sarakkeen sisälle

Luo kolme saraketta lisäämällä kaksi divia laajemman toisen sarakkeen sisään, aivan kuten lisäsit 2 divia säiliösarakkeen sisään viimeisessä vaiheessa.

Koska nämä kaksi 300 kuvapisteen levyistä laatikkoa ovat 610 kuvapisteen levyisen laatikon sisällä, niiden välissä on jälleen 10 kuvapisteen kouru.

Lisää alatunnisteeseen

Nyt kun loput sivusta on tyyliltään, voit lisätä alatunnisteeseen. Käytä viimeistä div: ää alatunnisteen kanssa ja lisää sisältöä, jotta näet sen. Voit myös lisätä reunan yläreunaan, jotta tiedät, mistä se alkaa.

Lisää omat tyylisi ja sisältösi

Nyt kun asettelu on valmis, voit aloittaa omien tyyliesi ja sisältösi lisäämisen. Muista, että otsikon ja alatunnisteen reunat lisättiin näyttämään asettelut, ei erityisesti suunnittelua varten.