前端登录页面代码
<!DOCTYPE html>
<html>
<head>
<title>Login Page</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="login-box">
<h2>Login</h2>
<form>
<div class="user-box">
<input type="text" name="username" required="">
<label>Username</label>
</div>
<div class="user-box">
<input type="password" name="password" required="">
<label>Password</label>
</div>
<a href="#">
<span></span>
<span></span>
<span></span>
<span></span>
<input type="submit" value="Login">
</a>
</form>
</div>
</body>
</html>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
body{
background: #f1f1f1;
}
.login-box{
width: 320px;
height: 420px;
background: #fff;
color: #000;
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%,-50%);
box-shadow: 0 5px 15px rgba(0,0,0,.3);
padding: 70px 30px;
}
h2{
margin: 0;
padding: 0 0 20px;
text-align: center;
font-size: 22px;
}
.login-box p{
margin: 0;
padding: 0;
font-weight: bold;
}
.login-box input{
width: 100%;
margin-bottom: 20px;
}
.login-box input[type="text"], input[type="password"]
{
border: none;
border-bottom: 1px solid #000;
background: transparent;
outline: none;
height: 40px;
color: #000;
font-size: 16px;
}
.login-box input[type="submit"]
{
border: none;
outline: none;
height: 40px;
background: #000;
color: #fff;
font-size: 18px;
border-radius: 20px;
}
.login-box input[type="submit"]:hover
{
cursor: pointer;
background: #ffc107;
color: #000;
}
.login-box a{
text-decoration: none;
font-size: 14px;
line-height: 20px;
color: darkgrey;
display: block;
}
.login-box a:hover
{
color: #ffc107;
}
.login-box span{
position: absolute;
display: block;
background: #000;
height: 1px;
width: 0;
transition: all .5s;
}
.login-box span:nth-child(1)
{
top: 0;
left: 0;
width: 100%;
}
.login-box span:nth-child(2)
{
top: 0;
right: 0;
height: 100%;
width: 1px;
}
.login-box span:nth-child(3)
{
bottom: 0;
left: 0;
width: 100%;
}
.login-box span:nth-child(4)
{
bottom: 0;
right: 0;
height: 100%;
width: 1px;
}
.login-box:hover span{
width: 100%;
}
</style>
这是一个基本的前端登录页面代码，包括HTML和CSS部分。其中，HTML部分包括一个登录框，包括用户名和密码输入框以及登录按钮。CSS部分则定义了登录框的样式，包括背景颜色、字体、边框、阴影、输入框样式等。需要注意的是，这只是一个基本的登录页面代码，实际应用中还需要与后端进行交互，验证用户输入的用户名和密码是否正确。
