html写一个美化的书店登录页面,包括登录和注册按钮,页面居中显示,input添加图标
时间: 2024-03-25 10:35:50 浏览: 17
好的,以下是一个简单的HTML代码,实现了您要求的功能,使用了Bootstrap和Font Awesome库来实现样式和图标:
```html
<!DOCTYPE html>
<html>
<head>
<title>书店登录</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<style>
body {
background-color: #f8f9fa;
}
.card {
margin-top: 100px;
}
.icon {
margin-right: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-6">
<div class="card">
<div class="card-body">
<h2 class="text-center mb-4">书店登录</h2>
<form>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fa fa-user icon"></i></span>
</div>
<input type="text" class="form-control" placeholder="用户名">
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fa fa-lock icon"></i></span>
</div>
<input type="password" class="form-control" placeholder="密码">
</div>
</div>
<button type="submit" class="btn btn-primary btn-block">登录</button>
<p class="text-center mt-3">还没有账号?<a href="#">点击这里注册</a></p>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
```
这个代码会创建一个居中显示的登录页面,有一个基本的表单,包括用户名和密码输入框,以及登录和注册按钮。输入框中使用了Font Awesome图标库中的用户和锁图标。