Det mest grundläggande i en div-baserade webbplats (3 / 7 steg)
Steg 3: Lägga till en behållare med rubrik och innehåll
I denna behållare, lägger vi till två mer Divar; en innehålls-div och en header div.
Vår HTML-filen nu ut så här:
< html >
< head >
< title > test < / title >
< länka rel = "stylesheet" href="style.css" >
< / head >
< body >
< div id = "behållare" >
< div id = "innehåll" class = "clearfix" >
Innehåll
< / div >
< div id = "huvud" >
Header
< / div >
< / div >
< / body >
< / html >
Vi ska lägga till följande kod till vår css-fil:
div #container {
bredd: 800px;
marginal: auto 0px;
bakgrund: #FFFFFF;
padding: 0px;
}
div #content {
bredd: 800px;
padding-top: 100px;
bakgrund: gul;
}
div #header {
bredd: 800px;
höjd: 100px;
bakgrund: blå;
position: absolute;
Top: 0px;
}
.clearfix: efter {innehåll: ".", display: block; höjd: 0; clear: båda; synlighet: hidden;}
.clearfix {display: inline-block;}
/ * Dölja från IE Mac \ * /
.clearfix {display: block;}
div #container innebär att vi har en div-tagg med id "behållare". Lägger vi till några färger och en "marginal: auto 0px;" att se till att våra behållare är centrerad på sidan.
Vi måste ge innehållet en padding-top och huvudet ett absolut värde med en "top: 0px" att se till att huvudet är placerad ovanför andra innehåll.
Inget emot fula färger. Det är bara för att göra det lättare att läsa färgerna och se de olika Divar.
Vi behöver denna konstiga clearfix kod för att se till att våra navigering och innehåll Divar (lades till i nästa steg) inte faller ur den omgivande div.