{In früherem HTML konnten die Positionen von Elementen nur der Reihe nach angeordnet werden, und es war für uns schwierig, einige Elemente auf der Webseite genau zu lokalisieren und zu steuern. CSS2? Cascading Style Sheet Level 2, das Layout?-Attribut von Cascading Style Sheet Version 2 wird angezeigt und mit der weit verbreiteten Unterstützung von Browsern können wir den oben genannten Zweck nicht nur statisch erreichen, sondern auch basierend auf Maus, Tastatur, Zeit usw. vorhersagen . Definierte externe Ereignisse verändern das Layout dynamisch. Die „aktive Ebene“ in den sehr beliebten Webseiten ist eine Bildanwendung davon. Wir werden hier darüber sprechen, wie diese Attribute in Kombination mit einigen DHTML-Objekten verwendet werden, um ein Dropdown-Menü ähnlich dem Windows-Fenster zu implementieren die Webseite (wie in der Abbildung gezeigt). Bitte beachten Sie den folgenden Code und die detaillierten Anweisungen.
<?--Der folgende Teil sollte nach dem <head> des Codes eingefügt werden-->
<style><?--
/? Dies sind einige CSS-Stile. Darunter ist „btnTD“ die Stilklasse, die die Schaltfläche „anhebt“, bevor sie gedrückt wird: Der Rand wird auf eine durchgezogene Linie mit einer Breite von 1 Pixel gesetzt, wobei der linke und obere Rand eine helle Farbe haben (hier weiß). , und der untere rechte Rand ist auf eine durchgezogene Linie mit einer Breite von 1 Pixel eingestellt. Der Rand ist dunkel (dunkelgrau). Wenn ein HTML-Element (z. B. eine Zelle) diesen Stil verwendet, sieht es sehr aus ähnlich wie ein „hervorstehender“ Knopf; „btnDTD“ bedeutet, dass der Knopf „konkav“ ist, wenn er gedrückt wird. ?／
．
BTNTD? RAND -Links?
1 FEST #FFFFFF
?
BTNDTD?
SOLID -RIGHT? 1 SOLID
-FONT
?
> ＞
＜?--
//Globale Variable, um zu bestimmen, welche Taste gedrückt wird
var intBlnClk=0?
//Maus passiert, verlässt und klickt, um die CSS-Stilfunktion
mOvrOut?objSrc??
var argv?argc?blnAc tive? strColor?strBgColor?strClass?strClassD? strCursor?
argv=mOvrOut. Argumente?argc=argv. Länge?
/?Das aktuelle Objekt nicht standardmäßig als „aktiv“ festlegen?/
blnActive=?argc>1?﹖ eva?argv[1]??false?
/?Der Standardstil des aktuellen Objekts beim Passieren der Maus ist „hervorstehende Schaltflächenform“?/
strClass=?argc>2 && arg v［2］?＝''?﹖ argv[2]?'btnTD'?
/?Das aktuelle Objekt ist standardmäßig „konkav knopfförmig“, wenn mit der Maus geklickt wird?/
strClassD=?argc>3 && argv［3 ]?=''?﹖ argv[3]?′ｔＤＤ′?
/? Die Vordergrundfarbe des aktuellen Objekts auf Weiß, die Hintergrundfarbe auf Blau und den Mausstil auf Handform festlegen
? ′?strCursor= 'hand'
? IE4 und höhere Versionen unterstützen nur diese dynamischen JavaScript-Änderungen /
if? all??
//Setzt den Mausstil des aktuellen Objekts auf den übergebenen Parameterwert
objSrc. Stil. Cursor=strCursor?
//Wenn die Maus den aktuellen Objektbereich betritt
if??objSrc. Inhalt?Ereignis. fromElement???
/? Als aktiven Stil festlegen? /
if?blnActive?? bgColor=strBgColor?objSrc. Stil. color=strColor?
/?Wenn das aktuelle Objekt nicht als aktiver Stil festgelegt werden muss, wenn der ursprüngliche Stil „hervorstehende Knopfform“ ist, setzen Sie ihn auf „konkave Knopfform“ und umgekehrt?/
else objSrc. className=?intBlnClk?=0?﹖ ｓｒＣａｓＤ?ｔｔＣａａｓ?
//Die Maus verlässt den aktuellen Objektbereich
else if??objSrc. Inhalt?Ereignis. toElement???
// Diese Stile auf den Standardwert
objSrc setzen. bgColor=''?objSrc. Stil. color=''?objSrc. ｃｌａｓＮｍｍｅｅｅｅｅｅ
/
? Allgemeine Funktion zum Ein-/Ausblenden von Ebenen. Verwenden Sie objNS, objIE, strStu als Parameter, wobei objNS und objIE die „Schichten“ von Netscape bzw. IE sind. „Object“ und strStu ist der Zustand der Schicht. Aus Platzgründen beachten Sie bitte die Anweisungen am Ende dieses Artikels. ?/
Funktion showHidLayers????
/? Rufen Sie die obige Funktion auf, um die vom Parameter übergebene Ebene anzuzeigen/auszublenden, was den Code vereinfacht. Detaillierte Funktionen werden hier nicht angegeben. ?/
function showLayer?intCurrent???
//--></script> ＜/head＞
Element．style．color＝＝''? showLayer?1?′hide′ ?″>
<?-- Die Funktion des Der obige Körperteil dient dazu, alle „Menüs“ auszublenden, die ausgeblendet werden sollen, wenn die Maus keine Taste drückt. Im Folgenden sind zwei Ebenen mit dem Namen „Menü“ definiert: Die absolute Position auf dem Bildschirm ist (12?12), sichtbar, das Ebenen-Z-Index-Attribut ist 100 unsichtbar sein. ->
<div id = "Menü" style = "Position? Absolute? Visi Bility? Sichtbar? = ″ # C0C0C0 ″ ＞ ＞ ｎ ｎ ″ ″ ″ ″ ″ UT?
″> Tianji.com < / TD> < / TR ＞ < /Tabelle ＞
<DIV-ID =″
″ ″ Position? ｚ ｅ ＞ ＞ ｃ ″? ???????????????????????
TR ＞ <TD ONMOUSEOVER = ″ Movrout? TRUE ?″ onMouseOut=″mOvrOut?this?″ =″100%″nowrap onC lick="ｗindow.location=′http?／／ｗｗ.pcwclub.com／′? ｓｗｗＬａｅｒ1?′ｉｉｅｅｅ″＞Computer News Readers Club＜/td＞＜/tr＞.
＜/Tabelle＞＜ /div＞
Aus Platzgründen können einige Funktionen nicht im Detail angegeben und erklärt werden. Wenn Sie den vollständigen Code benötigen, besuchen Sie bitte den folgenden Link: http?//ctsighｈ t. topcool. net/dokumente/menü. html.