CSS-lay-out vereist dat u de lay-out van uw website als één geheel beschouwt en vervolgens de stukken neemt en ze samenvoegt. Leer hoe u een eenvoudige lay-out met 3 kolommen kunt bouwen met CSS.
01 van 09Teken je lay-out
U kunt uw lay-out op papier of in een grafisch programma tekenen. Als u al een draadframe of een nog uitgebreider ontwerp in gedachten heeft, vereenvoudig dit dan in de basisvakken waaruit de site bestaat. Dit ontwerp dat bij dit artikel hoort heeft drie kolommen in het hoofdinhoudsgebied, evenals een kop- en voettekst. Als je goed kijkt, kun je zien dat de drie kolommen niet gelijk in breedte zijn.
Nadat u uw lay-out hebt uitgetekend, kunt u gaan nadenken over dimensies. Dit voorbeeldontwerp heeft de volgende basisafmetingen:
- Niet meer dan 900 pixels breed
- 20 px goot aan de linkerkant
- 10 px tussen kolommen en rijen
- Kolommen met een breedte van 250px, 300px en 300px
- De bovenste rij is 150 px hoog
- De onderste rij is 100 px hoog
Schrijf eenvoudige HTML / CSS en maak een containerelement
Aangezien deze pagina een geldig HTML-document is, begint u met een lege HTML-container
Voeg de standaard CSS-stijlen toe om de paginamarges, randen en opvullingen op nul te zetten. Hoewel er andere standaard CSS-stijlen zijn voor nieuwe documenten, zijn deze stijlen het minimum dat u nodig hebt om een overzichtelijke lay-out te krijgen. Voeg ze toe aan de kop van uw document:
Begin met het bouwen van de lay-out door een containerelement in te voegen. Het komt soms voor dat u de container later kunt verwijderen, maar voor de meeste lay-outs met een vaste breedte maakt het containeronderdeel het eenvoudiger om verschillende webbrowsers te beheren. Dus in het lichaam zet dit: En in de CSS-stylesheet: De container bepaalt hoe breed de inhoud van de webpagina zal zijn, evenals eventuele marges rond de buitenkant en opvulling aan de binnenkant. Voor dit document is de container 870px breed met een goot van 20 pixels aan de linkerkant. De rugmarge is opgezet met een margestijl, maar de vulling op de container wordt op nul gezet om te voorkomen dat elementen zo breed zijn als de container. #container { breedte: 870 px; marge: 0 0 0 20px; / * rechtsboven onder links * / opvulling: 0; } Als u nu uw document opslaat, zal het moeilijk zijn om de container te zien omdat er niets in zit. Als u tekst van plaatsaanduiding toevoegt, kunt u het containerelement duidelijker zien. Hoe u besluit om de kopregel rij te stijlen, hangt sterk af van wat er in zit. Als de kopregel alleen een logo-afbeelding en kop heeft, gebruik dan een headline-tag ( De HTML voor de koprij staat bovenaan de container en ziet er als volgt uit: Om vervolgens de stijlen in te stellen, is onderaan een rode rand toegevoegd, zodat u kunt zien waar deze eindigt, de marges en opvulling zijn op nul gezet, de breedte op 100% en de hoogte op 150 px ingesteld: #container h1 { marge: 0; opvulling: 0; breedte: 100%; hoogte: 150 px; zweven: links; border-bottom: # c00 solid 3px; } Vergeet niet om dit element met de vlotter te zweven: links; eigendom. De sleutel tot het schrijven van CSS-lay-outs is om alles te laten zweven, zelfs dingen die dezelfde breedte hebben als de container. Op die manier weet je altijd waar de elementen op de pagina zullen liggen. Een CSS-afstammeling-selector paste stijlen alleen toe op H1-elementen die zich binnen het element #container bevinden. Wanneer u een lay-out met drie kolommen bouwt met CSS, moet u uw lay-out verdelen in groepen van twee. Dus voor deze lay-out met drie kolommen, de middelste en rechterkolom en gegroepeerd en geplaatst naast de linkerkolom in een lay-out met twee kolommen, waarbij de linkerkolom 250px breed is en de rechterkolom 610px breed (300 elk voor de twee kolommen) , plus 10px voor de goot ertussen). De HTML ziet er zo uit: Zie aliquip ex ea commodo consequat. Velit esse cillum dolore ut enim ad minimam, lorem ipsum dolor sit amet. In reprehenderit in voluptate quis nostrud exercise eu fugiat nulla pariatur. Velit esse cillum dolore ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minimidiam, sed do eiusmod tempor incididunt ullamco laboris nisi. Ut labore et dolore magna aliqua. Velit esse cillum dolore eu fugiat nulla pariatur. Placeholder-tekst in de kolommen zorgt ervoor dat ze beter zichtbaar zijn tijdens het testen. De CSS ziet er als volgt uit: #container # col1 { breedte: 250 px; zweven: links; } #container # col2outer { breedte: 610 px; zweven: rechts; marge: 0; opvulling: 0; } De kolom aan de linkerkant is naar links gedreven, terwijl de andere naar rechts zweeft. Omdat de totale breedte van beide kolommen 860 px is, is er een 10px-goot ertussen. Als u de drie kolommen wilt maken, voegt u twee divs toe in de bredere tweede kolom, net zoals u in de laatste stap twee divs in de containerkolom hebt toegevoegd. De HTML ziet er zo uit: Ut enim ad minimidiam, sed do eiusmod tempor incididunt ullamco laboris nisi. Ut labore et dolore magna aliqua. Velit esse cillum dolore eu fugiat nulla pariatur. Nam libero tempore, quia voluptas zitten aspernatur dicta sunt explicabo.Ullam corporis suscipit laboriosam, magnam aliquam quaerat voluptatem. Itaque earum rerum hic tenetur a sapiente delectus, sed ut perspiciatis unde omnis tempora incidunt ut labore et dolore. En de CSS ziet er zo uit: # col2outer # col2mid { breedte: 300 px; zweven: links; } # col2outer # col2side { breedte: 300 px; zweven: rechts; } Omdat deze twee 300px brede boxen zich in een 610px brede box bevinden, zal er opnieuw een 10px-rugmarge tussen hen zijn. Nu de rest van de pagina is opgemaakt, kunt u in de voettekst toevoegen. Gebruik een laatste div-element met een "footer" -id en voeg inhoud toe zodat je het kunt zien. Je kunt ook een rand toevoegen aan de bovenkant, zodat je weet waar deze begint. De HTML: De CSS: #container #footer {
zweven: links;
breedte: 870 px;
border-top: # c00 solid 3px;
} 08 van 09 Nu u de lay-out hebt voltooid, kunt u beginnen met het toevoegen van uw eigen persoonlijke stijlen en inhoud. Vergeet niet dat de randen op de kop- en voettekst zijn toegevoegd om de lay-outsecties weer te geven, niet specifiek voor ontwerp. Hier is het volledige document, HTML en CSS: Style de container
Gebruik een koptekst voor de koptekst
) is logischer dan het gebruik van een
Mijn koprij
Om drie kolommen te krijgen, begin je met het bouwen van twee kolommen
Voeg twee kolommen toe binnen de brede tweede kolom
Voeg de voettekst toe
Voeg uw persoonlijke stijlen en inhoud toe
De laatste HTML / CSS
