中文(简体)
<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 过滤器完成的。</p> <p>是的，它很慢，但很漂亮，不是吗？</p> <p>看起来很糟糕除 Internet Explorer 之外的任何浏览器。</p> <p> </p> <palign="right">Sjoerd Visscher，<a href="http://w3future.com/weblog/">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>
