首页 美食营养 游戏数码 手工爱好 生活家居 健康养生 运动户外 职场理财 情感交际 母婴教育 时尚美容

css3 windows界面

2025-10-29 08:34:27

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; margin:-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

声明：本网站引用、摘录或转载内容仅供网站访问者交流或参考，不代表本站立场，如存在版权或非法内容，请联系站长删除，联系邮箱：site.kefu@qq.com。
相关推荐
  • CSS3中的布局（多列）
    阅读量：128
  • CSS3 的文本阴影
    阅读量：45
  • CSS3中的拖拽与外轮廓
    阅读量：170
  • css3 径向渐变事例分享
    阅读量：165
  • jQuery+css3拆红包抽奖
    阅读量：99
    • 猜你喜欢
    猜你喜欢
    © 2025 指南生活
    粤ICP备2022083104号