给我一个web前端的登录界面代码
时间: 2023-02-21 22:02:53 浏览: 74
下面是一份简单的 HTML 和 CSS 登录界面代码示例:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登录界面</title>
<style>
.login-form {
width: 500px;
margin: auto;
text-align: center;
padding: 20px;
border: 1px solid #ddd;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
}
input[type="text"],
input[type="password"] {
width: 100%;
padding: 10px;
margin-bottom: 20px;
box-sizing: border-box;
border-radius: 5px;
border: 1px solid #ddd;
}
input[type="submit"] {
width: 100%;
padding: 10px;
background-color: #4caf50;
color: #fff;
border-radius: 5px;
border: none;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #3e8e41;
}
</style>
</head>
<body>
<div class="login-form">
<form>
<h2>登录</h2>
<input type="text" placeholder="用户名">
<input type="password" placeholder="密码">
<input type="submit" value="登录">
</form>
</div>
</body>
</html>
```
这仅仅是一个简单的示例,在实际项目中,登录界面还需要通过 JavaScript 和后端 API 进行数据交互。