{En HTML anterior, las posiciones de los elementos solo se podían organizar de forma secuencial y nos resultaba difícil ubicar y controlar con precisión algunos elementos en la página web. CSS2? Hoja de estilo en cascada Nivel 2, el atributo Diseño? de la Hoja de estilo en cascada Versión 2 aparece y se obtiene. Con el soporte generalizado de los navegadores, no solo podemos lograr el propósito anterior de forma estática, sino también predecir en función del mouse, el teclado, el tiempo, etc. Los eventos externos definidos cambian dinámicamente el diseño. La "capa activa" en las páginas web más populares es una aplicación de imagen de la misma. De lo que vamos a hablar aquí es de cómo usar estos atributos combinados con algunos objetos DHTML para implementar un menú desplegable similar a la ventana de Windows. la página web (como se muestra en la figura)). Consulte el siguiente código y las instrucciones detalladas.
<?--La siguiente parte debe insertarse después del <head> del código-->
<style><?--
/? Estos son algunos estilos CSS. Entre ellos, "btnTD" es la clase de estilo que "levanta" el botón antes de presionarlo: el borde se establece en una línea continua con un ancho de 1 píxel, donde los bordes izquierdo y superior son de color claro (aquí blanco). y el borde inferior derecho se establece en una línea continua con un ancho de 1 píxel. El borde es oscuro (gris oscuro). Si un elemento HTML (como una celda) con fondo gris usa este estilo, se verá muy bien. muy parecido a un botón "sobresaliente"; "btnDTD" significa que el botón es "cóncavo" cuando se presiona ". ?／
． BTNTD? ¿FRONTERA -Izquierda? 1 SÓLIDO #FFFFFF? ¿FRONTERA -DERECHA? 1 SÓLIDO #
808080
? BTNDTD? ¿FRONTERA -Izquierda? 1 SÓLIDO # 808080 ??
¿
TD
? > ＞
＜?--
//Variable global para determinar qué botón se presiona
var intBlnClk=0?
//El mouse pasa, sale y hace clic para cambiar la
función de estilo CSS de la celda mOvrOut?objSrc
?? strColor?strBgColor?strClass?strClassD?strCursor?
argv=mOvrOut. Argumentos?argc=argv. length?
/?¿No configurar el objeto actual como "activo" de forma predeterminada?/
blnActive=?argc>1?﹖ eva?argv[1]??false?
/?El estilo predeterminado del objeto actual cuando pasa el mouse es "forma de botón sobresaliente"?/
strClass=?argc>2 && arg v［2］?＝′′?﹖ argv[2]?'btnTD'?
/?¿El objeto actual tiene "forma de botón cóncavo" de forma predeterminada cuando se hace clic con el mouse?/
strClassD=?argc>3 && argv［3 ]?=′′?﹖ argv[3]?′ｂｔＤＴＤ′?
/? ¿Establecer el color de primer plano del objeto actual en blanco, el color de fondo en azul y el estilo del mouse en forma de mano
? ′?strCursor= 'hand'?
/? ¿IE4 y versiones superiores solo admiten estos cambios dinámicos de JavaScript en los estilos CSS
? all??
//Establece el estilo del mouse del objeto actual al valor pasado del parámetro
objSrc. estilo. cursor=strCursor?
//Si el mouse ingresa al rango de objetos actual
if??objSrc. contenido?evento. fromElement???
/? ¿Establecer como estilo activo? /
if?blnActive?? bgColor=strBgColor?objSrc. estilo. color=strColor? ?
/? Cuando no es necesario establecer el objeto actual como estilo activo, si el estilo original tiene "forma de botón sobresaliente", configúrelo en "forma de botón cóncavo" y viceversa./
else objSrc. className=?intBlnClk?=0?﹖ ｓｒＣａｓＤ?ｔｔＣａａｓ ?
//El mouse abandona el área del objeto actual
else if??objSrc. contenido?evento. toElement???
// Establece estos estilos en el valor predeterminado
objSrc. bgColor=′′?objSrc. estilo. color=′′?objSrc. ｃｌａｓＮｍｍｅｅｅｅｅｅ
/
? Función general para mostrar/ocultar capas. Utilice objNS, objIE, strStu como parámetros, donde objNS y objIE son las "capas" de Netscape e IE "Objeto", strStu es el estado de la capa. Debido a limitaciones de espacio, consulte las instrucciones al final de este artículo. ?/
function showHidLayers????
/? Llame a la función anterior para mostrar/ocultar la capa pasada por el parámetro, que es para simplificar el código. Las funciones detalladas no se proporcionan aquí. ?/
function showLayer?intCurrent???
//--></script> ＜/head＞
Element．style．color＝＝′′? showLayer?1?′hide′ ?″>
<?-- La función del La parte superior del cuerpo es para ocultar todos los "menús" que deben estar ocultos cuando el mouse no presiona ningún botón. Las siguientes son dos capas definidas con diseño CSS. El estado inicial de la capa denominada "menú" es: la posición absoluta en la pantalla es (12?12), visible, el atributo de índice z de la capa es 100; ser invisible. -->
<div id="menú" estilo="posición?absoluta?visibilidad? visible?izquierda?12px?top?12px? z-index? 100″><tab ｌｌｏｄｅｅｅｅｅｅｅｅ Ｇ 2 ″ BGCOLOR = ″ # C0C0C0 ″ BORDERCOLOR = ″ # C0C0C0 ″ ＞ ＞ ＞ ＞ ＞ ＞ ＞ ｎ ｎ ｎ ″ ″ ″ ″ ″ ″ ″ ″ ″ ″ ¿ESTO
? / Tabla ＞ </ DIV>
<DIV ID =″
Menú1 ″ ″ ″ ¿ABSOLUTO? ¿Oculto? ″ ″ ″ ″ ｃ ｃ ″? ???????????????????????????
TR ＞ <TD ONMOUSEOVER = ″ Movrout? TRUE ?″ onMouseOut=″mOvrOut?this?″ ancho =″100%″nowrap onC lick="ｗindow.location=′http?／／ｗｗ.pcwclub.com／′? ｓｗｗＬａｅｒ1?′ｉｉｅｅｅ″＞Club de lectores de noticias informáticas＜/td＞＜/tr＞ ＜
/table ＞＜ /div＞
Debido a limitaciones de espacio, algunas funciones no se pueden proporcionar ni explicar en detalle. Si necesita el código completo, visite el siguiente enlace: http?//ctsighｈ t. topcool. net/documentos/menú. HTML.