Étape 7: Rendre le site un peu moins laid
Maintenant que nous avons la structure principale de div, nous pouvons changer les couleurs à quelque chose un peu moins chaotique/laid /...
Viens jouer avec les couleurs dans le fichier css.
Voici le fichier complet html de la page Web affichée dans l’image :
< ! 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 = "fr" lang = "fr" >
< tête >
test de < titre > < /title >
< link rel = "stylesheet" href="style.css" >
< / head >
< corps >
< div id = « conteneur » >
< div id = « content » class = « clearfix » >
< div id = « nav » >
< div class = « navblock » >
< ul >
Foo < li > < /li >
< li > Bar < /li >
< /ul >
< / div >
< div class = « navblock » >
< ul >
Boo de < li > < /li >
< li > loin < /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 eget elementum dictum,... < /p >
< / div >
< / div >
< / div >
< div id = « header » >
En-tête
< / div >
< / div >
< / body >
< / html >
Et c’est le fichier css complet :
{corps
Background: #444444 ;
font-family : verdana, arial, sans-serif ;
couleur: #444444 ;
font-size : 12px ;
marge : 0px ;
}
div #container {}
Width : 800px ;
marge : 0px auto ;
fond : #FFFFFF ;
padding : 0px ;
}
div #content {}
Width : 800px ;
padding-top : 100px ;
fond : #FFFFFF ;
}
div #header {}
Width : 800px ;
height : 100px ;
Background: #888888 ;
position : absolute ;
Top : 0px ;
}
div #nav {}
Largeur : 200px ;
float : left ;
fond : #FFFFFF ;
}
div #maincontent {}
Width : 600px ;
float : right ;
arrière-plan : #DDDDDD ;
}
{div.navblock}
Largeur : 180px ;
marge : 5px auto ;
border : 1px solid #DDDDDD ;
}
{div.contentblock}
Largeur : 580px ;
marge : 5px auto ;
border : 1px solid #FFFFFF ;
}
.Clearfix : après {content: "."; display : block ; height: 0; clear : fois ; visibilité : caché;}
.Clearfix {display : inline-block;}
/ * Masquer IE Mac \ * /
.Clearfix {display : block;}
Alors maintenant, vous avez les bases. Bien sûr qu’il faut encore beaucoup pour modifier comme les couleurs, les tailles de police, un plus beau bloc de navigation... Mais cette instructables est uniquement sur la structure de la div. Si vous souhaitez voir d’autres instructables connexes, vous pouvez toujours demander. Je vais voir si je peux trouver le temps.