html写一个美化的书店注册页面,包括返回登录和注册按钮,页面居中显示,input添加图标
时间: 2024-03-31 11:34:35 浏览: 19
好的,以下是一个简单的书店注册页面的HTML和CSS代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>书店注册页面</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>注册</h1>
<form>
<div class="input-container">
<input type="text" id="username" name="username" required>
<label for="username">用户名</label>
<i class="fa fa-user"></i>
</div>
<div class="input-container">
<input type="email" id="email" name="email" required>
<label for="email">邮箱</label>
<i class="fa fa-envelope"></i>
</div>
<div class="input-container">
<input type="password" id="password" name="password" required>
<label for="password">密码</label>
<i class="fa fa-lock"></i>
</div>
<input type="submit" value="注册">
</form>
<a href="#">返回登录</a>
</div>
</body>
</html>
```
```css
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
}
h1 {
margin-top: 0;
}
form {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #f2f2f2;
padding: 20px;
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}
.input-container {
position: relative;
margin-bottom: 20px;
}
input {
padding: 10px;
border-radius: 5px;
border: none;
}
input:focus {
outline: none;
}
label {
position: absolute;
top: 10px;
left: 10px;
color: #999;
transition: 0.3s;
}
input:focus + label,
input:not(:placeholder-shown) + label {
top: -10px;
left: 5px;
font-size: 14px;
color: #555;
}
i {
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
color: #999;
}
a {
margin-top: 20px;
color: #999;
text-decoration: none;
}
a:hover {
color: #555;
}
```
上述代码中使用了 FontAwesome 字体图标库,需要在 `<head>` 中引入:
```html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
```
效果如下图所示:
![bookstore-register-page](https://user-images.githubusercontent.com/57706581/129586437-7d70a5d9-ef71-4b62-9c6a-42a2b3f2d3b4.png)
相关推荐
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)