Code de mise en page de page Web couramment utilisé DIV+CSS

Auteur：Eve Cole Date de mise à jour：2009-05-31 01:43:42

Une seule ligne et colonne

Voici une citation :

corps { marge : 0px ; remplissage : 0px ; texte-align : centre }

#content { marge-gauche:auto; marge-droite:auto; largeur : 400 px ;

Deux lignes et une colonne

Voici une citation :

corps { marge : 0px ; remplissage : 0px ; texte-align : centre ;}

#content-top { marge-gauche:auto; marge-droite:auto; largeur : 400px largeur : 370px;}

#content-end {margin-left:auto; margin-right:auto; largeur : 400px largeur : 370px;}

Trois lignes et une colonne

Voici une citation :

corps { marge : 0px ; remplissage : 0px ; texte-align : centre }

#content-top { marge-gauche:auto; marge-droite:auto; largeur : 400px largeur : 370px;

#content-mid { marge-gauche:auto; marge-droite:auto; largeur : 400 px ;

#content-end { margin-left:auto; margin-right:auto; largeur : 400 px ;

Une seule ligne et deux colonnes

Voici une citation :

#bodycenter {largeur : 700 px ; marge-droite : auto ; marge-gauche : auto ; débordement : auto ;

#bodycenter #dv1 {flottant : gauche ; largeur : 280 px ;}

#bodycenter #dv2 {flottant : droite ; largeur : 410 px ;}

Deux lignes et deux colonnes

Voici une citation :

#header{largeur : 700 px ; marge-droite : auto;marge-gauche : débordement : auto ;}

#bodycenter {largeur : 700 px ; marge-droite : auto ; marge-gauche : débordement automatique : auto ;

#bodycenter #dv1 { float : gauche ; largeur : 280px ;}

#bodycenter #dv2 { float : droite ; largeur : 410 px ;}

Trois lignes et deux colonnes

Voici une citation :

#header{largeur : 700 px ; marge-droite : auto ; marge-gauche : auto ;

#bodycenter {largeur : 700 px ; marge-droite : auto ; marge-gauche : auto ;

#bodycenter #dv1 { float : gauche ; largeur : 280 px ;}

#bodycenter #dv2 { float : droite ; largeur : 410px ;}

#footer{largeur : 700 px ; marge-droite : auto ; marge-gauche : débordement : auto ;

Une seule ligne et trois colonnes

positionnement absolu

Voici une citation :

#gauche { position : absolue ; haut : 0px ; gauche : 0px largeur : 120px ;

#milieu {marge : 20px 190px 20px 190px } ;

#right {position : absolue ; haut : 0px ; droite : 0px largeur : 120px ;}

flotteur positionnant un

xhtml :

Voici une citation :

<div id="column1">Voici la première colonne</div>

<div id="column2">Voici la deuxième colonne</div>

</div>

<div id="column3">Voici la troisième colonne</div>

</div>

CSS :

Voici une citation :

#wrap{ largeur:100%; hauteur:auto;}

#colonne{ float:gauche; largeur:60%;}

#colonne1{ float:gauche; largeur:30%;}

#colonne2{ float:right; largeur:30%;}

#colonne3{ float:right; largeur:40%;}

.clear{ clear:les deux;}

flotteur positionnant deux

xhtml :

Voici une citation :

<h1>Voici le contenu principal.</h1>

</div>

<h2>Voici la barre latérale gauche.</h2>

</div>

<h2>Voici la barre latérale droite.</h2>

</div>

CSS :

Voici une citation :

corps {marge : 0 ; rembourrage-gauche : 200 px ; rembourrage-droite : 190 px ; largeur min : 240 px ;}

.colonne {position : relative ; flotteur : gauche ;}

#centre {largeur : 100 % ;}

#gauche {largeur : 180 px ; droite : 240 px ; marge gauche : -100 % ;}

#right {largeur : 130 px ; marge-droite : -100 % ;}

Deux lignes et trois colonnes

xhtml :

Voici une citation :

<div id="header">Voici la ligne du haut</div>

<div id="column1">Voici la première colonne</div>

<div id="column2">Voici la deuxième colonne</div>

</div>

<div id="column3">Voici la troisième colonne</div>

</div>

CSS :

Voici une citation :

#header{largeur:100%; hauteur:auto;}

#wrap{ largeur:100%; hauteur:auto;}

#colonne{ float:gauche; largeur:60%;}

#colonne1{ float:gauche; largeur:30%;}

#colonne2{ float:right; largeur:30%;}

#colonne3{ float:right; largeur:40%;}

.clear{ clear:les deux;}

Trois lignes et trois colonnes

xhtml :

Voici une citation :

<div id="header">Voici la ligne du haut</div>

<div id="column1">Voici la première colonne</div>

<div id="column2">Voici la deuxième colonne</div>

</div>

<div id="column3">Voici la troisième colonne</div>

</div>

<div id="footer">Voici la rangée du bas</div>

CSS :

Voici une citation :

#header{largeur:100%; hauteur:auto;}

#wrap{ largeur:100%; hauteur:auto;}

#colonne{ float:gauche; largeur:60%;}

#colonne1{ float:gauche; largeur:30%;}

#colonne2{ float:right; largeur:30%;}

#colonne3{ float:right; largeur:40%;}

.clear{ clear:les deux;}

#footer{largeur:100%; hauteur:auto;}

PS : Les exemples répertoriés ici sont des exemples couramment utilisés, et non à des fins de recherche. Pour chaque boîte, la marge, le remplissage, le boeder et les autres attributs ne sont pas définis !