简单好看的登录页面html+css

悠闲的咸鱼小白

于 2024-08-01 12:02:26 发布

阅读量720

点赞数 16

文章标签： html5 css3

本文链接：https://blog.csdn.net/2301_76942182/article/details/140843568

版权

目前来说，html作为常用的前端语言，使用人群的基数是很大的。做好一个前端的页面，登录页面是不可少的。

一般来说，登录页面包含账号和密码，但是你也可以在这个页面增加自己想要的，比如验证码等。本篇就是利用html和css来做一个简单的登录页面。

一、先建一个html文件

html文件可以在sublimeText，vscode等编译器创建，这一步很简单：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>登录页面</title>
</head>
<body>
	
</body>
</html>

二、制作整体的结构框架

<body>
	<div class="box">
	<h2>Login</h2>
	<div class="in-box">
	<label>账号</label>
	<input type="text" name="">
	</div>

	<div class="in-box">
	<label>密码</label>
	<input type="password" name="">
	</div>

	<div class="btn-box">
	<a href="#">忘记密码</a>
	<div>
	<button>登录</button>
	<button>注册</button>
	</div>
	</div>
	</div>
</body>
</html>

<body>元素包含了页面的主要内容，包括用户看到的所有可见元素。在这里：

<div class="box">定义了一个具有类名为“box”的div容器，用于包裹整个登录框。
<h2>Login</h2>显示了一个标题“Login”。
<div class="in-box">和<div class="btn-box">分别定义了两个具有类名为“in-box”和“btn-box”的div容器，用于包裹输入框和按钮。
<label>账号</label>和<label>密码</label>是用来显示标签的元素，“账号”和“密码”是这些标签的文本内容。
<input type="text" name="">和<input type="password" name="">是用来接收用户输入的文本框，分别用于输入账号和密码。type="text"表示文本输入框，type="password"表示密码输入框。
<a href="#">忘记密码</a>是一个超链接，点击后可以跳转到一个页面（这里由于href="#"，实际上并不会跳转到新页面），显示的文本是“忘记密码”。
<button>登录</button>和<button>注册</button>是两个按钮，用户可以点击进行登录或注册操作。

三、使用css进行修饰

利用css代码，我们可以让这个页面变得美观，更有吸引力一些，大家可以根据自己的喜好进行更改。

css代码如下：

*{
	margin: 0;
	padding: 0;
}

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

.box{
	border-radius: 20px;
	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);
	background: rgba(255,255,255,0.3);
}
.box .in-box{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: start;
	margin-bottom: 10px;
}

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

.box .in-box > label{
	margin-bottom: 13px;
	color: rgba(255,255,255,0.9);
	font-size: 13px;
}

.box .in-box > input{
	box-sizing: border-box;
	background: rgba(255,255,255,0.3);
	color: rgba(255,255,255,0.9);
	font-size: 14px;
	height: 35px;
	width: 250px;
	border: 1px solid rgba(255,255,255,0.5);
	border-radius: 5px;
	transition: 0.2s;
	outline: none;
	padding: 0 10px;
	letter-spacing: 1px;
}

.box .in-box > input:focus{
	border: 1px solid rgba(255,255,255,0.8);
}

.box .btn-box{
	width: 250px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: start;
}
.box .btn-box > a{
	color: rgba(255,255,255,0.9);
	text-decoration: none;
	transition: 0.2s;
	font-size: 14px;
	width: 250px;
	text-align: end; 
}
.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 > div > button{
	width: 120px;
	height: 35px;
	border: 1px solid rgba(197,81,58,0.8);
	background: rgba(197,81,58,0.5);
	color: rgba(255,255,255,0.9);
	border-radius: 5px;
	transition: 0.2s;
}
.box .btn-box > div > button{
	margin-left: 10px;
}
.box .btn-box > div > button:hover{
	
	border: 1px solid rgba(248,108,76,0.8);
	background: rgba(248,108,76,0.5);
	
}

四、效果图展示

以上就是本篇内容，喜欢的友友可以参考一下！

悠闲的咸鱼小白

关注

16
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
简单好看的登录页面html+css

目前来说，html作为常用的前端语言，使用人群的基数是很大的。做好一个前端的页面，登录页面是不可少的。一般来说，登录页面包含账号和密码，但是你也可以在这个页面增加自己想要的，比如验证码等。本篇就是利用html和css来做一个简单的登录页面。
复制链接

扫一扫