小说书架html
时间: 2023-07-05 22:25:05 浏览: 72
以下是一个简单的小说书架的HTML代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>小说书架</title>
<style type="text/css">
.bookshelf {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
margin: 50px;
}
.book {
width: 150px;
height: 200px;
margin: 10px;
border: 1px solid black;
border-radius: 5px;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
background-color: #f2f2f2;
text-align: center;
padding: 10px;
transition: all 0.3s ease-in-out;
}
.book:hover {
transform: scale(1.1);
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
cursor: pointer;
}
.book img {
max-width: 100%;
max-height: 150px;
margin-bottom: 10px;
}
.book h3 {
font-size: 16px;
margin-bottom: 5px;
}
.book p {
font-size: 12px;
color: gray;
margin-bottom: 5px;
}
</style>
</head>
<body>
<h1>小说书架</h1>
<div class="bookshelf">
<div class="book">
<img src="novel1.jpg">
<h3>小说标题1</h3>
<p>作者姓名</p>
</div>
<div class="book">
<img src="novel2.jpg">
<h3>小说标题2</h3>
<p>作者姓名</p>
</div>
<div class="book">
<img src="novel3.jpg">
<h3>小说标题3</h3>
<p>作者姓名</p>
</div>
<div class="book">
<img src="novel4.jpg">
<h3>小说标题4</h3>
<p>作者姓名</p>
</div>
<div class="book">
<img src="novel5.jpg">
<h3>小说标题5</h3>
<p>作者姓名</p>
</div>
<div class="book">
<img src="novel6.jpg">
<h3>小说标题6</h3>
<p>作者姓名</p>
</div>
</div>
</body>
</html>
```
您可以根据需要更改样式和添加/删除小说。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.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)