De repente pensé en este método cuando estaba escribiendo un diseño de tres columnas en CSS durante unos días. Me sentí un poco loco por esta idea. Si hay algo de malo, por favor dame algún consejo.
Cuando necesito escribir un diseño de tres columnas, generalmente optaré por usar el siguiente método de diseño DIV:
Figura 1 Diseño DIV
El uso de tales métodos de anidación puede reducir mucho la probabilidad de los errores del código, pero al mismo tiempo, dicho diseño es un poco complicado y es un poco inconveniente para el mantenimiento posterior. Cuando diseñamos la navegación, a menudo usamos un método, que es usar la lista 〈ul〉 para diseñar, y la navegación puede describirse como un diseño de múltiples columnas. Dado que este es el caso, también podemos usar 〈ul〉 para diseñar la página múltiples columnas.
Figura 2 Diseño Div
Este es un diseño de ancho fijo, lo que significa que la liquidez no es fuerte. El diseño de liquidez aún no se ha probado. Lo intentaré cuando tenga tiempo. El siguiente es el código para este diseño:
<
<html xmlns = http: //www.w3.org/1999/xhtml>
<Evista>
<meta http-oquiv = content-type content = text/html; charset = utf-8 ″ />
<title> Use UL para el diseño de la multi-columna </title>
<estilo type = text/css>
* {margen: 0; relleno: 0;}
cuerpo {
Ancho: 100%;
Altura: 100%;
Antecedentes: #ddedfb;
}
#MainContent {
Ancho: 600px;
Margen: 10px Auto;
}
#encabezado,#pie de página {
Antecedentes:#8ac7fa;
Altura: 80px;
claro: ambos;
}
#footer {
claro: ambos;
Top-top: 10px;
}
#contenido {
Altura: 300px;
Margen: 10px Auto;
}
#content ul {
Estilo de lista: Ninguno;
Altura: 100%;
}
#content ul li {
Ancho: 150px;
Altura: 100%;
Antecedentes:#8ac7fa;
flotante: izquierda;
}
#content ul li#li2 {
Ancho: 280px;
margen: 0 10px;
}
#content ul li#li2 ul li {
Ancho: 270px;
Altura: 140px;
margen: 5px;
Antecedentes:#0581F0;
}
</style>
</ablo>
<Body>
<div id = mainContent>
<div id = encabezado> esta es la cabeza </div>
<div ID = content>
<ul>
<li> Esta es la izquierda </li>
<li id = 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 derecho </li>
</ul>
</div>
<Div id = pie> este es el fondo </div>
</div>
</body>
</html>
Este código se puede mostrar normalmente en IE7 y FF3. Otros navegadores no lo han probado. Si tiene un método mejor, también podría proponerlo.