仿Windows桌面(HTML5+CSS3)

emmm 自学HTML5的过程中做了一个仿Windows的界面比较粗糙 记录一下=-=


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/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%;
}
#desktop {/*定制桌面背景效果*/
background:url("../images/辉夜.jpeg");
height: 100%;
font: 12px "Segoe UI", Tahoma, sans-serif;
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,
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;
/*设计窗体外框的外阴影特效*/
-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; }
/*设计窗口内文本区域样式*/
.window.content {
padding: 10px;
height: 279px;
background: #fff;
border: 1px solid #000;
/*设计文本区域圆角显示*/
-webkit-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>

阅读更多
想对作者说点什么? 我来说一句

HTML5高仿Win8桌面

2016年01月24日 42KB 下载

基于html5的仿webqq

2015年04月25日 5.25MB 下载

仿mac桌面html模板

2017年08月30日 2.28MB 下载

仿桌面的web模板

2015年02月09日 1.14MB 下载

css+html5仿win8

2014年03月11日 2.96MB 下载

HTML5仿WIN10界面插件Melon5

2018年04月17日 4.54MB 下载

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭