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%;
}