请以图书馆背景图片写一个图书管理系统,包括图书的添加,修改,删除,查询的html页面
时间: 2024-04-08 14:30:14 浏览: 9
以下是一个简单的图书管理系统的HTML页面示例,包括图书的添加、修改、删除和查询功能:
```html
<!DOCTYPE html>
<html>
<head>
<title>图书管理系统</title>
<style>
body {
font-family: Arial, sans-serif;
}
h1 {
text-align: center;
}
form {
max-width: 500px;
margin: 0 auto;
padding: 20px;
background-color: #f5f5f5;
border: 1px solid #ddd;
border-radius: 4px;
}
input[type="text"], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type="submit"] {
width: 100%;
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
</style>
</head>
<body>
<h1>图书管理系统</h1>
<!-- 添加图书表单 -->
<form action="/add_book" method="post">
<h2>添加图书</h2>
<label for="title">标题:</label>
<input type="text" id="title" name="title" placeholder="请输入图书标题" required>
<label for="author">作者:</label>
<input type="text" id="author" name="author" placeholder="请输入图书作者" required>
<label for="isbn">ISBN:</label>
<input type="text" id="isbn" name="isbn" placeholder="请输入图书ISBN" required>
<input type="submit" value="添加图书">
</form>
<!-- 修改图书表单 -->
<form action="/update_book" method="post">
<h2>修改图书</h2>
<label for="update_id">图书ID:</label>
<input type="text" id="update_id" name="update_id" placeholder="请输入要修改的图书ID" required>
<label for="new_title">新标题:</label>
<input type="text" id="new_title" name="new_title" placeholder="请输入新的图书标题">
<label for="new_author">新作者:</label>
<input type="text" id="new_author" name="new_author" placeholder="请输入新的图书作者">
<label for="new_isbn">新ISBN:</label>
<input type="text" id="new_isbn" name="new_isbn" placeholder="请输入新的图书ISBN">
<input type="submit" value="修改图书">
</form>
<!-- 删除图书表单 -->
<form action="/delete_book" method="post">
<h2>删除图书</h2>
<label for="delete_id">图书ID:</label>
<input type="text" id="delete_id" name="delete_id" placeholder="请输入要删除的图书ID" required>
<input type="submit" value="删除图书">
</form>
<!-- 查询图书表单 -->
<form action="/search_book" method="get">
<h2>查询图书</h2>
<label for="search_title">标题关键字:</label>
<input type="text" id="search_title" name="search_title" placeholder="请输入图书标题关键字">
<input type="submit" value="查询图书">
</form>
<!-- 图书列表 -->
<h2>图书列表</h2>
<table>
<tr>
<th>ID</th>
<th>标题</th>
<th>作者</th>
<th>ISBN</th>
</tr>
<!-- 这里使用服务器端模板引擎来动态生成图书列表 -->
{% for book in books %}
<tr>
<td>{{ book.id }}</td>
<td>{{ book.title }}</td>
<td>{{ book.author }}</td>
<td>{{ book.isbn }}</td>
</tr>
{% endfor %}
</table>
</body>
</html>
```
请注意,这只是一个简单的HTML页面示例,其中的表单动作(action)和字段名称(name)需要根据实际的后端代码进行调整。同时,图书的添加、修改、删除和查询功能需要后端的服务器端代码来处理。这里的代码仅展示了前端页面的布局和基本表单元素,并使用了一个简单的模板引擎标记来动态生成图书列表。实际的后端代码需要根据具体的编程语言和框架来编写。