1、#body#<div id="main"> <!--<h1>CSS3 windows界面布局</h1>--> <div id="body" class="light"> <div id="content" class="show"> <div class="demo"> <!--desktop是Windows界面设计的主题部分，包括有色界面的全部部分--> <div id="desktop"> <div id="bgWindow" class="window secondary"> <span>对话框</span> <div class="content"></div> </div> <div id="frontWindow" class="window"> <span>用户反馈</span> <div id="winInput"><input type="text" value="姓名"><input type="text" value="联系方式"></div> <div id="winContent" class="content">请输入你的反馈意见......</div> </div> <div id="startmenu"> <button id="winflag">开始</button> <span id="toolBtn"> <button class="application">☁</button> <button class="application">✱</button> <button class="application">☀</button> <button class="application">☯</button> </span> </div> </div> </div> </div> </div></div><div id="floatBox"> <div class="corner"></div> <div id="floatCon" class="float_con"> </div></div></body>
2、#css#<style type="text/css">.article{width:1000px; mar爿讥旌护gin:-32px auto 0; text-align:right;}.demo{width:1000px; margin:0 auto; position:relative; }#operate{width:190px; position:absolute; left:0; top:30px;}#operate p{margin:6px 0; position:relative;}#operate p a{position:absolute; right:0; top:2px;}#floatBox{width:400px; position:absolute; left:-1200px; top:-1110px; background:#beceeb; border:1px solid #a0b3d6; padding:5px; -webkit-box-shadow: 2px 2px 6px rgba(0,0,0,0.25); -moz-box-shadow: 2px 2px 6px rgba(0,0,0,0.25); box-shadow: 2px 2px 6px rgba(0,0,0,0.25);}#floatBox .corner{height:0; overflow:hidden; border-width:10px 12px; border-color:transparent #beceeb transparent transparent; border-style:dotted solid dotted dotted; position:absolute; top:15px; left:-24px;}.float_con{padding:10px; background:white; -webkit-border-radius:2px; -webkit-box-shadow:0 0 5px #fff, 0 0 1px #fff; -moz-border-radius:2px; -moz-box-shadow: 0 0 5px #fff, 0 0 1px #fff, inset 0 1px 2px #aaa; border-radius:2px; box-shadow: 0 0 5px #fff, 0 0 1px #fff, inset 0 1px 2px #aaa; font-family:Tahoma;}/*css3 desktop*/#desktop > * { display: inline-block;}#desktop,#bgWindow,#frontWindow,#winInput,#winContent,#startmenu,#winflag,#toolBtn{visibility:visible;}#desktop { -moz-box-shadow: inset 0 -200px 100px #032b5c, inset -100px 100px 100px #2073b5, inset 100px 200px 100px #1f9bb1; -webkit-box-shadow: inset 0 -200px 100px #032b5c, inset -100px 100px 100px #2073b5, inset 100px 200px 100px #1f9bb1; background: #2c609b; width: 1000px; height: 600px; margin: 0px 0px 0px 0px; font: 12px "Segoe UI", Tahoma,sans-serif; position: relative; box-shadow: inset 0 -200px 100px #032b5c, inset -100px 100px 100px #2073b5, inset 100px 200px 100px #1f9bb1; overflow: hidden;}#startmenu { -webkit-box-shadow: 0 -2px 20px rgba(0,0,0,0.25); -moz-box-shadow: 0 -2px 20px rgba(0,0,0,0.25), inset 0 1px #042754, inset 0 2px #5785b0; position: absolute; bottom: 0; height: 40px; width: 100%; background: rgba(178,215,255,0.25); box-shadow: 0 -2px 20px rgba(0,0,0,0.25), inset 0 1px #042754, inset 0 2px #5785b0; overflow: hidden;}#startmenu button { font-size: 1.6em; color: #fff; text-shadow: 1px 2px 2px #00294b;}#startmenu #winflag { -webkit-border-radius: 40px; -webkit-box-shadow: 0 0 1px #fff, 0 0 3px #000, 0 0 3px #000; -moz-border-radius: 40px; -moz-box-shadow: 0 0 1px #fff, 0 0 3px #000, 0 0 3px #000, inset 0 1px #fff, inset 0 12px rgba(255,255,255,0.15), inset 0 4px 10px #cef, inset 0 22px 5px #0773b4, inset 0 -5px 10px #0df; float: left; margin: 2px; height: 34px; width: 80px; margin-right: 10px; border-radius: 40px; border: none; background: #034a76; box-shadow: 0 0 1px #fff, 0 0 3px #000, 0 0 3px #000, inset 0 1px #fff, inset 0 12px rgba(255,255,255,0.15), inset 0 4px 10px #cef, inset 0 22px 5px #0773b4, inset 0 -5px 10px #0df;}#startmenu .application { -o-transition: .3s all; -webkit-border-radius: 4px; -webkit-transition: .3s all; -moz-border-radius: 4px; -moz-box-shadow: inset 0 0 1px #fff, inset 4px 4px 20px rgba(255,255,255,0.33), inset -2px -2px 10px rgba(255,255,255,0.25); -moz-transition: .3s all; height: 38px; width: 52px; border: 1px solid rgba(0,0,0,0.8); border-radius: 4px; background: rgba(14,59,103,0.25); box-shadow: inset 0 0 1px #fff, inset 4px 4px 20px rgba(255,255,255,0.33), inset -2px -2px 10px rgba(255,255,255,0.25); position: relative; bottom: 1px;}#startmenu .application:hover { background-color: rgba(255,255,255,0.25);}.window { -webkit-border-radius: 8px; -webkit-box-shadow: 0 2px 16px #000, 0 0 1px #000, 0 0 1px #000; -moz-border-radius: 8px; -moz-box-shadow: 0 2px 16px #000, 0 0 1px #000, 0 0 1px #000; position: absolute; left: 150px; top: 75px; width: 400px; padding: 7px; height: 400px; border: 1px solid rgba(255,255,255,0.6); background: rgba(178,215,255,0.75); border-radius: 8px; box-shadow: 0 2px 16px #000, 0 0 1px #000, 0 0 1px #000; text-shadow: 0 0 15px #fff, 0 0 15px #fff;}.window span { display: block;}.window input { -webkit-border-radius: 2px; -webkit-box-shadow: 0 0 2px #fff, 0 0 1px #fff; -moz-border-radius: 2px; -moz-box-shadow: 0 0 2px #fff, 0 0 1px #fff, inset 0 0 3px #fff; font-size: 1em; display: inline-block; margin: 50px 0 10px 0; border: 1px solid rgba(0,0,0,0.5); padding: 4px 8px; border-radius: 2px; background: rgba(255,255,255,0.75); width: 44%; box-shadow: 0 0 2px #fff, 0 0 1px #fff, inset 0 0 3px #fff}.window input + input { margin-left: 12px;}.window.secondary { left: 300px; top: 125px; opacity: 0.66;}.window.secondary span {margin-bottom: 85px;}.window .content { -webkit-border-radius: 2px; -webkit-box-shadow: 0 0 5px #fff, 0 0 1px #fff; -moz-border-radius: 2px; -moz-box-shadow: 0 0 5px #fff, 0 0 1px #fff, inset 0 1px 2px #aaa; background: #fff; border: 1px solid #000; border-radius: 2px; padding: 10px; height: 279px; box-shadow: 0 0 5px #fff, 0 0 1px #fff, inset 0 1px 2px #aaa; text-shadow: none;}</style>
3、#javascript#<script type="text/javascript">var fn = { show: function(id){ return document.getElementById(id).style.visibility = "hidden"; }, hide: function(id){ return document.getElementById(id).style.visibility = "visible"; }};var obj = { oChecks: document.getElementById("operate").getElementsByTagName("input"), oAcodes: document.getElementById("operate").getElementsByTagName("a"), oFloat: document.getElementById("floatBox"), oFloatCode: document.getElementById("floatCon"), params: { a: "box-shadow: inset 0 -200px 100px #032b5c, inset -100px 100px 100px #2073b5, inset 100px 200px 100px #1f9bb1;", b: "border-radius: 8px; box-shadow: 0 2px 16px #000, 0 0 1px #000, 0 0 1px #000; text-shadow: 0 0 15px #fff, 0 0 15px #fff;", c: "border-radius: 8px; box-shadow: 0 2px 16px #000, 0 0 1px #000, 0 0 1px #000; text-shadow: 0 0 15px #fff, 0 0 15px #fff;", d: "border-radius: 2px; background: rgba(255,255,255,0.75); box-shadow: 0 0 2px #fff, 0 0 1px #fff, inset 0 0 3px #fff", e: "border-radius: 2px; box-shadow: 0 0 5px #fff, 0 0 1px #fff, inset 0 1px 2px #aaa;", f: "box-shadow: 0 -2px 20px rgba(0,0,0,0.25), inset 0 1px #042754, inset 0 2px #5785b0;", g: "box-shadow: 0 0 1px #fff, 0 0 3px #000, 0 0 3px #000, inset 0 1px #fff, inset 0 12px rgba(255,255,255,0.15), inset 0 4px 10px #cef, inset 0 22px 5px #0773b4, inset 0 -5px 10px #0df;", h: "box-shadow: inset 0 0 1px #fff, inset 4px 4px 20px rgba(255,255,255,0.33), inset -2px -2px 10px rgba(255,255,255,0.25);", flag: "" }};var l = obj.oChecks.length;for(var i=0; i<l; i+=1){ obj.oChecks[i].onclick = function(){ var id = this.value; if(this.checked === true){ fn.hide(id); }else{ fn.show(id); } }; obj.oAcodes[i].onclick = function(e){ if(!e){ e = window.event; } var s = this.rel; var sh = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0; if(this.name === "true"){ obj.oFloat.style.left = e.clientX + 30 + "px"; obj.oFloat.style.top = e.clientY + sh - 25 + "px"; obj.oFloatCode.innerHTML = obj.params[s]; this.name = "false"; }else{ if(s === obj.params.flag){ obj.oFloat.style.left ="-2000px"; obj.oFloat.style.top = "-2000px"; this.name = "true"; }else{ obj.oFloat.style.left = e.clientX + 30 + "px"; obj.oFloat.style.top = e.clientY + sh - 26 + "px"; obj.oFloatCode.innerHTML = obj.params[s]; this.name = "false"; } } obj.params.flag = s; return false; };}</script>源码：http://pan.baidu.com/s/1miQvVV6