{No HTML anterior, as posições dos elementos só podiam ser organizadas sequencialmente e era difícil localizar e controlar com precisão alguns elementos na página da web. CSS2? Cascading Style Sheet Level 2, o atributo Layout? da Cascading Style Sheet versão 2 aparece e é obtido. Com o amplo suporte dos navegadores, podemos não apenas atingir o objetivo acima estaticamente, mas também prever com base no mouse, teclado, tempo, etc. . Eventos externos definidos alteram dinamicamente o layout. A "camada ativa" nas páginas da web muito populares é uma aplicação de imagem dela. O que falaremos aqui é como usar esses atributos combinados com alguns objetos DHTML para implementar um menu suspenso semelhante à janela do Windows. a página da web (como mostrado na figura). Consulte o código a seguir e instruções detalhadas.
<?--A seguinte parte deve ser inserida após o <head> do código-->
<style><?--
/? Entre eles, "btnTD" é a classe de estilo que "levanta" o botão antes de ser pressionado: a borda é definida como uma linha sólida com largura de 1 pixel, onde as bordas esquerda e superior são de cor clara (branco aqui) , e a borda inferior direita é definida como uma linha sólida com largura de 1 pixel. A borda é escura (cinza escuro). Se um elemento HTML (como uma célula) com fundo cinza usar esse estilo, ficará muito bonito. muito parecido com um botão "protuberante"; "btnDTD" significa que o botão é "côncavo" quando é pressionado. ?／
． BNTD? BORDA -Esquerda? 1 SÓLIDO
#FFFFFF
?
BTNDTD?BORDER -Esquerda? 1 SÓLIDO #808080?
FONT
-FMILY
?
> ＞
＜?--
//Variável global para determinar qual botão está pressionado
var intBlnClk=0?
//O mouse passa, sai e clica para alterar a
função de estilo CSS da célula mOvrOut?objSrc
??
strColor?strBgColor?
strClass?strClassD?
Argumentos?argc=argv. length?
/?Não define o objeto atual como "ativo" por padrão?/
blnActive=?argc>1?﹖ eva?argv[1]??false?
/?O estilo padrão do objeto atual quando o mouse passa é "formato de botão saliente"?/
strClass=?argc>2 && arg v［2］?＝′′?﹖ argv[2]?'btnTD'?
/?O objeto atual tem "formato de botão côncavo" por padrão quando o mouse é clicado?/
strClassD=?argc>3 && argv［3 ]?=′′?﹖ argv[3]?′ｂｔＤＴＤ′
/? Define a cor de primeiro plano do objeto atual para branco, a cor de fundo para azul e o estilo do mouse para o formato da mão
? ′?strCursor= 'hand'?
/? IE4 e versões superiores suportam apenas essas alterações dinâmicas de JavaScript em
documentos
CSS?all??
//Define o estilo do mouse do objeto atual para o valor passado do parâmetro
objSrc. estilo. cursor=strCursor?
//Se o mouse entrar no intervalo de objetos atual
if??objSrc. conteúdo?evento. fromElement???
/? Definir como estilo ativo? /
if?blnActive?? bgColor=strBgColor?objSrc. estilo. color=strColor? ?
/?Quando o objeto atual não precisa ser definido como o estilo ativo, se o estilo original for "formato de botão saliente", defina-o como "formato de botão côncavo" e vice-versa?/
else objSrc. className=?intBlnClk?=0?﹖ ｓｒＣａｓＤ?ｔｔＣａａｓ ?
//O mouse sai da área do objeto atual
else if??objSrc. conteúdo?evento. toElement???
// Defina esses estilos para o valor padrão
objSrc. bgColor=′′?objSrc. estilo. cor=′′?objSrc. ｃｌａｓＮｍｍｅｅｅｅｅｅ
/
? Função geral para mostrar/ocultar camadas. Use objNS, objIE, strStu como parâmetros, onde objNS e objIE são as "camadas" do Netscape e IE respectivamente "Object, strStu é o estado da camada. Devido a limitações de espaço, consulte as instruções no final deste artigo. ?/
function showHidLayers????
/? Chame a função acima para mostrar/ocultar a camada passada pelo parâmetro, o que simplifica o código. Funções detalhadas não são fornecidas aqui. ?/
function showLayer?intCurrent???
//--></script> ＜/head＞
Elemento．estilo．cor＝＝′′
? acima da parte do corpo é ocultar todos os "menus" que devem ser ocultados quando o mouse não pressiona nenhum botão. A seguir estão duas camadas definidas com layout CSS. O estado inicial da camada chamada "menu" é: a posição absoluta na tela é (12–12), visível, o atributo z-index da camada é 100; ser invisível. -->
<div id="menu" style="posição?absoluta?visibilidade? visível?esquerda?12px?topo?12px? índice z? 100″><tab ｌｌｏｄｅｅｅｅｅｅｅｅ Ｇ 2 ″ BGCOLOR = ″ # C0C0C0 ″ BORDERCOLOR = ″ # C0C0C0 ″ ＞ ＞ ＞ ＞ ＞ ＞ ｎ ｎ ｎ ″ ″ ″ ″ ″ ″ ″ ″ ″ ″ UT
? / Tabela ＞ </ DIV>
<DIV ID =″
Menu1 ″ ″ ″ posição Oculta = ″ ″ ″ ″ ｃ ｃ ″? ????????????????????????
TR ＞ <TD ONMOUSEOVER = ″ Movrout Isto?″ onMouseOut=″mOvrOut?this?″ largura =″100%″nowrap onC lick="ｗindow.location=′http?／／ｗｗ.pcwclub.com／′? ｓｗｗＬａｅｒ1?′ｉｉｅｅｅ″＞Computer News Readers Club＜/td＞＜/tr＞ ＜/table >
＜ /div＞
Devido a limitações de espaço, algumas funções não podem ser fornecidas e explicadas em detalhes. Se você precisar do código completo, visite o seguinte link: http?//ctsighｈ t. muito legal. net/documentos/menu. HTML.