Hace unos años, DIV + CSS comenzó a convertirse gradualmente en el método preferido de diseño web. En la actualidad, DIV + CSS se ha convertido en el estándar para el diseño web. Muchos sitios web nacionales han completado la reconstrucción de TABLE a DIV + CSS. años. . El autor también es un diseñador web que prefiere este método. He estado usando div+css para proporcionar diseños a los clientes durante tres años. Entonces, ¿qué ventajas tiene respecto a TABLE? Hablemos de algunas experiencias y entendimientos personales, con la esperanza de ser útiles para colegas y personal relacionado.
La mayor ventaja de utilizar DIV + CSS en el diseño web es estandarizar el código web, abandonar el método de diseño de tabla obsoleto y lograr la separación entre contenido, rendimiento y comportamiento. El código html está mejor estructurado y es más fácil de leer y mantener. y el tamaño del archivo de la página web también es menor. Por ejemplo, después de una reconstrucción reciente del sitio web de un cliente, el tamaño del archivo de la página web era menos de la mitad de su tamaño original, por lo que ocupaba menos espacio en el sitio web y el sitio web se abría más rápido.
Los métodos DIV+CSS y TABLE son muy diferentes en diseño. Se requiere una planificación cuidadosa antes de comenzar a diseñar una página web, como nombrar los elementos que componen la página web para facilitar la definición de estilo en CSS. Los atributos públicos se definen mejor con nombres de clases. . Los estilos comunes de todo el sitio web se pueden colocar en un archivo CSS separado. Los atributos públicos comunes incluyen: ancho de la página web, color de fondo, imagen de fondo, tamaño predeterminado de fuente, color, estilo de enlace, etc. Hay diferentes estilos para cada página web. el archivo css Es mejor centrarse en un bloque e indicar qué página web o parte de la página web es antes del bloque. Esto no solo reducirá el tamaño del archivo CSS, sino que también evitará confusiones y hará que el mantenimiento sea más conveniente. Vale la pena mencionar que los estilos no deben incrustarse en el código de la página web para separar completamente el contenido y el estilo.
Para hacer un buen trabajo en el diseño web DIV+CSS, hay tres puntos que deben entenderse.
1. Atributo flotante: DIV (capa) ocupa una fila completa de forma predeterminada. Para diseños de diseño comunes de dos o varias columnas, debe poder configurar correctamente los atributos flotante y ancho para lograr el efecto. Una vez completado el diseño de varias columnas, si se sigue una capa que ocupa el banner, debe configurar el atributo de limpieza para borrar la capa flotante.
2. Modo de cuadro: la capa tiene atributos como ancho, alto, borde, espacio interior y espacio exterior. El espacio real ocupado por la capa es la suma de los valores de atributos anteriores. El uso adecuado de estos atributos puede lograr un diseño compacto y. diseño elegante. Hermoso diseño web.
3. Anidamiento de capas: todos los diseñadores web experimentados saben que no es aconsejable anidar demasiadas capas; generalmente no más de 3 capas darán lugar a un código complejo y redundante, dificultad de mantenimiento y funcionamiento lento. Además, en el diseño de varias columnas, se puede utilizar la capa flotante y no es necesario configurar una capa general de IE para la incrustación.
Mencione el tema de la compatibilidad del navegador por separado. En comparación con el diseño TABLE, DIV + CSS es más propenso a problemas de incompatibilidad con múltiples navegadores. La razón principal es que diferentes navegadores tienen diferentes valores predeterminados para los estándares web. La corriente principal en China es IE, y Firefox y Chrome se usan con menos frecuencia. En términos de pruebas de compatibilidad, primero debe asegurarse de que no ocurran problemas en múltiples versiones de IE. A continuación se muestran algunos métodos y técnicas diseñados para ayudarlo a encontrar soluciones específicas. problemas en el sitio web.
Resumen: DIV + CSS tiene muchas ventajas sobre TABLE. Los diseñadores web deben abandonar el método TABLE lo antes posible, lo que será más propicio para instarse a aprender en profundidad el conocimiento de DIV + CSS. No es difícil aprender y utilizar el método de diseño web DIV + CSS. Siempre que comprenda algunos conocimientos básicos y realice algunos casos más, gradualmente lo comprenderá y lo dominará.
Este artículo fue publicado por [Hippie], el webmaster de http://www.swjns.com . Conserve la URL para reimprimir.
Gracias a hbjsp por tu aporte.