CSS-layout kräver att du tänker på din webbplats layout som helhet, och sedan ta bitarna och sätta dem ihop. Lär dig hur du bygger en enkel 3-kolonnlayout med CSS.
01 av 09Rita din layout
Du kan rita din layout på papper eller i ett grafikprogram. Om du redan har en trådram eller ännu mer omfattande design i åtanke, förenkla det till de grundläggande rutorna som utgör webbplatsen. Den här designen som följer med den här artikeln har tre kolumner i huvudinnehållet, samt en rubrik och sidfot. Om du tittar noga kan du se att de tre kolumnerna inte är lika breda.
När du har ritat din layout, kan du börja tänka på dimensioner. Detta exempel design kommer att ha följande grundläggande dimensioner:
- Högst 900 pixlar bred
- 20 px rännan till vänster
- 10 px mellan kolumner och rader
- Kolumner som är 250px, 300px och 300px breda
- Den övre raden är 150px lång
- Den nedre raden är 100px lång
Skriv grundläggande HTML / CSS och skapa ett containerelement
Eftersom den här sidan kommer att vara ett giltigt HTML-dokument, Börja med en tom HTML-behållare
Lägg till i de grundläggande CSS-formaten till noll ut sidan marginaler, gränser och paddings. Även om det finns andra standard CSS-stilar för nya dokument, är dessa stilar det lägsta du behöver för att få en ren layout. Lägg till dem i huvudet på ditt dokument:
För att bygga upp layouten lägger du in ett behållarelement. Det händer ibland att du kan bli av med behållaren senare, men för de flesta fastbreddslayouter, med att behållarelementet gör det enklare att hantera över olika webbläsare. Så i kroppen sätta detta: Och i CSS stilark, sätt: Behållaren definierar hur bred webbsidans innehåll kommer att vara, liksom eventuella marginaler runt utsidan och vaddering på insidan. För detta dokument är behållaren 870px bred med en 20 pixel rännan till vänster. Rännan är uppbyggd med en marginalstil, men stoppningen på behållaren nollställs för att förhindra att några element blir så brett som behållaren. #behållare { bredd: 870px; marginal: 0 0 0 20px; / * högst upp till höger vänster * / vaddering: 0; } Om du sparar ditt dokument nu är det svårt att se behållaren eftersom det inte har något i det. Om du lägger till platshållartekst kan du se behållarelementet tydligare. Hur du bestämmer dig för att utforma rubrikraden beror mycket på vad som finns i det. Om rubrikraden bara ska ha en logotyps grafik och rubrik, använder du en rubrikikett ( HTML-koden för rubrikraden går överst på behållaren och ser så här ut: Sedan för att ställa in stilar på den, tillsattes en röd kant längst ner så att du kunde se var den slutade, marginalerna och vadderingen nollställdes, bredden satt till 100% och höjden till 150px: #container h1 { marginal: 0; vaddering: 0; bredd: 100%; höjd: 150px; flyta till vänster; border-bottom: # c00 solid 3px; } Glöm inte att flyta detta element med flottören: vänster; fast egendom. Nyckeln till att skriva CSS-layouter är att flyta allt - även saker som är lika stora som behållaren. På det sättet vet du alltid var elementen ligger på sidan. En CSS-descendant-väljare tillämpade bara stilar på H1-element som ligger inuti #container-elementet. När du bygger en tre-kolumnlayout med CSS, måste du dela upp din layout i grupper om två. Så för den här tre kolumnlayouten placerades kolumnen mellan mitten och höger och placerades bredvid den vänstra kolumnen i en kolonn med två kolumner där den vänstra kolumnen är 250 px bred och den högra kolumnen är 610 px bred (300 vardera för de två kolumnerna , plus 10px för rännan mellan dem). HTML ser så här ut: Ut aliquip ex ea kommodo följaktligen. Välkommen är det bra att du är en av mina vänner, och du är välkommen. I avskräckelse i voluptate quis nostrud övning eu fugiat nulla pariatur. Välkommen är det här att du kommer att få mer information om detta. Utan minsta möjliga vänskap, så gör du det otroligt otroligt bra. Ut labore et dolore magna aliqua. Velit esse cillum dolore eu fugiat nulla pariatur. Placeringstext i kolumnerna gör dem mer synliga när de testas. CSS ser så här ut: #container # col1 { bredd: 250px; flyta till vänster; } #container # col2outer { bredd: 610px; float: right; marginal: 0; vaddering: 0; } Kolumnen till vänster svänger åt vänster, medan den andra svänger till höger. Eftersom den totala bredden på båda kolumnerna är 860px, finns en 10px rännan mellan dem. För att skapa de tre kolumnerna, lägg till två divs i den bredare andra kolumnen, precis som du har lagt till 2 divs i behållarkolonnen i det sista steget. HTML ser så här ut: Utan minsta möjliga vänskap, så gör du det otroligt otroligt bra. Ut labore et dolore magna aliqua. Velit esse cillum dolore eu fugiat nulla pariatur. Namnlösa: Frågor och svar är inte längre så bra som möjligt.Ullam corporis suscipit laboriosam, magnam aliquam quaerat voluptatem. Itaque earum rerum hic tenetur en sapiente delectus, sed ut perspiciatis o tempor incidunt ut labore et dolore. Och CSS ser så här ut: # col2outer # col2mid { bredd: 300px; flyta till vänster; } # col2outer # col2side { bredd: 300px; float: right; } Eftersom dessa två 300px breda lådor finns inuti en 610px bred ruta, kommer det igen att bli en 10px rännan mellan dem. Nu när resten av sidan är stilad, kan du lägga till i sidfoten. Använd en sista div med ett "footer" id, och lägg till innehåll så att du kan se det. Du kan också lägga till en kant längst upp, så du vet var den börjar. HTML: CSS: #container #footer {
flyta till vänster;
bredd: 870px;
border-top: # c00 solid 3px;
} 08 av 09 Nu när du har layouten klar kan du börja lägga till dina egna personliga stilar och innehåll. Kom ihåg att gränserna på rubriken och sidfoten har lagts till för att visa layoutsektionerna, inte specifikt för design. Här är hela dokumentet, HTML och CSS: Stil behållaren
Använd en rubrikmärkning för rubriken
) är mer meningsfull än att använda a
Min rubrikrad
För att få tre kolumner, börja med att bygga två kolumner
Lägg till två kolumner inuti den breda andra kolumnen
Lägg till i Footer
Lägg till i dina personliga stilar och innehåll
Den slutliga HTML / CSS
