CSS usa ul para el diseño de páginas web de varias columnas

Autor：Eve Cole Fecha de actualización：2009-05-31 01:02:37

De repente pensé en este método cuando estaba escribiendo un diseño de tres columnas con CSS hace unos días. Esta idea me parece un poco loca. Si hay algún problema, no dudes en darme algún consejo.

Cuando necesito escribir un diseño de tres columnas, normalmente elijo utilizar el siguiente método de diseño DIV:

Sin duda, el uso de un método de anidamiento de este tipo puede reducir mucho la probabilidad de errores de código, pero al mismo tiempo, dicho diseño también es un poco complicado y un poco inconveniente para el mantenimiento posterior. Un método que usamos a menudo al diseñar la navegación es usar la lista <ul> para el diseño. La navegación se puede describir como un diseño de varias columnas. En este caso, también podemos usar <ul> para diseñar la página. disposición de columnas.

Este es un diseño de ancho fijo, lo que significa que no es muy fluido. El diseño fluido aún no se ha probado. Lo intentaré nuevamente cuando tenga tiempo. Pegue el código de este diseño a continuación.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transicional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<cabeza>
<meta http-equiv=”Tipo de contenido” content=”text/html; charset=utf-8″ />
<title>Uso de UL para diseño de varias columnas</title>
<tipo de estilo="texto/css">
* {margen:0; relleno:0;}
cuerpo {
ancho: 100%;
altura: 100%;
antecedentes:#ddedfb;
}
#Contenido principal {
ancho: 600 px;
margen: 10px automático;
}
#encabezado,#pie de página {
antecedentes:#8AC7FA;
altura: 80 píxeles;
claro: ambos;
}
#pie de página {
claro: ambos;
relleno superior: 10px;
}
#contenido {
altura: 300 px;
margen: 10px automático;
}
#contentul {
estilo de lista: ninguno;
altura: 100%;
}
#contentulli{
ancho: 150 px;
altura: 100%;
antecedentes:#8AC7FA;
flotador: izquierda;
}
#contentulli#li2 {
ancho: 280 px;
margen: 0 10px;
}
#content ul li#li2 ul li {
ancho: 270 px;
altura: 140 px;
margen: 5px;
fondo:#0581F0;
}
</estilo>
</cabeza>

<cuerpo>
<div id="contenido principal">
<div id="header">Este es el encabezado</div>
<div id="contenido">
<ul>
<li>Este es el lado izquierdo</li>
<liid="li2″>
<ul>
<li>Esta es la parte superior del medio</li>
<li>Esta es la parte inferior en el medio</li>
</ul>
</li>
<li>Este es el lado derecho</li>
</ul>
</div>
<div id="footer">Esta es la parte inferior</div>
</div>
</cuerpo>
</html>

Este código se puede mostrar normalmente en IE7 y FF3. No se ha probado en otros navegadores. Si tiene un método mejor, sugiéralo.