图书馆信息列表中有4本不同名称的编程书,筛选书籍并展示信息html
时间: 2024-09-14 16:08:38 浏览: 46
当然可以,为了在HTML中展示图书馆的信息列表,我们可以创建一个简单的表格结构。假设书籍信息包含书名、作者和出版年份,这是一个示例:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>图书馆书籍信息</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
text-align: left;
padding: 8px;
border-bottom: 1px solid #ddd;
}
tr:hover {background-color: #f5f5f5;}
</style>
</head>
<body>
<h2>图书馆书籍信息</h2>
<table>
<thead>
<tr>
<th>书名</th>
<th>作者</th>
<th>出版年份</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="#book1">《Python编程入门》</a></td>
<td>John Doe</td>
<td>2020</td>
</tr>
<tr>
<td><a href="#book2">《JavaScript高级程序设计》</a></td>
<td>Jane Smith</td>
<td>2018</td>
</tr>
<tr>
<td><a href="#book3">《C++编程实战》</a></td>
<td>Bob Johnson</td>
<td>2016</td>
</tr>
<tr>
<td><a href="#book4">《Java核心技术》</a></td>
<td>Charlie Lee</td>
<td>2021</td>
</tr>
</tbody>
</table>
<!-- 使用锚点链接跳转到每个书籍详情 -->
<div id="book1" style="display: none;">...详细信息1...</div>
<div id="book2" style="display: none;">...详细信息2...</div>
<div id="book3" style="display: none;">...详细信息3...</div>
<div id="book4" style="display: none;">...详细信息4...</div>
</body>
</html>
```
在这个例子中,每一行代表一本书,点击书名会跳转到对应的书籍详情区域,目前的页面只展示了标题。实际应用中,你需要为每个`<div>`标签添加详细的书籍信息。
阅读全文