目前来说，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);
}四、效果图展示
以上就是本篇内容，喜欢的友友可以参考一下！
