Det mest grundläggande i en div-baserade webbplats (7 / 7 steg)
Steg 7: Göra området lite mindre ful
Nu när vi har den viktigaste div strukturen, vi kan ändra färgerna till något lite mindre kaotisk/fula /...
Bara leka med färgerna i css-filen.
Här är den kompletta HTML-filen för webbsidan visas i bilden:
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional / / EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns = "http://www.w3.org/1999/xhtml" XML: lang = "sv" lang = "sv" >
< head >
< title > test < / title >
< länka rel = "stylesheet" href="style.css" >
< / head >
< body >
< div id = "behållare" >
< div id = "innehåll" class = "clearfix" >
< div id = "nav" >
< div class = "navblock" >
< ul >
Foo < /li > < li >
< li > Bar < /li >
< /ul >
< / div >
< div class = "navblock" >
< ul >
< li > Boo < /li >
< li > långt < /li >
< /ul >
< / div >
< / div >
< div id = "maincontent" >
< div class = "contentblock" >
< p > Lorem ipsum dolor sit amet,... < /p >
< / div >
< div class = "contentblock" >
< p > Nunc cursus, justo EGETs elementum dictum,... < /p >
< / div >
< / div >
< / div >
< div id = "huvud" >
Header
< / div >
< / div >
< / body >
< / html >
Och detta är komplett css-filen:
kroppen {
bakgrund: #444444;
font-family: verdana, arial, sans-serif;
färg: #444444;
font-size: 12px;
marginal: 0px;
}
div #container {
bredd: 800px;
marginal: auto 0px;
bakgrund: #FFFFFF;
padding: 0px;
}
div #content {
bredd: 800px;
padding-top: 100px;
bakgrund: #FFFFFF;
}
div #header {
bredd: 800px;
höjd: 100px;
bakgrund: #888888;
position: absolute;
Top: 0px;
}
div #nav {
bredd: 200px;
Float: left;
bakgrund: #FFFFFF;
}
div #maincontent {
bredd: 600px;
Float: rätt;
bakgrund: #DDDDDD;
}
div.navblock {
bredd: 180px;
marginal: 5px auto;
Border: 1px solid #DDDDDD;
}
div.contentblock {
bredd: 580px;
marginal: 5px auto;
Border: 1px solid #FFFFFF;
}
.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;}
Så nu har du grunderna. Naturligtvis finns det fortfarande mycket för att redigera som färger, teckensnitt-storlekar, ett snyggare navigering block... Men detta instructables handlar bara om div struktur. Om du vill se andra relaterade instructables, kan du alltid fråga. Jag ska se om jag kan hitta tiden.