1.其實登陸頁面屬於非常基本的頁面，但是需要注意如何居中，如何讓登陸框在調整頁面大小使不跑偏和背景圖在拉伸窗口時沒有明顯變化，建議背景採用純色活着漸變色背景降低跑偏帶來的影響。html部分我採用了div居中，再套一個table控制格式的方法，其中要注意所有的表單和按鈕在實際使用時需要替換成asp控件
背景圖可自己更換，注意定位方法，在佈局方面，想要不被圖片擠下去，需要將主div的 position屬性改爲 relative;
position屬性參考文章：http://www.w3school.com.cn/cssref/pr_class_position.asp
2.在登陸框內如果直接在登陸框中使用blur屬性會導致窗體內的文字一起虛化，所以需要添加僞類並將登陸框調整z-index：1
毛玻璃css
.content{
margin-top: 30px;
/*background-color: #ccc;*/
height: 400px;
z-index: 1;
position: relative;
padding: 1em;
max-width: 30em;
border-radius: 30px;
box-shadow: 0 0 0 1px hsla(0,0%,100%,.3) inset,0 .5em 1em rgba(0, 0, 0, 0.6);
overflow: hidden;
}
.content::before{
content: '';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
z-index: -1;
-webkit-filter: blur(20px);
filter: blur(20px);
background: rgba(238 ,130 ,238,.5);
}
附上完整代碼：
<!DOCTYPE html>
<html>
<head>
<title>登陸</title>
<script type="text/javascript">document.write('<link rel="stylesheet" type="text/css" href="css/login.css?timestamp='+new Date().getTime()+'" >');</script>
<script type="text/javascript">document.write('<link rel="stylesheet" type="text/css" href="css/style.css?timestamp='+new Date().getTime()+'" >');</script>
</head>
<body>
<img class="backImg" src="img/timg.jpg">
<div class="main">
<div style="height: 100px;">
</div>
<div class="title">
<h1 ><span style="font-color:white">登陸圖書館綜合管理系統</span></h1>
</div>
<div class="content">
<table class="menu">
<tr style="height: 50px;">
</tr>
<tr style="height: 50px;">
<td>
用戶名：
</td>
<td>
<input type="text" name="">
</td>
</tr>
<tr style="height: 50px;">
<td>
密碼：
</td>
<td>
<input type="text" name="">
</td>
</tr>
<tr style="height: 30px;">
<td>
</td>
<td>
<img src="">
</td>
</tr>
<tr style="height: 50px;">
<td>
驗證碼：
</td>
<td>
<input type="text" name="">
</td>
</tr>
</table>
<button type="submit">
註冊
</button>
<button type="submit">
登陸
</button>
</div>
</div>
</body>
</html>
css：
.main{
width: 400px;
height: 700px;
text-align: center;
border-radius: 30px;
margin: 0px auto;
position: relative;
}
h1{
color: white;
}
.content{
margin-top: 30px;
/*background-color: #ccc;*/
height: 400px;
z-index: 1;
position: relative;
padding: 1em;
max-width: 30em;
border-radius: 30px;
box-shadow: 0 0 0 1px hsla(0,0%,100%,.3) inset,0 .5em 1em rgba(0, 0, 0, 0.6);
overflow: hidden;
}
.content::before{
content: '';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
z-index: -1;
-webkit-filter: blur(20px);
filter: blur(20px);
background: rgba(238 ,130 ,238,.5);
}
.menu{
width:350px;
margin: 0 auto;
height: 300px;
}
.memu tr{
height: 50px;
}
.backImg{
position: fixed;
width: 100%;
}