El código es el siguiente para mover el mouse a diferentes áreas y mostrar diferentes capas div. El siguiente código siempre dice "la identificación no puede ser un número". Por favor, deme una forma más estandarizada de escribirlo.

Fuente: Shuanshuang Studio

Cuando nombramos el nombre de clase HTML y la ID de la página principal, no podemos nombrarlos arbitrariamente, ya que esto traerá muchos problemas y se deben seguir ciertos principios. A continuación se muestran algunas convenciones de nomenclatura y ejemplos de nomenclatura comunes de nombres e identificadores de clases de etiquetas html.

1. Nomenclatura estructurada

El marcado estructurado significa que la información de expresión/posición está completamente separada del contenido, que incluye el nombre de la clase y el nombre de identificación que aparecen en el marcado.

La información asociada con el marcado se utiliza para describir la estructura del documento, no su apariencia. De esta manera, puedes reutilizar contenido y marcas en diferentes formatos de apariencia simplemente cambiando el CSS. Al comprender este método, no nos resulta difícil descubrir que cuando se trata de formatos de apariencia como el audio, no es apropiado nombrar clases e ID según las posiciones de la página. Por lo tanto, las clases y los identificadores deben estructurarse en función de cómo se utilizan en el documento y no de dónde aparecen.

La estructura de los nombres de clase e ID es la siguiente:

branding

main-nav

subnav

main- content

sidebar

Estos nombres son fáciles de entender, pero describen el mismo contenido que los nombres intuitivos. Esto alinea más el código con la intención original de usar marcado estructural puro, permitiendo a los desarrolladores usar los formatos de visualización de varios medios sin cambiar el marcado.

Incluso si no planeas formatear tus páginas web en otros medios, el uso de nombres estructurados puede ayudarte a actualizar o rediseñar tu sitio más fácilmente en el futuro. Por ejemplo, la denominación estructurada evita confusión cuando un div con ID de columna derecha se mueve al lado izquierdo de la página. Esto es más apropiado para una barra lateral div porque los desarrolladores pueden entender intuitivamente su nombre independientemente de en qué lado de la página aparezca.

2. Nombramiento intuitivo

Cuando diseñamos una página web y necesitamos identificar un div, la idea más natural es nombrar el elemento usando términos que describan su posición en la página. Los nombres de clase e ID generados por este método son los siguientes:

panel superior

nav.horizontal

lado izquierdo

center- column

right-col

Estas son formas válidas de nombrar clases e identificadores CSS y XHTML. Estos términos son simples y claros, satisfaciendo así la necesidad de identificar los elementos de la página y sus estilos CSS correspondientes.

El problema, sin embargo, es que estos nombres están asociados a expresiones específicas del contenido de la página. Se refieren a la posición de los elementos de la página dentro de un diseño de página específico, por lo que usar estos nombres fuera de este diseño puede resultar inapropiado o incluso confuso. Al mismo tiempo, estos nombres no se refieren a la estructura del contenido del documento. Así que aquí hay una mejor manera de nombrar clases e ID de CSS.

3. Convenciones

Andy Clarke analizó el código fuente de 40 sitios web diseñados por desarrolladores que defendían conceptos de diseño web estandarizados. Aunque los nombres de las clases y los nombres de identificación eran inconsistentes, se encontraron algunos nombres comunes que aparecían con frecuencia.

Aquí hay una lista de muestra de los nombres de clase/id más comunes:

Encabezado: encabezado

Contenido: contenedor

Contenedor: contenedor

Pie de página: pie de página

Copyright: copyright

Navegación: menú

Navegación principal: menú principal

Subnavegación: subMenú

Logo: logo

Eslogan: slogan

Título: banner

Abreviatura: bannerbanner

Título: title

Barra lateral: Barra lateral

Icono: Icono

Nota: Nota

Buscar: Buscar

Botón: Botón

Iniciar sesión: Iniciar sesión

Enlace: Enlace

Cuadro de información: Gestión

Modifiqué parte de su código, pruebe el siguiente método Ejecutar:

<.title>Documento sin título

<.getElementById(d1).style.display='none'; //ocultar capa

}

función mousemove(id)

{

ocultar("lista1");

ocultar("lista2");

ocultar ("lista3");

//----------------

mostrar(id);

}