Haga clic aquí para volver a la columna del tutorial Wulin.com HTML. Si desea explorar el tutorial CSS, haga clic aquí.
Arriba: Idioma de marcado - Reemplazo de imágenes . Capítulo 15 Especifique un estilo para <Body>
Uno de los beneficios de establecer contenido y efectos de visualización por separado es la flexibilidad. Mediante el uso de CSS para controlar el diseño del sitio web (el método utilizado en el Capítulo 12), puede controlar los elementos de diseño de todo el sitio web, cambiar algunas reglas e inmediatamente actualizar dramáticamente miles de páginas.
Uno de los ejemplos de conveniencia del uso de CSS para controlar el diseño es especificar un estilo para <body>, y al agregar clase o identificación a etiquetas <body>, puede personalizar cualquier etiqueta en la página. No hay ningún problema con las definiciones repetidas en absoluto.
En este capítulo, exploraremos cómo usar una estructura de etiqueta para cambiar dos configuraciones de diseño diferentes agregando clase a la etiqueta <Body>. Diseños de dos columnas o tres columnas.
Al igual que al rediseñar un sitio web para la compañía rápida que usa la tecnología de diseño CSS, uno de los desafíos es: aunque todas las páginas comparten la misma navegación y final de la página, también se requieren dos diseños diferentes.
El primer diseño es la página de índice (página de inicio), consulte la Figura 15-1. Esta es una página con función de navegación, que permite a los usuarios continuar penetrando la estructura del directorio del sitio web. Decidimos usar un diseño de tres columnas para estas páginas.
Figura 15-1 Demostración de la página de índice de tres columnas de Fast Company
El diseño de la segunda página es la página interna Figura 15-2. Cualquier página que se sienta como el destino usa este diseño de diseño. Para mejorar la legibilidad, decidimos omitir la columna izquierda y dejar dos columnas, es decir, una columna grande coloca contenido y el otro coloca anuncios.
Figura 15-2 Demostración de la página de texto de dos columnas de Fast Company.
La razón por la que explico esto no es para demostrar que hemos descifrado el gran misterio de un determinado diseño, sino para demostrar que agregar clase a la etiqueta <body> puede ajustar el ancho de la columna y colocar u omitir la tercera columna de acuerdo con la forma de la página. Al crear tal efecto, no se repiten reglas en absoluto, y no se introducen hojas de estilo adicionales. Se agregan marcas y estructuras de estilo.
Después de comenzar a describir la estructura de marcado compartida por las dos páginas, estas narraciones comenzarán a tener sentido. Para lograr el diseño de la columna, se utilizará el método de posicionamiento absoluto mencionado en el Capítulo 12.
La estructura de etiqueta simplificada de la página de texto se ve así:
<Div ID = Header>
... Información del encabezado aquí ...
</div>
<div ID = content>
... contenido aquí ...
</div>
<Div ID = Right>
... Información de la columna correcta ...
</div>
<Div ID = Pooter>
... Información de los pies ...
</div>
Usando las reglas CSS como #content y #footer más un parche de derecha a la derecha que es suficiente para usar el método de posicionamiento absoluto para poner en #right. En este ejemplo, 190 píxeles son suficientes.
#content, #footer {
Margen: 10px 190px 10px 10px;
}
Para las páginas de índice, la estructura de marcado es exactamente la misma, por lo que no hay necesidad de copiar una regla CSS compartida, pero se agrega una <div> adicional a la izquierda de #content como la tercera columna (#left).
<Div ID = Header>
... Información del encabezado aquí ...
</div>
<div ID = content>
... contenido aquí ...
</div>
<div ID = izquierda> ... Información de la columna izquierda ... </div> <Div ID = Right> ... Información de la columna correcta ... </div><Div ID = Pooter>
... Información de los pies ...
</div>
Para esta estructura de tres columnas, no solo debemos configurar el parche exterior derecho para #content y #footer para acomodar la columna derecha, sino que también debemos configurar el parche exterior izquierdo para acomodar la columna izquierda recién agregada.
Sin embargo, el parche exterior izquierdo se ha establecido en 10 píxeles para que coincida con el diseño de la página de texto preestablecido que solo tiene columnas dobles.
Vaya, estamos atascados, ¿cómo debemos continuar? Por favor continúe leyendo.
Página anterior 1 2 3 Página siguiente Lea el texto completo