中文(繁体)
<html> <head> <title>Windows Longhorn 玻璃外觀</title> <style> body { background: #667788;字體系列：tahoma；字體大小：16px；填充：0；保證金：0；溢出：隱藏；背景：#669900； } h1 { 字體大小：140%; } #window1 { 頂部：50px;左：50 像素；寬度：400px；高度：300px； } #window2 { 頂部：270px;左：250 像素；寬度：400px；高度：300px； } #window3 { 頂部：150px；左：400 像素；寬度：300px；高度：300px； } #window4 { 頂部：200px;右：100 像素；寬度：400px；高度：350像素； } #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；遊標：預設；過濾器：alpha（不透明度=60）； } .title { 顏色：白色；字體粗細：粗體；字體大小：20px；位置：絕對；頂部：0px；左：0px；寬度：100%；高度：80像素；內邊距：25 像素 20 像素；遊標：移動； } .current .shadow { 頂部：1px;左：1 像素； } .current .content { 過濾器：無； } .current .title { z-index: 1; } #menu { 位置：絕對；邊框: 1px 實心 rgb(182, 184, 196);內邊距：1 像素 2 像素；背景：#f4f4f5；字體系列：trebuchet ms；字體大小：9pt； } #menu a { 顯示：塊；寬度：200px；顏色：黑色;文字裝飾：無；高度：18px；遊標：預設； } #menu ai { 顯示：塊；浮動：向左；職位：親屬；高度：14px；寬度：26px；背景：#ececed；左邊框：1px 實線#ffffff；右邊框：1px 實線#e0e0e1；左邊距：-2px；右邊距：-3px；內邊距：2px 0px； } #menu a span { 顯示：塊；職位：親屬；高度：14px；背景：#f4f4f5；左邊框：1px 實線#ffffff；右邊框：1px 實線#ffffff；內邊距：2 像素 3 像素；右邊距：-2px； } .current #menu a:hover { 邊框: 1px 實心;邊框顏色: rgb(158, 215, 240) #ffffff;內邊距：0px； } .current #menu a:hover i { border: 1pxsolid;邊框顏色: #ececed #e0e0e1 #d8e0f0 rgb(158, 215, 240);過濾器： progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffe2eaf2, endColorstr=#ffd8e0f0);內邊距：0px；寬度：25 像素； .current #menu a:hover span { border: 1pxsolid;邊框顏色: #f4f4f5 rgb(158, 215, 240) #e8f2f8 #e8f2f8;過濾器： progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffeef2f8, endColorstr=#ffddedf8);內邊距：0px 3px； } </style> <script> var current = null; var 拖曳 = false; var 開始拖曳 = false; function setCurrent(w) { if (w != current) { // 取消設定舊的 current if (current) current.className = 'window'; // 設定目前電流 = w; current.className = '目前視窗'; // 將目前內容放在頂端 document.getElementById("windows").appendChild(current); } // 初始化拖曳 var offsetX = event.x - parseInt(w.currentStyle.left); var offsetY = event.y - parseInt(w.currentStyle.top); if (offsetY < 80) { 拖曳 = true; DragEffect = function() { w.style.pixelLeft = event.x - offsetX; } w.style.pixelTop = event.y - offsetY; } } else { var width = parseInt(w.currentStyle.width); var resizeX = offsetX > 寬度 - 10; var height = parseInt(w.currentStyle.height); var resizeY = offsetY > 高度 - 10; if (resizeX || resizeY) { 拖曳 = true; var offsetX = event.x - 寬度； var offsetY = event.y - 高度； DragEffect = function() { if (resizeX) w.style.pixelWidth = event.x - offsetX; } if (resizeY) w.style.pixelHeight = event.y - offsetY; } } } } function calcResize(w) { var offsetX = event.x - parseInt(w.currentStyle.left); var offsetY = event.y - parseInt(w.currentStyle.top); var width = parseInt(w.currentStyle.width); var resizeX = offsetX > 寬度 - 10; var height = parseInt(w.currentStyle.height); var resizeY = offsetY > 高度 - 10; w.style.cursor = (resizeX||resizeY)?(resizeY?"S":"")+(resizeX?"E":"")+"-resize":"預設"; } var 拖曳效果； function moveCurrent() { if (!dragging || !current) return; } if (event.button == 0) {releaseCurrent();返回; } if (!startedDragging) { current.className = '拖曳目前視窗';開始拖曳=真；拖曳效果(); } 函數releaseCurrent() { if (!current) return; current.className = '目前視窗';拖曳=假；開始拖曳=假； } 函式 makeUnselectable(e) { e.unselectable=true; if (e.className == '內容') return; for (var c=e.firstChild;c;c=c.nextSibling) if (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 玻璃外觀</h1> <p>此頁使用除背景影像外沒有影像。一切都是透過HTML、CSS、一點JavaScript 和大量Internet Explorer 過濾器完成的。糟糕除Internet Explorer 之外的任何瀏覽器。 >w3future.com </a>, 2003</p> </div> </div> </div> <div class="window" id="window3" onmousedown="setCurrent(this)" onmousemove="calcResize (this)" > <div class="shadow"></div> <div class="title">藍色窗戶</div> <div class="glass"></div> <div class="border" > <div class ="content"> bbbbbbbb </div> </div> </div> <div class="window" id="window4" onmousedown="setCurrent(this)" onmousemove="calcResize(this)" > <div 類別="shadow"></div> <div class="title">Longhorn 選單</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>
