HTML写一个图书管理系统界面
时间: 2023-09-28 10:05:23 浏览: 112
以下是一个简单的图书管理系统界面的HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>图书管理系统</title>
<meta charset="utf-8">
<style>
body {
font-family: Arial, sans-serif;
}
h1 {
text-align: center;
margin-top: 50px;
}
form {
width: 50%;
margin: 50px auto;
padding: 20px;
border: 2px solid #ccc;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
label {
display: block;
margin-bottom: 10px;
font-size: 16px;
font-weight: bold;
}
input[type="text"], input[type="number"] {
width: 100%;
padding: 10px;
font-size: 16px;
border-radius: 5px;
border: 1px solid #ccc;
box-sizing: border-box;
margin-bottom: 20px;
}
input[type="submit"] {
background-color: #4CAF50;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #3e8e41;
}
table {
width: 80%;
margin: 50px auto;
border-collapse: collapse;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
th, td {
padding: 10px;
text-align: center;
border: 1px solid #ccc;
}
th {
background-color: #4CAF50;
color: #fff;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<h1>图书管理系统</h1>
<form>
<label for="book_title">书名:</label>
<input type="text" id="book_title" name="book_title" required>
<label for="book_author">作者:</label>
<input type="text" id="book_author" name="book_author" required>
<label for="book_publisher">出版社:</label>
<input type="text" id="book_publisher" name="book_publisher" required>
<label for="book_publish_date">出版日期:</label>
<input type="text" id="book_publish_date" name="book_publish_date" required>
<label for="book_price">价格:</label>
<input type="number" id="book_price" name="book_price" min="0" step="0.01" required>
<input type="submit" value="添加">
</form>
<table>
<tr>
<th>书名</th>
<th>作者</th>
<th>出版社</th>
<th>出版日期</th>
<th>价格</th>
</tr>
<tr>
<td>Java编程思想</td>
<td>Bruce Eckel</td>
<td>机械工业出版社</td>
<td>2018-01-01</td>
<td>99.00</td>
</tr>
<tr>
<td>Head First设计模式</td>
<td>Eric Freeman, Elisabeth Robson</td>
<td>中国电力出版社</td>
<td>2015-05-01</td>
<td>69.00</td>
</tr>
<tr>
<td>JavaScript高级程序设计</td>
<td>Nicholas C. Zakas</td>
<td>人民邮电出版社</td>
<td>2013-05-01</td>
<td>79.00</td>
</tr>
</table>
</body>
</html>
```
以上代码包含一个表单用于添加新书籍,以及一个表格用于显示已有书籍的信息。你可以根据需要进行修改和扩展。
阅读全文