1. Problemas de validación de CSS
En primer lugar, de acuerdo con los requisitos del concurso, las entradas deben cumplir con los estándares XHTML y el CSS enviado debe pasar la verificación del W3C. La situación de verificación de CSS es ideal. Sólo 8 entradas entre las entradas fallaron en la verificación de CSS2.0. Los principales errores de verificación son: "Línea: 0 familia de fuentes: se recomienda especificar una familia de tipos como última opción".
El W3C recomienda que al definir fuentes, se termine con una categoría de fuentes en lugar de una sola fuente. Por ejemplo, "sans-serif" se utiliza para garantizar que las fuentes web se puedan mostrar en diferentes sistemas operativos.
Aunque la mayoría de las personas definen "sans-serif" en la etiqueta del cuerpo, si se omite sans-serif al definir la fuente nuevamente en otros ID o clases, se considera que la verificación falla. Este error no es muy grave y se puede evitar con un poco de atención.
2. Sugerencias de escritura CSS
Agregue comentarios a archivos CSS. Los comentarios brindarán comodidad para su mantenimiento futuro. Se recomienda agregar comentarios a los archivos CSS tanto como sea posible y no preocuparse por agregar una pequeña cantidad de bytes.
Intente acortar la sintaxis CSS tanto como sea posible. Por ejemplo, el valor de color "#FFFFFF" se puede abreviar como "#FFF"; "padding-top:30px;Padding-right:0;padding-bottom:10px;padding-left:2 0px" se puede abreviar como " relleno: 30px 0 10px" 20px;". Existen más técnicas de ahorro al definir técnicas y, a medida que adquiera más dominio en las aplicaciones CSS, seguirá descubriendo mejores métodos.
3. Problemas de validación de XHTML
Debido a que era una competencia de hojas de estilo, todos prestaron más atención a la verificación de CSS, pero fueron un poco descuidados en términos de cumplimiento de XHTML y ocurrieron muchos errores de bajo nivel. Los principales problemas se enumeran a continuación:
target="_blank", esta sintaxis es correcta en HTML4.0, pero no está permitida en XHTML1.0. Una solución es escribir target="new", y otra solución es usar js para procesar todos los objetivos;
Es mejor no incrustar la hoja de estilo. Es más fácil mantener el archivo de la hoja de estilo de forma independiente. Si <style> está incrustado, debe escribirse como <style type="text/css"> y el tipo no se puede ignorar; de lo contrario, XHTML no puede determinar para qué se utiliza su estilo.
<br> debe escribirse como <br />. XHTML requiere que todas las etiquetas estén cerradas. Las etiquetas no emparejadas deben ir seguidas directamente de "/".
Reutilizar la misma identificación. Una ID solo se puede usar una vez en XHTML. Si necesita hacer referencia al estilo varias veces, debe usar class.
<meta http-equiv="Content-Type" content="text/html; charset="gb2312" />Obviamente hay una comilla adicional en el valor del atributo de contenido.
El método de incrustación de Flash es incorrecto. <embed> era originalmente una etiqueta privada de Netscape. Aunque luego fue admitida por IE, el W3C nunca la reconoció. No existe una etiqueta <embed> en HTML4.0. El W3C recomienda el uso de la etiqueta <object>. Para resolver el problema de compatibilidad entre diferentes navegadores, una solución alternativa es utilizar ambas etiquetas. El código de muestra completo es el siguiente (el fondo flash es transparente): <object classid="clsid:27CDB6E-AE6D-11cf-96B8-444553540000"
codebase=" http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0 "
ancho="300" alto="100"> <param nombre="calidad" valor="alto"> <param nombre="wmode" valor="transparent">
<param nombre="SRC" valor="test.swf"> <embed src="test.swf" wmode="transparent" calidad="alta"
pluginspage=" http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash "
tipo="aplicación/x-shockwave-flash" ancho="300" alto="100"> </embed> </object>
Pero todavía no es posible escribirlo directamente en XHTML. Ahora solo podemos engañar a la verificación escribiendo el código anterior en el archivo flash.js y luego llamándolo.
<script tipo="text/javascript" src="flash.js"></script>
Si el flash cumple con los estándares es un tema controvertido. Más instrucciones: consulte http://www.blueidea.com/tech/site/2004/1920.asp
Códigos como id=header class=title deben escribirse como id="header" class="title". Citar valores de atributos es la regla de sintaxis XHTML más básica.
4. Problemas de compatibilidad
Hay 12 obras que están deformadas y desalineadas cuando se ven en IE6.0, Mozilla Firefox1.0 y Opera 7.12. (No probé con IE5.0, era un vago :) IE5.0 es un desafío para todos los diseñadores de diseño CSS).
Está centrado en IE, pero no en Mozilla. Configurar el cuerpo {TEXT-ALIGN: center;} en IE ya puede centrarlo, pero en Mozilla debes agregar las siguientes configuraciones de estilo a la capa que necesita ser centrada: MARGIN-RIGHT: auto;MARGIN-LEFT: auto excede; el ancho. La página parece normal en Mozilla, pero en IE está deformada porque excede el ancho y las capas una al lado de la otra se mueven debajo. Esta situación se debe a las diferentes interpretaciones del modelo de caja entre IE y Mozilla. Hay muchas soluciones, como el método "!important".
En términos generales, la mayoría de las entradas están calificadas en general y el propósito de esta competencia se ha logrado básicamente. Los estándares web y el diseño CSS han sido comprendidos y dominados por cada vez más diseñadores. En cuanto al mal arte de algunas obras, creo que este es un proceso. Todos los diseñadores senior deberían recordar que cuando apareció por primera vez el diseño de la tabla, la mayoría de las páginas web eran muy simples. Después de un período de digestión, comprensión y aplicación del diseño CSS, habrá más páginas web que tengan en cuenta tanto la tecnología como la estética como el primer premio.