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
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.
| * {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; } |
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.