*   >> Lectura Educación Artículos >> tech >> diseño web

¿Cómo construir una página web usando CSS en lugar de tablas para maquetar y positioning

generar el diseño utilizando el siguiente código:.

Si usted quiere cambiar algo en su diseño, por ejemplo el cambio de navegación vertical en el lado de la página para barra de navegación horizontal debajo de la cabecera, que tuvo que cambiar cada página de su sitio.

¿Cómo diseñamos el mismo diseño con CSS? Usando el atributo flotador. El uso de CSS que básicamente divide el contenido de su página en bloques, delimitada por los /... /etiquetas. El atributo float permite colocar (float) una parte de su contenido a lo largo del margen derecho o izquierdo de su bloque.

El resto del contenido de ese bloque fluirá alrededor de la porción flotante. Vamos a hacerlo. Necesitaremos una página HTML y una hoja de estilos CSS. Veamos el código HTML primera.

Como puedes ver, hemos dividido cada parte lógica de nuestra página en bloques. Como se puede ver, todos los elementos de nuestra página (cabecera, pie de página, la navegación y el contenido) se encuentran en un bloque llamado contenedor, que en el fondo es la página entera. Nosotros colocaremos nuestros elementos dentro del espacio "contenedor".

Como se puede imaginar, vamos a flotar el bloque de navegación a la izquierda de nuestro bloque "contenedor".

Aquí está el código para trabajar la magia.


Yo dije, no voy a entrar en detalles aquí, explicando lo que todos los medios de mando. Pero repasemos rápidamente, señalando lo que nos interesa. En primer lugar hemos asignado la fuente de las páginas, especificando su atributo. También asignamos un formato para el H1 y H2 etiquetas

.

Las llamadas "div # algo" son donde asignamos un formato y un comportamiento específico a cada uno de los bloques que definimos en nuestro html. Por favor, tenga en cuenta las convocatorias de navegación y contenido. Asignamos a la navegación de la propiedad "izquierda", colocándolo en la parte izquierda de nuestra página. Luego definimos el ancho de columna y el principal margen de contenido de la columna. Tenga en cuenta el "clear: left" Atributo asignamos al pie de página. Un error común es olvidar este atributo en el pie de página.

Si la olvida, el pie de página no será colocado en la parte inferior de la página, pero en la parte inferior del área de contenido principal y en la parte izquierda de su zona de navegación. Si el área de navegación es más largo que su contenido principal, se extiende por debajo del pie de página. Usando el atributo: "claro izquierda" que evitar

Page   <<  [1] [2] [3] >>
Copyright © 2008 - 2016 Lectura Educación Artículos,https://lectura.nmjjxx.com All rights reserved.