Si utiliza el método de diseño de tabla, suele ser un diseño de tres filas con filas superior, media e inferior. 
. Si uso DIV, considero usar tres columnas para el diseño, como esta 
.
2. Definir el estilo de la carrocería
Primero defina el estilo del cuerpo de toda la página. El código es el siguiente:
cuerpo { MARGEN: 0px;
RELLENO: 0px;
ANTECEDENTES: url(../images/bg_logo.gif) #FEFEFE no repetir abajo derecho;
FAMILIA DE FUENTES: 'Lucida Grande','Lucida Sans Unicode','宋体','新宋体',arial,verdana,sans-serif;
COLOR: #666;
TAMAÑO DE FUENTE: 12px;
ALTURA DE LÍNEA: 150%;
La función del código anterior se explicó en detalle en el tutorial del día anterior y todos deberían entenderlo de un vistazo. El margen del borde se define como 0; el color de fondo es #FEFEFE, la imagen de fondo es bg_logo.gif y la imagen está ubicada en la esquina inferior derecha de la página, sin repetición, el tamaño de fuente se define como 12px; el color es #666; la altura de la línea es 150%.
3. Definir el div principal.
La primera vez que usé el diseño CSS, decidí usar un diseño de tres columnas de ancho fijo (que es más simple que el diseño de resolución adaptativa, jejeje, no digas que soy vago, primero implementa uno simple para ganar algo de confianza). !). Defina el ancho de la izquierda, el medio y la derecha en 200:300:280 respectivamente, definidos de la siguiente manera en CSS:
/*Definir el estilo de la columna izquierda de la página*/
#izquierda{ ANCHO:200px;
MARGEN: 0px;
RELLENO: 0px;
ANTECEDENTES: #CDCDCD;
}
/*Definir estilos de columna en la página*/
#medio{ POSICIÓN: absoluta;
IZQUIERDA: 200px;
ARRIBA: 0px;
ANCHO: 300px;
MARGEN: 0px;
RELLENO: 0px;
ANTECEDENTES: #DADADA;
}
/*Definir el estilo de la columna derecha de la página*/
#right{ POSICIÓN: absoluta;
IZQUIERDA: 500px;
ARRIBA: 0px;
ANCHO: 280 px;
MARGEN: 0px;
RELLENO: 0px;
ANTECEDENTES: #FFF;
Nota: utilicé POSICIÓN: absoluta; al definir los divs de la columna central y la columna derecha, y luego definí LEFT:200px;TOP:0px; y LEFT:500px;TOP:0px; el posicionamiento absoluto de la capa. Defina la columna del medio a 200 px desde el borde izquierdo de la página y a 0 px desde la parte superior; defina la columna derecha a 500 px desde el borde izquierdo de la página y a 0 px desde la parte superior;
En este momento, el código de toda la página es:
<html xmlns=" http://www.w3.org/1999/xhtml " lang="gb2312">
<cabeza>
<title>Bienvenido al nuevo "Diseñador Web": promoción y tutoriales estándar web</title>
<meta http-equiv="Tipo de contenido" content="text/html; charset=gb2312" />
<meta http-equiv="Contenido-Idioma" contenido="gb2312" />
<meta contenido="todos" nombre="robots" />
<meta name="autor" contenido="ajie(at)netease.com,阿杰" />
<meta name="Copyright" content=" www.w3cn.org , derechos de autor gratuitos, cualquier reproducción" />
<meta name="description" content="Nuevo diseñador web, sitio de tutoriales sobre estándares web, promueve la aplicación de estándares web en China />
<meta content="estándares web, tutoriales, web, estándares, xhtml, css, usabilidad, accesibilidad" name="palabras clave" />
<enlace rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="icono de acceso directo" href=" http://www.w3cn.org/favicon.ico " type="image/x-icon" />
<link rel="hoja de estilo" rev="hoja de estilo" href="css/style01.css" type="text/css" media="all" />
</cabeza>
<cuerpo>
<div id="left">Columna izquierda de la página</div>
<div id="middle">Columna central de la página</div>
<div id="right">Columna derecha de la página</div>
</cuerpo>
</html>
En este momento, el efecto de página solo puede ver tres rectángulos grises yuxtapuestos y una imagen de fondo. Pero quiero que la altura sea de pantalla completa, ¿qué debo hacer?
4.100% altura adaptable?
Para mantener las tres columnas a la misma altura, intenté configurar "height:100%;" en #left, #middle y #right, pero descubrí que no se esperaba ningún efecto de altura adaptativo. Después de algunos intentos, tuve que darle a cada div una altura absoluta: "altura: 1000px;", y a medida que el contenido aumentaba, necesitaba corregir este valor constantemente. ¿No hay manera de ajustar la altura? A medida que el propio estudio de Ajie profundizó, descubrió una solución flexible. De hecho, no es necesario establecer el 100%. Estamos demasiado aprisionados por el pensamiento de mesa. Este método se presentará en detalle en la siguiente sección del estudio.