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>