CSS layout krever at du tenker på ditt nettsted layout som en helhet, og deretter ta bitene og sette dem sammen. Lær hvordan du bygger en enkel 3-kolonne layout med CSS.
01 av 09Tegn ditt oppsett
Du kan tegne oppsettet på papir eller i et grafikkprogram. Hvis du allerede har en ledningsramme eller enda mer omfattende design i tankene, forenkle det til de grunnleggende boksene som utgjør nettstedet. Dette designet som følger med denne artikkelen, har tre kolonner i hovedinnholdsområdet, samt en overskrift og bunntekst. Hvis du ser nøye ut, kan du se at de tre kolonnene ikke er like bredde.
Etter at du har trukket opp oppsettet ditt, kan du begynne å tenke på dimensjoner. Dette eksempeldesignet har følgende grunnleggende dimensjoner:
- Ikke mer enn 900 piksler bredt
- 20 px renner til venstre
- 10 px mellom kolonner og rader
- Kolonner som er 250px, 300px og 300px bred
- Den øverste raden er 150px høy
- Den nederste raden er 100px høy
Skriv grunnleggende HTML / CSS og opprett et containerelement
Siden denne siden vil være et gyldig HTML-dokument, starter du med en tom HTML-beholder
Legg til i de grunnleggende CSS-stilene for å nullstille sidemarginene, grensene og paddingene. Selv om det finnes andre standard CSS-stiler for nye dokumenter, er disse stilene det minste du trenger for å få et rent layout. Legg dem til hodet på dokumentet ditt:
For å begynne å bygge oppsettet, sett inn et beholderelement. Det skjer noen ganger at du kan kvitte seg med beholderen senere, men for de fleste fastbreddeoppsettene, vil det være lettere å administrere beholderelementet på tvers av forskjellige nettlesere. Så i kroppen legg dette: Og i CSS stilark, sett: Beholderen definerer hvor bred innholdet på nettsiden vil være, samt eventuelle marginer rundt utsiden og polstring på innsiden. For dette dokumentet er beholderen 870px bred med en 20 piksler renn til venstre. Gutten er satt opp med en marginalstil, men polstringen på beholderen er nullstilt for å forhindre at noen elementer blir så brede som beholderen. #container { bredde: 870px; margin: 0 0 0 20px; / * øverst til høyre nederst til venstre * / polstring: 0; } Hvis du lagrer dokumentet ditt nå, vil det være vanskelig å se beholderen fordi det ikke har noe i det. Hvis du legger til plassholdertekst, kan du se beholderelementet tydeligere. Hvordan du bestemmer deg for å style topplinjen, avhenger mye av hva som er i det. Hvis overskriftsruten bare skal ha en logo grafikk og overskrift, bruker du en overskriftstegn ( HTML-koden for topplinjen går øverst på beholderen og ser slik ut: Deretter ble det satt en rød kant på bunnen for å sette stilene på den, slik at du kunne se hvor den ender, margene og polstringene ble nullstillet, bredden satt til 100% og høyden til 150px: #container h1 { margin: 0; polstring: 0; bredde: 100%; høyde: 150px; flyte: venstre; border-bottom: # c00 solid 3px; } Ikke glem å flyte dette elementet med flottøren: venstre; eiendom. Nøkkelen til å skrive CSS-oppsett er å flyte alt - selv ting som har samme bredde som beholderen. På den måten vet du alltid hvor elementene vil ligge på siden. En CSS-etterkommere velger bare stiler til H1-elementer som er inne i #container-elementet. Når du bygger en tre-kolonne layout med CSS, må du dele opp layoutet i grupper på to. Så for denne tre-kolonne-oppsettet, i midten og høyre kolonne og gruppert og plassert ved siden av venstre kolonne i en to-kolonne-oppsett der venstre kolonne er 250px bred, og den høyre kolonnen er 610px bred (300 hver for de to kolonnene , pluss 10px for rennen mellom dem). HTML ser slik ut: Ut aliquip ex ea kommodo følgelig. Velit esse cillum dolore ut enim ad minimal veniam, lorem ipsum dolor sit amet. I åndsverk i voluptate og nostrure trening og evolusjon. Velit esse cillum dolore ullamco laboris nisi ut aliquip ex ea commodo consequo. Ut som et minimum, det er ikke så lang tid å komme til arbeid. Ut labore et dolore magna aliqua. Velit esse cillum dolore eu fugiat nulla pariatur. Plassholdertekst i kolonnene gjør dem mer synlige når de testes. CSS ser slik ut: #container # col1 { bredde: 250px; flyte: venstre; } #container # col2outer { bredde: 610px; flyte: høyre; margin: 0; polstring: 0; } Kolonnen til venstre flettes til venstre, mens den andre er floated til høyre. Fordi den totale bredden på begge kolonnene er 860px, er det en 10px renner mellom dem. For å opprette de tre kolonnene, legg til to divs i den andre andre kolonnen, akkurat som du har lagt til to divs i containerkolonnen i det siste trinnet. HTML ser slik ut: Ut som et minimum, det er ikke så lang tid å komme til arbeid. Ut labore et dolore magna aliqua. Velit esse cillum dolore eu fugiat nulla pariatur. Du er fri, og du er helt sikker på at du er eksplisitt.Ullam corporis suscipit laboriosam, en stor del av det samme volumet. Itaque earum rerum hic tenetur en sapiente delectus, sed ut perspiciatis unde um tempora incidunt ut labore et dolore. Og CSS ser slik ut: # col2outer # col2mid { bredde: 300px; flyte: venstre; } # col2outer # col2side { bredde: 300px; flyte: høyre; } Siden disse to 300px brede boksene er inne i en 610px bred boks, vil det igjen være en 10px renner mellom dem. Nå som resten av siden er stylet, kan du legge til i bunnteksten. Bruk en siste div med et "footer" id, og legg til innhold slik at du kan se det. Du kan også legge til en kant øverst, så du vet hvor den starter. HTML: CSS: #container #footer {
flyte: venstre;
bredde: 870px;
border-top: # c00 solid 3px;
} 08 av 09 Nå som du har oppsettet ferdig, kan du begynne å legge til dine egne personlige stiler og innhold. Husk at grensene på topptekst og bunntekst ble lagt til for å vise layoutseksjonene, ikke spesielt for design. Her er hele dokumentet, HTML og CSS: Stil beholderen
Bruk en overskriftstegn for overskriften
) er mer fornuftig enn å bruke en
Min header rad
Å få tre kolonner, start med å bygge to kolonner
Legg til to kolonner inne i den brede andre kolonnen
Legg til i bunnteksten
Legg til i dine personlige stiler og innhold
Den endelige HTML / CSS
