仿Windows桌⾯（HTML5+CSS3）
emmm ⾃学HTML5的过程中做了⼀个仿Windows的界⾯⽐较粗糙 记录⼀下=-=
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>明镜⽌⽔</title>
<style type="text/css">
html,body {/*页⾯样式定制，清除边距，显⽰定义⾼度*/ padding: 0;
margin: 0;
height: 100%;
}
background:url("../images/辉夜.jpeg");
height: 100%;
font: 12px "Segoe UI", Tahoma, sans-serif;
position: relative;
position: relative;
-webkit-box-shadow: inset 0 -200px 100px #032b5c, inset -100px 100px 100px #2073b5,
inset 100px 200px 100px #1f9bb1;
overflow: hidden;
}
#startmenu {/*设置任务栏效果*/
position:absolute;
bottom: 0;
height: 40px;
width: 100%;
background: rgba(178,215,255,0.25);
-webkit-box-shadow: 0 -2px 20px rgba(0,0,0,0.25);
box-shadow: 0 -2px 20px rgba(0,0,0,0.25),
inset 0 1px #042754,
inset 0 2px #5785b0;
overflow: hidden;
}
#startmenu botton {
font-size: 1.6em;
color: #fff;
text-shadow: 1px 2px 2px #00294b;
}
#startmenu #winflag {/* 设计"开始"按钮样式/*/ float: left;
margin: 2px;
height: 34px;
width: 80px;
margin-right: 10px;
border: none;
background: #034a76;
-webkit-border-radius: 40px;
border-radius: 40px;
-webkit-box-shadow: 0 0 1px #fff,
0 0 3px #000,
0 0 3px #000;
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 {/*设计任务栏图标样式*/
position: relative;
botton: 1px;
height: 38px;
width: 52px;
background: rgba(14, 59, 103, 0325);
举宫border: 1px solid rgba(0, 0, 0, 0.8);
/*设置渐变特效*/
-webkit-transition: .3s all;
border-radius: 4px;
box-shadow: inset 0 0 1px #fff,
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);
}
#startmenu .application:hover { background-color: rgba(255, 255, 255, 0.25);} /*设计窗⼝外框效果*/
.window {
/
position: absolute;
left: 150px;
top: 75px;
width: 400px;
height: 400px;
padding: 7px;
border: 1px solid rgba(255, 255, 255, 0.6);
background: rgba(178, 215, 255, 0.75);
/*设计窗体外框圆⾓显⽰*/
-
webkit-border-radius: 8px;
border-radius: 8px;
/*设计窗体外框的外阴影特效*/
w3c-webkit-box-shadow: 0 2px 16px #000,
0 0 1px #000,
0 0 1px #000;
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;
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; }
/*设计窗⼝内⽂本区域样式*/
.t {
padding: 10px;
height: 279px;
势力范围
background: #fff;
border: 1px solid #000;
/*设计⽂本区域圆⾓显⽰*/
-webkit-border-radius: 2px;
border-radius: 2px;
汇编语言border-radius: 2px;
/*设计⽂本区域的内外阴影特效*/
-webkit-box-shadow: 0 0 5px #fff,
0 0 1px #fff;
box-shadow: 0 0 5px #fff,
0 0 1px #fff,
inset 0 1px 2px #aaa;
text-shadow: none;/*取消⽂本阴影*/
}
</style>
</head>
<body>
<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">图⽚1</button>/*懒得弄图了随意添加*/
<button class="application">图⽚2</button>
<button class="application">图⽚3</button>
<button class="application">图⽚4</button>
</span>
</div>
</div>
</body>
</html>
枣汁
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议