我需要一个登陆页面的前端代码
时间: 2024-02-25 16:52:24 浏览: 14
好的,以下是一个简单的登陆页面的 HTML 和 CSS 代码,你可以进行参考和修改:
```html
<!DOCTYPE html>
<html>
<head>
<title>Login Page</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #f1f1f1;
}
.login-box {
width: 300px;
height: 300px;
background-color: #fff;
border-radius: 10px;
padding: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
}
.login-box h1 {
text-align: center;
font-size: 32px;
margin-top: 0;
}
.textbox {
width: 100%;
overflow: hidden;
font-size: 20px;
padding: 8px 0;
margin: 8px 0;
border-bottom: 1px solid #ccc;
}
.textbox i {
width: 26px;
float: left;
text-align: center;
}
.textbox input {
border: none;
outline: none;
background: none;
color: #000;
font-size: 18px;
width: 80%;
float: left;
margin: 0 10px;
}
.btn {
width: 100%;
background-color: #4CAF50;
color: #fff;
border: none;
padding: 10px;
font-size: 18px;
cursor: pointer;
border-radius: 5px;
margin-top: 20px;
}
.btn:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<div class="login-box">
<h1>Login</h1>
<div class="textbox">
<i class="fa fa-user"></i>
<input type="text" placeholder="Username" name="username" required>
</div>
<div class="textbox">
<i class="fa fa-lock"></i>
<input type="password" placeholder="Password" name="password" required>
</div>
<input type="submit" class="btn" value="Sign in">
</div>
</body>
</html>
```
这个代码是一个简单的登陆页面,包含了用户名和密码输入框以及一个“Sign in”按钮。你可以根据需要进行修改和扩展。