常见简单的注册html网页

fly flower

已于 2023-05-30 15:52:08 修改

阅读量1.5k

点赞数

文章标签： html 前端 servlet

于 2022-09-04 22:38:34 首次发布

本文链接：https://blog.csdn.net/weixin_62925742/article/details/126695744

版权

放上龙马的素材。

相比较于一些流动布局，

在一些地方做了一定的修改，

采用margin填充的方式直接固定一些按键的位置。

总体来说整个网页还是不难的

只是简单的html+css修饰网页，可以闲暇时间敲一下提升和熟练自己的技巧。

或者对于很基础的新手也是非常合适入门的项目。

这里先放上基本的html框架作为参考。

<!DOCTYPE html>
<html>
		
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
<style type="text/css">
 @import url("css/1.css");
	
</style>		
		<div class="box">
			<h2> login</h2>
			<div  class="input-box">
				<label>账号</label>
				<input  type="text" />	
			</div>
			
			<div  class="input-box">
				<label>密码</label>
				<input  type="password"/>	
			</div>
		
		
		<div class="btn-box">
			<a href="#">忘记密码？</a>	
			
			<button>登录</button>
			<button>忘记</button>
		</div>
		
		
		
		</div>	
	</body>
</html>

可以自己试着做做，接下来是css代码

 {
    margin: 0;
    padding: 0;
}


body {
	display: flex;
	/* flex-direction: column; */
    justify-content: center;
	 align-items: center; 
	height: 100vh;	
	background: url(../img/4.jpg) no-repeat;
	background-size: cover;
}

.box{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 350px;
	height: 380px;
	border-top: 1px solid rgba(255,255,255,0.5);  
	border-left: 1px solid rgba(255,255,255,0.5);
	border-bottom: 1px solid rgba(255,255,255,0.2);
	border-right: 1px solid rgba(255,255,255,0.2); 
	backdrop-filter:blur(10px);
	background: rgba(50,50,50,0.2);
	border-radius: 10px;
	
}

 .box h2{
	 color: rgba(255,255,255,0.9);
	 margin-bottom: 30px;
 }

.box  .input-box {
	display: flex;
	flex-direction: column;
	/* justify-content: center; */
	/* align-items: start; */
	margin-bottom: 10px;
	box-sizing: border-box;
}


.box  .input-box>label{
	color: rgba(255,255,255,0.9);
	margin-bottom: 5px;
	font-size: 13px;
}
.box  .input-box>input{
	box-sizing:border-box ;
	color: rgba(255,255,255,0.9);
	margin-bottom: 5px;
	font-size: 14px;
	height: 35px;
	width: 250px;
	background:rgba(255,255,255,0.3);
	border: 1px solid rgba(255,255,255,0.5);
	border-radius: 5px;
	transition: 0.2s;
}
.box  .input-box>input:focus{
	border: 1px solid rgba(255,255,255,0.8);
	}
	
.box .btn-box{
	    width: 350px;
	 	/* display: flex; */
		/* justify-content: center; */
		/* align-items: start; */
	}
.box .btn-box a{
	font-size: 13px;
	text-decoration: none;
	color: rgba(255,255,255,0.9);
   /* transition: 0.2s; */
	 width: 150px;
     text-align:end; 
	 flex-direction: column;
	 outline: none; 
	 float: right; 
	 margin-right: 50px;
	}
.box .btn-box a:hover{
	color: rgba(255,255,255,1);
}
.box .btn-box div{
	 display: flex; 
	/* flex-direction: row; */ 
	justify-content: center;
	align-items: start;
	margin-top: 20px;
	
}
.box .btn-box  button{
   /* outline: none; */
    margin-top: 25px;
	/* margin-right: 1px; */
   /* display: block; */
    font-size: 14px;
	margin-left: 50px;
	border-radius: 5px;
	/* transition: 0.2s; */
	 float: left; 	
	
}
.box .btn-box  button:nth-of-type(1) {
    width: 120px;
    height: 35px;
    color: rgba(255,255,255,0.9);
    border: 1px solid rgba(192, 119, 91, 0.7);
    background: rgba(192, 119, 91, 0.5);
	
}
.box .btn-box  button:nth-of-type(2){
    width: 120px;
    height: 35px;
    margin-left: 10px;
    color: rgba(255,255,255,0.9);
    border: 1px solid rgba(192, 119, 91, 0.7);
    background: rgba(192, 119, 91, 0.5);
	}
.box .btn-box  button:hover{	
		border: 1px solid rgba(248,108,76,0.8);
		background: rgba(248,108,76,0.8);
		
		
	}
		
	button {
		cursor: pointer;
	}

fly flower

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
常见简单的注册html网页

html+css的简易网页制作
复制链接

扫一扫

常见简单的注册html网页

“相关推荐”对你有帮助么？