用bootstrap写一个·小说的详情页面
时间: 2023-09-12 12:09:54 浏览: 48
好的,以下是一个简单的小说详情页面的示例,使用Bootstrap编写。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小说详情页</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<div class="row">
<div class="col-md-8">
<h1 class="mb-4">小说名称</h1>
<p class="text-muted">作者:XXX | 更新时间:XXXX-XX-XX</p>
<hr>
<p class="lead">小说简介</p>
<p>这里是小说的简介内容,可以根据实际情况修改。</p>
<hr>
<h2>章节列表</h2>
<ul class="list-group mt-3">
<li class="list-group-item"><a href="#">第一章</a></li>
<li class="list-group-item"><a href="#">第二章</a></li>
<li class="list-group-item"><a href="#">第三章</a></li>
<li class="list-group-item"><a href="#">第四章</a></li>
<li class="list-group-item"><a href="#">第五章</a></li>
</ul>
</div>
<div class="col-md-4">
<img src="https://via.placeholder.com/300x400" alt="小说封面" class="img-fluid mb-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">相关推荐</h5>
<ul class="list-unstyled">
<li><a href="#">小说A</a></li>
<li><a href="#">小说B</a></li>
<li><a href="#">小说C</a></li>
<li><a href="#">小说D</a></li>
<li><a href="#">小说E</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/popper.js/2.9.3/umd/popper.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
</body>
</html>
```
你可以根据需要修改内容,例如更改小说名称、作者、更新时间、封面图片等。此外,还可以添加其他内容,例如评论区、收藏按钮等等。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.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)