Si vous utilisez la méthode de conception de tableau, il s'agit généralement d'une disposition à trois lignes avec des lignes supérieure, centrale et inférieure. 
. Si vous utilisez DIV, j'envisage d'utiliser trois colonnes pour la mise en page, comme ceci 
.
2. Définir le style du corps
Définissez d’abord le style du corps de la page entière. Le code est le suivant :
corps { MARGE : 0px ;
REMBOURRAGE : 0px ;
CONTEXTE : url(../images/bg_logo.gif) #FEFEFE sans répétition en bas à droite ;
FAMILLE DE POLICE : 'Lucida Grande', 'Lucida Sans Unicode', '宋体', '新宋体', arial, verdana, sans-serif ;
COULEUR : #666 ;
TAILLE DE LA POLICE : 12 px ;
HAUTEUR DE LIGNE : 150 % ;
La fonction du code ci-dessus a été expliquée en détail dans le didacticiel de la veille, et tout le monde devrait le comprendre d'un seul coup d'œil. La marge de bordure est définie sur 0 ; la couleur d'arrière-plan est #FEFEFE, l'image d'arrière-plan est bg_logo.gif et l'image est située dans le coin inférieur droit de la page, sans répétition ; la couleur est #666 ; la hauteur de la ligne est de 150 %.
3. Définir le div principal
La première fois que j'ai utilisé la mise en page CSS, j'ai décidé d'utiliser une mise en page à trois colonnes à largeur fixe (qui est plus simple que la conception à résolution adaptative, hoho, ne dites pas que je suis paresseux, implémentez-en d'abord une simple pour gagner en confiance !). Définissez la largeur de la gauche, du milieu et de la droite comme étant respectivement 200:300:280, définie comme suit en CSS :
/*Définit le style de la colonne de gauche de la page*/
#gauche{ LARGEUR:200px;
MARGE : 0px ;
REMBOURRAGE : 0px ;
CONTEXTE : #CDCDCD ;
}
/*Définir les styles de colonnes sur la page*/
#milieu{ POSITION : absolue ;
GAUCHE : 200 px ;
HAUT : 0 px ;
LARGEUR : 300 px ;
MARGE : 0px ;
REMBOURRAGE : 0px ;
CONTEXTE : #DADADA ;
}
/*Définir le style de la colonne de droite de la page*/
#right{ POSITION : absolue ;
GAUCHE : 500 px ;
HAUT : 0 px ;
LARGEUR : 280 px ;
MARGE : 0px ;
REMBOURRAGE : 0px ;
CONTEXTE : #FFF ;
Remarque : j'ai utilisé POSITION: Absolute; lors de la définition des divs de la colonne du milieu et de la colonne de droite, puis j'ai défini LEFT:200px;TOP:0px; le positionnement absolu du calque. Définissez la colonne du milieu à 200 px de la bordure gauche de la page et à 0 px du haut ; définissez la colonne de droite à 500 px de la bordure gauche de la page et à 0 px du haut ;
A ce moment, le code de la page entière est :
<html xmlns=" http://www.w3.org/1999/xhtml " lang="gb2312">
<tête>
<title>Bienvenue dans le nouveau "Web Designer" : tutoriels et promotion sur les standards Web</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<méta http-equiv="Content-Language" content="gb2312" />
<meta content="tous" name="robots" />
<meta name="author" content="ajie(at)netease.com,阿杰" />
<meta name="Copyright" content=" www.w3cn.org , droit d'auteur libre, toute reproduction" />
<meta name="description" content="Nouveau concepteur de sites Web, site de didacticiels sur les normes Web, promeut l'application des normes Web en Chine." />
<meta content="standards web, tutoriels, web, standards, xhtml, css, convivialité, accessibilité" name="keywords" />
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="icône de raccourci" href=" http://www.w3cn.org/favicon.ico " type="image/x-icon" />
<link rel="stylesheet" rev="stylesheet" href="css/style01.css" type="text/css" media="all" />
</tête>
<corps>
<div id="left">Colonne de gauche de la page</div>
<div id="middle">Colonne du milieu de la page</div>
<div id="right">Colonne de droite de la page</div>
</corps>
</html>
Pour le moment, l’effet de page ne peut voir que trois rectangles gris juxtaposés et une image d’arrière-plan. Mais je veux que la hauteur soit en plein écran, que dois-je faire ?
4.100% hauteur adaptative ?
Afin de conserver les trois colonnes à la même hauteur, j'ai essayé de définir "height:100%;" dans #left, #middle et #right, mais j'ai constaté qu'il n'y avait aucun effet de hauteur adaptatif attendu. Après quelques tentatives, j'ai dû donner à chaque div une hauteur absolue : "height:1000px;", et à mesure que le contenu augmentait, je devais constamment corriger cette valeur. Il n'y a pas moyen de régler la hauteur ? Au fur et à mesure que l'étude d'Ajie s'approfondissait, il a découvert une solution flexible. En fait, il n'est pas du tout nécessaire de définir 100 %. Nous avons été trop profondément emprisonnés par la réflexion par table. Cette méthode sera présentée en détail dans la prochaine section de l'étude.