从头做图书馆管理系统课设，登陆布局+登陆框毛玻璃效果，持续更新~（前端篇2）

 

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

附上完整代码：

	
	
	



	
	

		

			
		
		

			
登陆图书馆综合管理系统
		
		

			

				

					
				
				

					

						用户名：
					
					

						
					
				
					
				

					

						密码：
					
					

						
					
				
				

					

						
					
					

						
					
				
				

					

						验证码：
					
					

						
					
				
			
			
				注册
			
			
				登陆
			
			
		
	

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

链接 

1. 从头做一个基于B/S的 ASP.NET图书馆管理系统课设，持续更新~（开篇）
2. 从头做图书馆管理系统课设，css3轮播图，导航栏，持续更新~（前端篇1）
3. 从头做图书馆管理系统课设，登陆布局+登陆框毛玻璃效果，持续更新~（前端篇2）

4. 从头做图书馆管理系统课设，开发思想+Asp.NET 三层架构~（后端篇1）