{ใน HTML ก่อนหน้านี้ ตำแหน่งขององค์ประกอบสามารถจัดเรียงตามลำดับเท่านั้น และเป็นเรื่องยากสำหรับเราที่จะระบุตำแหน่งและควบคุมองค์ประกอบบางอย่างในหน้าเว็บได้อย่างแม่นยำ CSS2? Cascading Style Sheet ระดับ 2 แอตทริบิวต์เค้าโครงของ Cascading Style Sheet เวอร์ชัน 2 ปรากฏขึ้นและได้รับการสนับสนุนอย่างกว้างขวางจากเบราว์เซอร์ เราไม่เพียงแต่สามารถบรรลุวัตถุประสงค์ข้างต้นแบบคงที่เท่านั้น แต่ยังคาดการณ์ตามเมาส์ คีย์บอร์ด เวลา ฯลฯ เหตุการณ์ภายนอกที่กำหนดจะเปลี่ยนเค้าโครงแบบไดนามิก "เลเยอร์ที่ใช้งานอยู่" ในหน้าเว็บยอดนิยมคือแอปพลิเคชันรูปภาพของมัน สิ่งที่เราจะพูดถึงที่นี่คือวิธีใช้แอตทริบิวต์เหล่านี้รวมกับวัตถุ DHTML บางตัวเพื่อใช้เมนูแบบเลื่อนลงที่คล้ายกับหน้าต่าง Windows ใน หน้าเว็บ (ตามภาพ) ) โปรดดูรหัสต่อไปนี้และคำแนะนำโดยละเอียด
<?--ส่วนต่อไปนี้ควรแทรกไว้หลัง <head> ของโค้ด-->
<style><?--
/? นี่คือสไตล์ CSS บางส่วน ในหมู่พวกเขา "btnTD" เป็นคลาสสไตล์ที่ "ยก" ปุ่มก่อนที่จะกด: เส้นขอบถูกกำหนดเป็นเส้นทึบที่มีความกว้าง 1 พิกเซล โดยที่เส้นขอบด้านซ้ายและด้านบนมีสีอ่อน (สีขาวที่นี่) และเส้นขอบขวาล่างถูกตั้งค่าเป็นเส้นทึบที่มีความกว้าง 1 พิกเซล ขอบจะเป็นสีเข้ม (สีเทาเข้ม) หากองค์ประกอบ HTML (เช่น เซลล์) ที่มีพื้นหลังสีเทาใช้สไตล์นี้ ก็จะดูดีมาก เหมือนกับปุ่ม "ยื่นออกมา" "btnDTD" หมายความว่าปุ่มมีลักษณะ "เว้า" เมื่อกด ?／
. BTNTD? BORDER -ซ้าย? 1 Solid
#FFFFFF
?
BTNDTD? BORDER -ซ้าย? 1 SOLID #808080
?
FONT
? > >
< ＜?--
// ตัวแปรส่วนกลางเพื่อกำหนดว่าปุ่มใดที่ถูกกด
var intBlnClk=0?
// เมาส์ผ่าน ออก และคลิกเพื่อเปลี่ยน
ฟังก์ชันสไตล์ CSS ของเซลล์ mOvrOut?objSrc
var argv?argc?blnAc tive? strColor?strBgColor?strClass?strClassD? strCursor?
argv=mOvrOut. อาร์กิวเมนต์?argc=argv. length?
/?Do not set the current object as "active" by default?/
blnActive=?argc>1?﹖ eva?argv[1]??false?
/?รูปแบบเริ่มต้นของวัตถุปัจจุบันเมื่อเมาส์ผ่านคือ "รูปร่างของปุ่มที่ยื่นออกมา"?/
strClass=?argc>2 && arg v［2］?＝′′?﹖ argv[2]?'btnTD'?
/?วัตถุปัจจุบันจะเป็น "รูปทรงปุ่มเว้า" โดยค่าเริ่มต้นเมื่อคลิกเมาส์?/
strClassD=?argc>3 && argv［3 ]?=′′?﹖ argv[3]?′ｂｔＤＴＤ′?
/? ตั้งค่าสีพื้นหน้าของวัตถุปัจจุบันเป็นสีขาว สีพื้นหลังเป็นสีน้ำเงิน และรูปแบบเมาส์เป็นรูปร่างมือ
? ′?strCursor= 'hand'?
/? IE4 และเวอร์ชันที่สูงกว่ารองรับการเปลี่ยนแปลงแบบไดนามิกของ JavaScript เหล่านี้ใน
เอกสาร
CSS เท่านั้นทั้งหมด??
//ตั้งค่ารูปแบบเมาส์ของวัตถุปัจจุบันเป็นพารามิเตอร์ที่ส่งผ่านค่า
objSrc สไตล์. cursor=strCursor?
//ถ้าเมาส์เข้าสู่ช่วงวัตถุปัจจุบัน
ถ้า??objSrc. เนื้อหา?เหตุการณ์. fromElement???
/? ตั้งเป็นสไตล์แอคทีฟ? /
if?blnActive?? bgColor=strBgColor?objSrc. สไตล์. color=strColor? ?
/?เมื่อไม่จำเป็นต้องตั้งค่าวัตถุปัจจุบันเป็นสไตล์ที่ใช้งานอยู่ หากสไตล์ดั้งเดิมคือ "รูปร่างปุ่มที่ยื่นออกมา" ให้ตั้งค่าเป็น "รูปร่างปุ่มเว้า" และในทางกลับกัน?/
อื่น ๆ objSrc className=?intBlnClk?=0?﹖ ｓｒＣsquareｓＤ?ｔｔＣススｓ? ?
//เมาส์จะออกจากพื้นที่วัตถุปัจจุบัน
เป็นอย่างอื่นหาก??objSrc. เนื้อหา?เหตุการณ์. toElement???
// ตั้งค่าสไตล์เหล่านี้เป็นค่าเริ่มต้น
objSrc bgColor=′′?objSrc. สไตล์. สี=''?objSrc.
ｃｌขอบฟ้าｓＮｍｍּ Leica อายไลเนอร์
/
? ฟังก์ชั่นทั่วไปสำหรับการแสดง/ซ่อนเลเยอร์ ใช้ objNS, objIE, strStu เป็นพารามิเตอร์ โดยที่ objNS และ objIE คือ "เลเยอร์" ของ Netscape และ IE ตามลำดับ "Object, strStu คือสถานะของเลเยอร์ เนื่องจากข้อจำกัดด้านพื้นที่ โปรดดูคำแนะนำท้ายบทความนี้ ?/
function showHidLayers????
/? เรียกใช้ฟังก์ชันด้านบนเพื่อแสดง/ซ่อนเลเยอร์ที่ส่งผ่านโดยพารามิเตอร์ ซึ่งจะทำให้โค้ดง่ายขึ้น ไม่ได้ระบุฟังก์ชันโดยละเอียดไว้ที่นี่ ?/
function showLayer?intCurrent???
//--></script> ＜/head>
Element.style.color＝＝′′? showLayer?1?′hide′ ?″>
<?-- ฟังก์ชั่นของ ด้านบนของตัวเครื่องคือการซ่อน "เมนู" ทั้งหมดที่ควรซ่อนไว้เมื่อเมาส์ไม่ได้กดปุ่มใดๆ ต่อไปนี้เป็นสองชั้นที่กำหนดด้วยรูปแบบ CSS สถานะเริ่มต้นของเลเยอร์ชื่อ "เมนู" คือ ตำแหน่งที่แน่นอนบนหน้าจอคือ (12?12) มองเห็นได้ แอตทริบิวต์เลเยอร์ z คือ 100 ถึง มองไม่เห็น -->
<div id="menu" style="position?absolute?visi bility?Visible?left?12px?top?12px? z-index? 100″><tab ｌｌｏｄอายไลคอลอายไลเนอร์ Ｇ 2 ″ BGCOLOR = ″ # C0C0C0 ″ BORDERCOLOR = ″ # C0C0C0 ″ >
< >< >< / ตาราง >< / DIV>
<DIV ID =″
Menu1 ″ ″ ตำแหน่ง? ? ซ่อนอยู่? 11px? TOP? ????????????????????????
TR > <TD ONMOUSEOVER = ″ Movrout? This? TRUE ?″ onMouseOut=″mOvrOut?this?″ width =″100%″nowrap onC lick="ｗindow.location=′http?／／ｗｗ.pcwclub.com／′? ｓｗｗＬเกือบทั้งหมด ｒ1?′ｉｉָָּּ″＞ชมรมผู้อ่านข่าวคอมพิวเตอร์＜/td＞＜/tr＞
＜/table＞＜ /div>
เนื่องจากข้อจำกัดด้านพื้นที่ จึงไม่สามารถระบุและอธิบายฟังก์ชันบางอย่างโดยละเอียดได้ หากคุณต้องการโค้ดที่สมบูรณ์ โปรดไปที่ลิงก์ต่อไปนี้: http?//ctsighｈ t. ท็อปคูล เน็ต/เอกสาร/เมนู html