De basis van een div gebaseerde website (3 / 7 stap)

Stap 3: Het toevoegen van een container met de berichtheader en de inhoud

Onze HTML-bestand zal nu als volgt uitzien:

< html >
< head >
< titel > test < / title >
< link rel = "stylesheet" href="style.css" >
< / head >
< body >
< div id = "container" >
< div id = "inhoud" class = "clearfix" >
Inhoud
< / div >
< div id = "header" >
Koptekst
< / div >
< / div >
< / body >
< / html >

We zullen de volgende code toevoegen aan onze css-bestand:

div #container {}
breedte: 800px;
marge: 0px-auto;
achtergrond: #FFFFFF;
padding: 0px;
}

div #content {}
breedte: 800px;
padding-top: 100px;
achtergrond: geel;
}

div #header {}
breedte: 800px;
hoogte: 100px;
achtergrond: blauw;
positie: absoluut;
boven: 0px;
}

.clearfix: nadat {inhoud: "."; display: block; hoogte: 0; duidelijk: beide; zichtbaarheid: verborgen;}
.clearfix {display: inline-block;}
/ * Verbergen van IE Mac \ * /
.clearfix {display: block;}

div #container betekent dat we een div-tag met id 'container'. We voegen sommige kleuren en een "marge: 0px-auto;" om ervoor te zorgen dat onze container in de pagina wordt gecentreerd.

We moeten geven van de inhoud een padding-top en een header van een absolute waarde met een "top: 0px" om ervoor te zorgen dat de kop is gepositioneerd boven de andere inhoud.

De lelijke kleuren het niet erg. Het is gewoon om het gemakkelijker te lezen van de kleuren en om te zien de verschillende divs.

We moeten deze rare clearfix code om ervoor te zorgen dat onze navigatie en inhoud divs (toegevoegd in de volgende stap) vallen niet uit de omliggende div.