En mi tutorial anterior "Diseño básico de Nine Palaces", presenté el método de utilizar el posicionamiento relativo y el posicionamiento absoluto para crear el diseño básico de Nine Palaces. Este es un método que está más en línea con el pensamiento inercial de la gente. Parece que todo en el proceso de producción es una cuestión de rutina, pero debido al repugnante ERROR de paridad de IE6, este diseño se ha vuelto un poco fuera del alcance. El método debe ser universal, porque la mayoría de los usuarios domésticos todavía usan IE6 y no podemos perder a estos usuarios por esto.
Actualmente no existe una cura para este ERROR y no existen trucos que puedan usarse. La única forma de usarlo es omitirlo. En otras palabras, quiero ubicar los cuatro contenedores de las esquinas de la cuadrícula de nueve cuadrados. No se puede utilizar el método de posicionamiento absoluto. Este es un gran golpe que anulará por completo el método utilizado en mi artículo anterior. de nuevo.
Entonces, ¿qué otras tecnologías pueden salvar este ERROR de una situación desesperada? Sabemos que si usa el método flotante izquierdo y derecho, puede compensar con precisión el objeto elemento, y este método también puede evitar el ERROR de paridad de IE6. Bien, usémoslo.
Puntos clave y dificultades en el diseño.
Seguimos construyendo la estructura de nuestro nuevo modelo de acuerdo con la estructura de la tabla, pero esta vez será diferente de la estructura del artículo anterior. Los puntos clave y las dificultades a las que debemos prestar atención en este modelo son los dos puntos siguientes:
1. Los valores de ancho de los dos contenedores intermedios t_m y b_m deben ser un valor porcentual; de lo contrario, no se puede garantizar la expansión dinámica izquierda y derecha de toda la cuadrícula de nueve cuadrados y no debe ser un valor de píxel fijo. Su ancho es igual al ancho total del contenedor menos la suma de los anchos de los dos contenedores de las esquinas como porcentaje. La fórmula de cálculo es:
El ancho de t_m (o b_m) = (ancho total del contenedor - (ancho del contenedor de la esquina superior izquierda + ancho del contenedor de la esquina superior derecha)) / ancho total del contenedor
Es decir, el ancho de t_m o b_m no es 100%. Sin embargo, el ancho de los dos contenedores t_l y t_r es generalmente el ancho de una imagen en casos reales, por lo que generalmente es un valor de ancho fijo, por lo que en. los mismos tres En un contenedor, el ancho en los lados izquierdo y derecho es un valor fijo, pero el medio requiere un porcentaje, y el ancho total de estos tres contenedores debe sumar 100%.
Aquí utilizamos un método relativamente seguro para hacer que el contenedor del medio alcance el porcentaje de ancho ideal:
Podemos usar un contenedor DIV y configurar su relleno: 0 10px; no establecer su ancho. De forma predeterminada, su ancho es 100%. Debido a que se establecen los valores de relleno izquierdo y derecho, el ancho interno es el valor de ancho ideal de t_m que queremos, por lo que definimos un contenedor dentro y el ancho de este subcontenedor se establece en 100%. El color de fondo de este subcontenedor se puede establecer en una imagen de fondo en mosaico horizontal a la izquierda y a la derecha. Este subcontenedor es el contenedor superior que vamos a utilizar. Cumple con nuestros requisitos especiales en cuanto a valores de ancho.
Por lo tanto, la estructura de t_m se puede convertir en la siguiente estructura:
Sin embargo, esta definición causará otro problema. Este problema existe en los navegadores inferiores a IE7. Debido a que definimos el relleno, también generará parches internos izquierdo y derecho en la capa media del cuerpo a continuación. ¿IE7?
Entonces, el remedio es usar un truco HACK aquí para IE6 e IE7:
.b_l{margin-izquierda:0px;+margin-izquierda:-10px;_margin-izquierda:-10px;}
.b_r{margin-right:0px;+margin-right:-10px;_margin-right:-10px;}
Esta oración establece diferentes valores de desplazamiento para tres navegadores y desplaza b_l y b_r hacia la izquierda y hacia la derecha en la posición especificada.
2. Los valores de altura de los dos contenedores b_l y b_r deben ser los mismos para que puedan colocar el color de fondo en mosaico verticalmente hacia abajo. De esta manera, cuando cambia la altura del contenido en el área de contenido principal central (contexto), el color de fondo en ambos lados siempre puede mantener la misma altura que el área de contenido principal (contexto). Es decir, pueden estirar libremente su altura según la altura del cuerpo del contenido.
Podemos utilizar el método de varias columnas con la misma altura que se suele utilizar en el trabajo diario para solucionar este problema. Este método utiliza una combinación de parches internos y parches externos negativos para lograr la misma altura para varias columnas:
.m_l, .m_r{padding-bottom:30000px;margin-bottom:-30000px;}
Establecemos el valor inferior del relleno del parche interno inferior de m_l y m_r en un valor relativamente grande. Por ejemplo, los configuré en 30000 px (puede configurarlo en el valor que desee). no exceda este valor de altura. Luego, establezca el parche exterior inferior (margen-inferior) en el mismo valor negativo que el valor del parche interior inferior (relleno-inferior), retírelo a su posición original y configure el contenedor total (caja) en overflow:hidden;, Corte el exceso de altura para asegurarse de que las dos columnas tengan la misma altura.
Después de resolver los dos difíciles problemas anteriores, ¡el resto es simple y divertido! [Cortar-Página]
capa estructural
Ahora hemos ajustado la capa de estructura según el caso anterior, por lo que queda la siguiente estructura:
El siguiente es el contenido citado:
Área del cuerpo del contenido |
capa de estilo
Aquí están las configuraciones de estilo principales:
El siguiente es el contenido citado: /*Contenedor total*/ .box{desbordamiento:oculto;ancho:50%;margen:50px auto 0;fondo:#fff;} /*Estilo superior*/ /*Estilo intermedio*/ /*Estilo inferior*/ |
Puedes usar ocho imágenes para hacer un hermoso cuadro de cuadrícula de nueve cuadrados. Mira que perfecto es.
Este modelo ha sido probado en los siguientes navegadores:
IE5.5, IE6, IE7, IE8, FF3, TT, Maxthon2.1.5, Opera9.6, Safari4.0, Chrome2.0.
El siguiente es el contenido citado: Este es un modelo de diseño de cuadrícula de nueve cuadrados. No se cargan imágenes. Estire y cambie el tamaño de la ventana como desee. Verá que la cuadrícula de nueve cuadrados se extiende libre y elásticamente en todas las direcciones. Este modelo ha modificado las deficiencias de la versión anterior, utilizando el método flotante para evitar el extraño error de 1 px de ancho y alto en IE6, y es perfectamente compatible con todos los navegadores convencionales. Esta prueba de modelo ha pasado completamente en los siguientes navegadores: IE5.5, IE6, IE7, IE8, FF3, TT, Maxthon2.1.5, Opera9.6, Safari4.0, Chrome2.0. Para obtener más trabajos originales, visite: Blog de Bingjifeng Dirección del blog: http://www.cnblogs.com/binyong |
Enlace a este artículo: http://www.blueidea.com/tech/web/2009/6805.asp