ภาษาไทย
<html> <head> <title>รูปลักษณ์ของ Windows Longhorn Glass</title> <style> body { พื้นหลัง: #667788; ตระกูลฟอนต์: tahoma; ขนาดตัวอักษร: 16px; ช่องว่างภายใน: 0; ระยะขอบ: 0; ล้น: ซ่อนเร้น; พื้นหลัง:#669900; } h1 { ขนาดตัวอักษร: 140%; } #window1 { ด้านบน: 50px; ซ้าย: 50px; ความกว้าง: 400px; ความสูง: 300px; } #window2 { ด้านบน: 270px; ซ้าย: 250px; ความกว้าง: 400px; ความสูง: 300px; } #window3 { ด้านบน: 150px; ซ้าย: 400px; ความกว้าง: 300px; ความสูง: 300px; } #window4 { ด้านบน: 200px; ขวา: 100px; ความกว้าง: 400px; ความสูง: 350px; } #window1 .border { สีเส้นขอบ: #F8E0C0; } #window1 .glass { พื้นหลัง: #F8E0C0; } #window2 .border { สีเส้นขอบ: #E0F8C0; } #window2 .glass { พื้นหลัง: #E0F8C0; } #window3 .border { สีเส้นขอบ: #E0F0F8; } #window3 .glass { พื้นหลัง: #E0F0F8; } .window { ตำแหน่ง: สัมบูรณ์; } .shadow { ตำแหน่ง: สัมบูรณ์; ด้านบน: -2px; ซ้าย: -2px; ความกว้าง: 100%; ความสูง: 100%; สีพื้นหลัง: #4F7500; } .glass { ตำแหน่ง: สัมบูรณ์; ด้านบน: 0px; ซ้าย: 0px; ความกว้าง: 100%; ความสูง: 100%; สีพื้นหลัง: #4F7500; } .border { ตำแหน่ง: สัมบูรณ์; ด้านบน: 0px; ซ้าย: 0px; ความกว้าง: 100%; ความสูง: 100%; เส้นขอบ: 1px ทึบ #F0F0F0; การขยาย: 80px 10px 10p 10px; } .content { ความสูง: 100%; ความกว้าง: 100%; ล้น: อัตโนมัติ; พื้นหลัง: สีขาว; ช่องว่างภายใน: 0.5em; เคอร์เซอร์: ค่าเริ่มต้น; ตัวกรอง: อัลฟ่า (ความทึบ = 60); } .title { สี: ขาว; น้ำหนักตัวอักษร: ตัวหนา; ขนาดตัวอักษร: 20px; ตำแหน่ง: แน่นอน; ด้านบน: 0px; ซ้าย: 0px; ความกว้าง: 100%; ความสูง: 80px; การขยาย: 25px 20px; เคอร์เซอร์: ย้าย; } .current .shadow { บน: 1px; ซ้าย: 1px; } .current .content { ตัวกรอง: ไม่มี; } .current .title { ดัชนี z: 1; } #menu { ตำแหน่ง: สัมบูรณ์; เส้นขอบ: 1px RGB ทึบ (182, 184, 196); การขยาย: 1px 2px; พื้นหลัง: #f4f4f5; ตระกูลฟอนต์: Trebuchet ms; ขนาดตัวอักษร: 9pt; } #menu a { จอแสดงผล: บล็อก; ความกว้าง: 200px; สี: สีดำ; การตกแต่งข้อความ: ไม่มี; ความสูง: 18px; เคอร์เซอร์: ค่าเริ่มต้น; } #menu ai { จอแสดงผล: บล็อก; ลอย: ซ้าย; ตำแหน่ง:ญาติ; ความสูง: 14px; ความกว้าง: 26px; พื้นหลัง: #ececed; ขอบซ้าย: 1px ทึบ #ffffff; เส้นขอบขวา: 1px ทึบ #e0e0e1; ขอบซ้าย: -2px; ขอบขวา: -3px; การขยาย: 2px 0px; } #menu ช่วง { จอแสดงผล: บล็อก; ตำแหน่ง:ญาติ; ความสูง: 14px; พื้นหลัง: #f4f4f5; ขอบซ้าย: 1px ทึบ #ffffff; เส้นขอบขวา: 1px ทึบ #ffffff; ช่องว่างภายใน: 2px 3px; ขอบขวา: -2px; } .current #menu a:hover { เส้นขอบ: 1px ทึบ; สีของเส้นขอบ: rgb (158, 215, 240) #ffffff; ช่องว่างภายใน: 0px; } .current #menu a:hover i { เส้นขอบ: 1px solid; สีของเส้นขอบ: #ececed #e0e0e1 #d8e0f0 rgb(158, 215, 240); ตัวกรอง: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffe2eaf2, endColorstr=#ffd8e0f0); ช่องว่างภายใน: 0px; ความกว้าง: 25px; } .current #menu a:hover span { เส้นขอบ: 1px solid; เส้นขอบสี: #f4f4f5 rgb(158, 215, 240) #e8f2f8 #e8f2f8; ตัวกรอง: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffeef2f8, endColorstr=#ffddedf8); การขยาย: 0px 3px; } </style> <script> var ปัจจุบัน = null; การลาก var = false; var startDragging = เท็จ; ฟังก์ชั่น setCurrent(w) { if (w != current) { // unset old current if (current) current.className = 'window'; // ตั้งกระแสปัจจุบัน = w; current.className = 'หน้าต่างปัจจุบัน'; // วางกระแสไว้ด้านบน document.getElementById("windows").appendChild(current); } // init ลาก var offsetX = event.x - parseInt(w.currentStyle.left); var offsetY = event.y - parseInt(w.currentStyle.top); ถ้า (offsetY <80) { การลาก = จริง; DragEffect = function() { w.style.pixelLeft = event.x - offsetX; w.style.pixelTop = event.y - ชดเชย Y; } } else { var width = parseInt(w.currentStyle.width); var resizeX = offsetX > ความกว้าง - 10; ความสูง var = parseInt(w.currentStyle.height); var resizeY = offsetY > ความสูง - 10; ถ้า (resizeX || resizeY) { การลาก = จริง; var offsetX = event.x - ความกว้าง; var offsetY = event.y - ความสูง; DragEffect = function() { ถ้า (resizeX) w.style.pixelWidth = event.x - offsetX; ถ้า (ปรับขนาดY) w.style.pixelHeight = event.y - offsetY; } } } } ฟังก์ชัน calcResize(w) { var offsetX = event.x - parseInt(w.currentStyle.left); var offsetY = event.y - parseInt(w.currentStyle.top); ความกว้าง var = parseInt(w.currentStyle.width); var resizeX = offsetX > ความกว้าง - 10; ความสูง var = parseInt(w.currentStyle.height); var resizeY = offsetY > ความสูง - 10; w.style.cursor = (resizeX||resizeY)?(resizeY?"S": "")+(resizeX"E": "")+"-resize":default"; } ลากเอฟเฟกต์; ฟังก์ชั่น moveCurrent() { ถ้า (!dragging || !current) กลับ; ถ้า (event.button == 0) { releaseCurrent (); กลับ; } ถ้า (!startedDragging) { current.className = 'ลากหน้าต่างปัจจุบัน'; startDragging = จริง; } ลากเอฟเฟ็กต์(); } ฟังก์ชั่น releaseCurrent() { ถ้า (!current) กลับ; current.className = 'หน้าต่างปัจจุบัน'; การลาก = เท็จ; startDragging = เท็จ; } ฟังก์ชั่น makeUnselectable(e) { e.unselectable=true; ถ้า (e.className == 'เนื้อหา') กลับมา; สำหรับ (var c=e.firstChild;c;c=c.nextSibling) ถ้า (c.nodeType == 1) makeUnselectable(c); } </script> </head> <body onload="makeUnselectable(document.body);setCurrent(window1)" onmouseup="releaseCurrent()" onmousemove="moveCurrent()"> <div id="windows"> < div class="window" id="window1" onmousedown="setCurrent(this)" onmousemove="calcResize(this)"> <div class="shadow"></div> <div class="title">w3future. com</div> <div class="glass"></div> <div class="border"> <div class="content"> <h1>Windows Longhorn Glass Look</h1> <p>หน้านี้ใช้ ไม่มีภาพ ยกเว้นภาพพื้นหลัง ทุกอย่างทำด้วย HTML, CSS, JavaScript เล็กน้อย และตัวกรอง Internet Explorer จำนวนมาก</p> <p>ใช่ มันช้า แต่ก็สวยใช่ไหม</p> <p>ดูน่ากลัวใน เบราว์เซอร์ใดก็ได้ยกเว้น Internet Explorer</p> <p> </p> <p align="right">Sjoerd Visscher, <a href="http://w3future.com/weblog/">w3future.com </a>, 2003</p> </div> </div> </div> <div class="window" id="window3" onmousedown="setCurrent(นี้)" onmousemove="calcResize(นี้)" > <div class="shadow"></div> <div class="title">หน้าต่างสีน้ำเงิน</div> <div class="glass"></div> <div class="border"> <คลาส div ="content"> bbbbbbbb </div> </div> </div> <div class="window" id="window4" onmousedown="setCurrent(this)" onmousemove="calcResize(this)"> <คลาส div ="shadow"></div> <div class="title">เมนูแตรยาว</div> <div class="glass"></div> <div class="border"> <div class="content" > <div id="menu"> <a href="#"><i></i><span>รายการเมนู 1</span></a> <a href="#"><i>< /i><span>รายการเมนู 2</span></a> <a href="#"><i></i><span>รายการเมนู 3</span></a> </div> </div> </div> </div> <div class="window" id="window2" onmousedown="setCurrent(this)" onmousemove="calcResize(this)"> <div class="shadow">< /div> <div class="title">หน้าต่างสีเขียว</div> <div class="glass"></div> <div class="border"> <div class="content"> </div> < /div> </div> </div> </body> </html>
