Stap 7: Controleer de site een beetje minder lelijk
Nu hebben we de belangrijkste div structuur, kunnen we veranderen de kleuren om iets een beetje minder chaotisch/lelijk /...
Speel rond met de kleuren in het css-bestand.
Hier is de volledige HTML-bestand van de webpagina weergegeven in de afbeelding:
<! DOCTYPE html publiek "-//W3C//DTD XHTML 1.0 Transitional / / nl" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns = "http://www.w3.org/1999/xhtml" XML: lang = "nl" lang = "nl" >
< head >
< titel > test < / title >
< link rel = "stylesheet" href="style.css" >
< / head >
< body >
< div id = "container" >
< div id = "inhoud" 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 > ver < /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 eigen elementum uitspraak,... < /p >
< / div >
< / div >
< / div >
< div id = "header" >
Koptekst
< / div >
< / div >
< / body >
< / html >
En dit is het volledige css-bestand:
lichaam {}
achtergrond: #444444;
font-family: verdana, arial, sans-serif;
kleur: #444444;
tekengrootte: 12px;
marge: 0px;
}
div #container {}
breedte: 800px;
marge: 0px-auto;
achtergrond: #FFFFFF;
padding: 0px;
}
div #content {}
breedte: 800px;
padding-top: 100px;
achtergrond: #FFFFFF;
}
div #header {}
breedte: 800px;
hoogte: 100px;
achtergrond: #888888;
positie: absoluut;
boven: 0px;
}
div #nav {}
breedte: 200px;
float: links;
achtergrond: #FFFFFF;
}
div #maincontent {}
breedte: 600px;
float: rechts;
achtergrond: #DDDDDD;
}
div.navblock {}
breedte: 180px;
marge: 5px auto;
rand: 1px solid #DDDDDD;
}
div.contentblock {}
breedte: 580px;
marge: 5px auto;
rand: 1px solid #FFFFFF;
}
.clearfix: nadat {inhoud: "."; display: block; hoogte: 0; duidelijk: beide; zichtbaarheid: verborgen;}
.clearfix {display: inline-block;}
/ * Verbergen van IE Mac \ * /
.clearfix {display: block;}
Dus nu heb je de basics. Natuurlijk is er nog veel te bewerken zoals kleuren, lettergroottes, een beter uitziende blok van de navigatie... Maar deze instructables is alleen over de div-structuur. Als u zien van de andere verwante instructables wilt, kunt u altijd vragen. Ik zal zien of ik de tijd kan vinden.
