请模仿用户注册页面,运用表单和表格相关标签制作一个有图片的学校图书馆登录及注册页面。
时间: 2024-02-15 20:06:05 浏览: 21
好的,我可以为你模仿一个带有图片的学校图书馆的登录和注册页面,下面是代码:
```
<!DOCTYPE html>
<html>
<head>
<title>学校图书馆登录及注册页面</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
font-family: Arial, sans-serif;
background-color: #f3f3f3;
}
.container {
margin: 50px auto;
max-width: 600px;
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
h1 {
text-align: center;
margin-bottom: 30px;
}
input[type="text"], input[type="password"], input[type="submit"] {
display: block;
margin: 10px 0;
width: 100%;
padding: 10px;
border-radius: 5px;
border: none;
background-color: #f9f9f9;
box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
}
input[type="submit"] {
background-color: #4CAF50;
color: #fff;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #3e8e41;
}
table {
margin: 0 auto;
border-collapse: collapse;
width: 100%;
max-width: 500px;
}
td, th {
padding: 10px;
border: 1px solid #ddd;
text-align: left;
}
th {
background-color: #f2f2f2;
}
.logo {
display: block;
margin: 0 auto;
max-width: 200px;
max-height: 200px;
}
</style>
</head>
<body>
<div class="container">
<img class="logo" src="https://via.placeholder.com/200x200" alt="学校图书馆的标志">
<h1>学校图书馆登录及注册页面</h1>
<h2>登录</h2>
<form method="post" action="">
<label for="username">用户名:</label>
<input type="text" id="username" name="username" required>
<label for="password">密码:</label>
<input type="password" id="password" name="password" required>
<input type="submit" value="登录">
</form>
<h2>注册</h2>
<form method="post" action="">
<table>
<tr>
<th>字段</th>
<th>内容</th>
</tr>
<tr>
<td><label for="r_username">用户名:</label></td>
<td><input type="text" id="r_username" name="r_username" required></td>
</tr>
<tr>
<td><label for="r_password">密码:</label></td>
<td><input type="password" id="r_password" name="r_password" required></td>
</tr>
<tr>
<td><label for="r_email">邮箱:</label></td>
<td><input type="text" id="r_email" name="r_email" required></td>
</tr>
<tr>
<td><label for="r_phone">手机号:</label></td>
<td><input type="text" id="r_phone" name="r_phone" required></td>
</tr>
</table>
<input type="submit" value="注册">
</form>
</div>
</body>
</html>
```
你可以把这段代码复制到一个文本编辑器中,保存为一个后缀为 `.html` 的文件,然后用浏览器打开这个文件,就可以看到模仿的带有图片的学校图书馆登录和注册页面了。图片使用了一个 200x200 的占位符图片,你可以替换为你自己的图片。希望能对你有所帮助!