Hoy en día, a medida que los monitores de los usuarios son cada vez más grandes, el diseño anterior de ancho sólido de 1024 * 768 se está volviendo cada vez más obsoleto. Para los usuarios con pantallas grandes, el espacio vacío en ambos lados da a las personas una impresión seria a primera vista. desperdicio, como diseñador web tienes la responsabilidad de brindarle a este grupo de usuarios una buena interfaz de usuario.
Por supuesto, para reducir este desperdicio de pantalla, utilizar un diseño fluido elástico es la mejor solución. Puede aprovechar al máximo el espacio de la pantalla y mostrar contenido en pantalla completa sin importar la resolución que tenga. Sin embargo, debido a varias limitaciones, las páginas web actuales aún no están listas para adoptar completamente un diseño elástico fluido (especialmente el pisoteo desenfrenado de los estándares por parte de los fabricantes de navegadores y el soporte incompleto de los estándares CSS, etc.). Como intermediario entre usuarios y fabricantes, sólo podemos adaptarnos a la brecha entre ambos con una mentalidad compatible. Por lo tanto, como solución de transición, existe un diseño de este tipo: diseño elástico + ancho fijo.
La elasticidad mencionada aquí significa que el fondo se adapta al ancho de la pantalla, mientras que el ancho fijo significa que el contenido del texto se puede centrar automáticamente en pantalla ancha o estrecha. Sobrevive en las grietas para satisfacer las necesidades de usuarios con diferentes resoluciones de tamaño. El diseño que se muestra a continuación es un ejemplo típico.
Sin más preámbulos, vayamos al grano. Creemos una estructura de diseño como esta.
Primero construya la capa de estructura:
| <div id="envoltorio"> <div id="principal" clase="clearfix"> <div id="encabezado"> <div id="encabezado"></div> </div> <div id="contenido"></div> </div> </div> <div id="pie de página"> <div id="en pie"></div> </div> |
Analice la capa estructural. Una página web generalmente incluye tres partes: encabezado, área de contenido y pie de página. Colocamos el encabezado y el contenido en una capa contenedora, llamada contenedor, y separamos el pie de página, llamado contenedor. ¿Por qué está diseñado así? Queremos que este pie de página esté absolutamente en la parte inferior incluso cuando el área de contenido tenga menos de una pantalla.
Establecemos el ancho de los dos contenedores, envoltorio y pie de página, al 100% para que se adapten automáticamente al ancho de la pantalla. Y también establezca el área del encabezado al 100% de ancho. De esta manera, podemos insertar una imagen que se puede colocar en mosaico horizontal en el encabezado y pie de página, de modo que el fondo del encabezado y pie de página pueda llenar todo el espacio de la pantalla horizontalmente en una pantalla grande.
En cuanto al contenido del texto principal, nuestro enfoque general es mostrarlo en el centro cuando la resolución aumenta, dejando espacios en blanco en ambos lados. Debido a que el área del encabezado se ha configurado al 100% de ancho, agregamos otra capa contenedora en el encabezado, que sirve como portador del contenido de texto del encabezado real. Luego, configuramos un valor de ancho fijo para él, como 960 píxeles. y dejar que se centre.
| #inheader{width:960px;height:110px; margin:0 auto; } |
De esta manera, el texto principal del encabezado de la página flota en la capa superior del encabezado. Estas dos capas se pueden configurar con diferentes imágenes de fondo para formar una superposición. efecto de encabezado, que puede adaptar automáticamente una resolución de pantalla más grande.
De la misma forma, el pie de página también se puede implementar mediante este método.
En la capa estructural anterior, no utilicé este método en el área de contenido del medio, pero hice un pequeño cambio. Podemos ver que en el área de contenido no hay un contenedor incrustado, sino solo un contenedor. ¿Qué debemos hacer si queremos evitar que los dos lados del texto aparezcan vacíos en alta resolución? Por supuesto, puedes usar los métodos de encabezado y pie de página y agregar un div a su contenido. Por supuesto, para reducir el anidamiento, podemos utilizar soluciones alternativas. Podemos agregar una imagen muy grande al fondo del cuerpo y usar la posición de fondo para posicionar y centrar la imagen de modo que se muestren las imágenes en ambos lados del área de contenido.
Este blog es un caso específico. Si miras las imágenes de ambos lados de este blog en alta resolución y luego reduces la ventana, puedes ver que solo una pequeña área de las imágenes de ambos lados se muestra a 1024*. 768, mientras que el texto principal siempre se muestra en el centro.
Para demostrar el efecto, agregamos algunos otros ajustes de color y el estilo final es el siguiente:
| *{margen:0;relleno:0;} html, cuerpo, #wrapper {altura: 100%; tamaño de fuente: 12px;} #wrapper{ancho:100%;fondo:#777;} cuerpo > #wrapper {altura:auto; altura mínima:100%;} #main {padding-bottom: 54px;min-width:960px;}/* Debe usar la misma altura que el pie de página, el ancho mínimo se puede resolver agregando JS en ie6*/ #encabezado{text-align:center;color:#fff;fondo:#333;} #inheader{ancho:960px;alto:110px;alto de línea:110px;margen:0 auto;fondo:#CC9933;} h3{tamaño de fuente:14px;altura de línea:50px;} #inheader p{font-size:12px;line-height:30px;} #pie de página { posición: relativa; margin-top: -54px /* Valor negativo de la altura del pie de página*/ altura: 54px;/* altura del pie de página*/ ancho: 100%; min-width:960px;/*El ancho mínimo se resuelve agregando JS en ie6*/ claro: ambos; antecedentes:#666; alineación de texto:centro; color:#fff; } #infoot{alto:54px;alto de línea:54px;ancho:960px;margen:0 auto;fondo:#CC9966;} #pie de página p{line-height:26px;} #content{fondo:#999;ancho:960px;margen:0 auto;alto:692px;} #content p{line-height:30px;padding:0 30px;color:#fff;} /*Nota: Lo que hay que tener en cuenta es que el valor de relleno de #main, la altura del pie de página y el valor del margen negativo deben ser coherentes. El siguiente es el famoso cierre flotante universal Clearfix Hack*/ .clearfix:después { contenido: "."; mostrar: bloquear; altura: 0; claro: ambos; visibilidad: oculta;} .clearfix {pantalla: bloque en línea;} /* Se oculta de IE-mac */ * html .clearfix { altura: 1%;} .clearfix {pantalla: bloquear;} /* Finalizar la ocultación de IE-mac */ |