CSS layout kræver, at du tænker på dit website layout som helhed, og derefter tage stykkerne og sætte dem sammen. Lær, hvordan du opbygger et simpelt 3-kolonne layout med CSS.
01 af 09Tegn dit layout
Du kan tegne dit layout på papir eller i et grafikprogram. Hvis du allerede har en ledningsramme eller endnu mere omfattende design i tankerne, skal du forenkle det til de grundlæggende kasser, der udgør webstedet. Dette design, der ledsager denne artikel, har tre kolonner i hovedindholdsområdet, samt en overskrift og sidefod. Hvis du ser tæt på, kan du se, at de tre kolonner ikke er ens i bredden.
Når du har trukket dit layout ud, kan du begynde at tænke på dimensioner. Dette eksempel design vil have følgende grundlæggende dimensioner:
- Ikke mere end 900 pixels bred
- 20 px rende til venstre
- 10 px mellem kolonner og rækker
- Kolonner, der er 250px, 300px og 300px brede
- Den øverste række er 150 px høj
- Den nederste række er 100 px høj
Skriv Basic HTML / CSS og opret et containerelement
Da denne side er et gyldigt HTML-dokument, skal du starte med en tom HTML-container
Tilføj i de grundlæggende CSS-stilarter til nul ud af sidemargener, grænser og paddings. Mens der er andre standard CSS-stilarter til nye dokumenter, er disse stilarter det minimale, du skal have et rent layout. Tilføj dem til hovedet på dit dokument:
For at begynde at opbygge layoutet skal du sætte et containerelement. Det sker nogle gange, at du kan slippe af med beholderen senere, men for de fleste fastbreddelayouter er det lettere at administrere containerelementet på tværs af forskellige webbrowsere. Så i kroppen sætte dette: Og i CSS stilark, sæt: Beholderen definerer, hvor bredt indholdet af websiden vil være, samt eventuelle margener udenfor og polstring på indersiden. For dette dokument er containeren 870px bred med en 20 pixel rende til venstre. Gutteren er opstillet med en margen stil, men polstring på beholderen er nulstillet for at forhindre, at elementerne bliver så brede som beholderen. #container { bredde: 870px; margen: 0 0 0 20px; / * øverst til højre nederst til venstre * / polstring: 0; } Hvis du gemmer dit dokument nu, vil det være svært at se beholderen, fordi den ikke har noget i det. Hvis du tilføjer pladsholdertekst, kan du se beholderelementet tydeligere. Hvordan du beslutter dig for at style header rækken afhænger meget af hvad der er i det. Hvis header rækken bare skal have et logo grafisk og overskrift, så brug en overskrift tag ( HTML-linjen for overskriftsrækken går øverst i beholderen og ser sådan ud: Så for at indstille stilarterne på den blev der tilføjet en rød kant i bunden, så du kunne se, hvor den ender, marginerne og polstringerne blev nulstillet, bredden sat til 100% og højden til 150px: #container h1 { margen: 0; polstring: 0; bredde: 100%; højde: 150px; flyde: venstre; border-bottom: # c00 solid 3px; } Glem ikke at flyde dette element med float: venstre; ejendom. Nøglen til at skrive CSS layouts er at flyde alt - selv ting, der har samme bredde som beholderen. På den måde ved du altid, hvor elementerne vil ligge på siden. En CSS-efterkommere vælger kun stilarter til H1-elementer, der er inde i #container-elementet. Når du bygger et tre-kolonne layout med CSS, skal du opdele dit layout i grupper på to. Så for dette tre-kolonne layout, kolonnen midt og højre og grupperet og placeret ved siden af venstre kolonne i et to-kolonne layout, hvor den venstre kolonne er 250px bred, og den højre kolonne er 610px bred (300 hver for de to kolonner , plus 10px for renden mellem dem). HTML'en ser sådan ud: Ud aliquip ex ea kommodo derfor. Velit esse cillum dolore udim ad minimal veniam, lorem ipsum dolor sit amet. I afskedigelse i voluptate quis nostrud udøvelse eu fugiat nulla pariatur. Velit esse cillum dolore ullamco laboris nisi ud aliquip ex ea commodo deraf. Uden at minimere venskabet, så gør du det uhensigtsmæssigt. Ud Labore et dolore magna aliqua. Velit esse cillum dolore eu fugiat nulla pariatur. Placeringstekst i kolonnerne gør dem mere synlige, når de testes. CSS'en ser sådan ud: #container # col1 { bredde: 250px; flyde: venstre; } #container # col2outer { bredde: 610px; flyde: højre; margen: 0; polstring: 0; } Kolonnen til venstre fløjter til venstre, mens den anden flyder til højre. Fordi den samlede bredde af begge kolonner er 860px, er der en 10px rende mellem dem. For at oprette de tre kolonner, tilføj to divs inde i den bredere anden kolonne, ligesom du tilføjede 2 divs inde i containerkolonnen i sidste trin. HTML'en ser sådan ud: Uden at minimere venskabet, så gør du det uhensigtsmæssigt. Ud Labore et dolore magna aliqua. Velit esse cillum dolore eu fugiat nulla pariatur. Du er fri for tiden, og du er meget velkommen til at prøve det.Ullam corporis suscipit laboriosam, magnam aliquam quaerat voluptatem. Itaque earum rerum hic tenetur en sapiente delectus, der er udsat for perspektiver, hvorved der ikke er tid til at komme ud i livet. Og CSS ser sådan ud: # col2outer # col2mid { bredde: 300px; flyde: venstre; } # col2outer # col2side { bredde: 300px; flyde: højre; } Da disse to 300px brede kasser er inde i en 610px bred boks, vil der igen være en 10px rende mellem dem. Nu, hvor resten af siden er stylet, kan du tilføje i sidefoden. Brug en sidste div med et "footer" id, og tilføj indhold, så du kan se det. Du kan også tilføje en kant øverst, så du ved, hvor den starter. HTML: CSS: #container #footer {
flyde: venstre;
bredde: 870px;
border-top: # c00 solid 3px;
} 08 af 09 Nu hvor du har layoutet færdigt, kan du begynde at tilføje dine egne personlige stilarter og indhold. Husk at grænserne på overskriften og footeren blev tilføjet for at vise layoutsektionerne, ikke specifikt til design. Her er hele dokumentet, HTML og CSS: Stil beholderen
Brug en overskriftstag til overskriften
) giver mening mere end at bruge a
Min header række
At få tre kolonner, start med at bygge to kolonner
Tilføj to kolonner inde i den brede anden kolonne
Tilføj i foden
Tilføj i dine personlige stilarter og indhold
Den endelige HTML / CSS
