写一个HTML页面,css实现样式,一个模块展示图书名称,作者,价格,还有一个可以进入图书详情页面的超链接,另一个模块展示名次,图书名称,点击量,名次变动
时间: 2024-05-19 09:13:35 浏览: 19
<!DOCTYPE html>
<html>
<head>
<title>图书信息</title>
<style type="text/css">
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
h1 {
font-size: 32px;
text-align: center;
margin-top: 50px;
}
.container {
width: 80%;
margin: 50px auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.book {
width: 48%;
background-color: #f5f5f5;
padding: 20px;
margin-bottom: 30px;
box-sizing: border-box;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
.book h2 {
font-size: 24px;
margin-bottom: 10px;
}
.book h3 {
font-size: 18px;
margin-bottom: 10px;
}
.book p {
font-size: 16px;
margin-bottom: 10px;
}
.book a {
display: block;
font-size: 16px;
color: #333;
margin-top: 10px;
font-weight: bold;
text-decoration: none;
}
.book a:hover {
color: #000;
}
.ranking {
width: 48%;
background-color: #f5f5f5;
padding: 20px;
margin-bottom: 30px;
box-sizing: border-box;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
.ranking h2 {
font-size: 24px;
margin-bottom: 10px;
}
.ranking table {
width: 100%;
border-collapse: collapse;
margin-top: 10px;
}
.ranking th {
font-size: 16px;
font-weight: normal;
padding: 10px;
background-color: #ddd;
border: 1px solid #ccc;
}
.ranking td {
font-size: 16px;
padding: 10px;
border: 1px solid #ccc;
}
.ranking td:first-child {
font-weight: bold;
}
.ranking .up {
color: green;
font-weight: bold;
}
.ranking .down {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<h1>图书信息展示</h1>
<div class="container">
<div class="book">
<h2>《JavaScript高级程序设计》</h2>
<h3>作者:Nicholas C. Zakas</h3>
<p>价格:¥89.00</p>
<a href="#">查看详情</a>
</div>
<div class="book">
<h2>《CSS揭秘》</h2>
<h3>作者:Lea Verou</h3>
<p>价格:¥59.00</p>
<a href="#">查看详情</a>
</div>
<div class="book">
<h2>《HTML5与CSS3基础教程》</h2>
<h3>作者:崔庆才</h3>
<p>价格:¥39.00</p>
<a href="#">查看详情</a>
</div>
<div class="book">
<h2>《Node.js实战》</h2>
<h3>作者:Mike Cantelon等</h3>
<p>价格:¥78.00</p>
<a href="#">查看详情</a>
</div>
<div class="ranking">
<h2>图书点击排行榜</h2>
<table>
<tr>
<th>名次</th>
<th>图书名称</th>
<th>点击量</th>
<th>名次变动</th>
</tr>
<tr>
<td>1</td>
<td>《JavaScript高级程序设计》</td>
<td>1234</td>
<td class="up">↑2</td>
</tr>
<tr>
<td>2</td>
<td>《CSS揭秘》</td>
<td>1023</td>
<td class="down">↓1</td>
</tr>
<tr>
<td>3</td>
<td>《HTML5与CSS3基础教程》</td>
<td>789</td>
<td class="up">↑1</td>
</tr>
<tr>
<td>4</td>
<td>《Node.js实战》</td>
<td>654</td>
<td class="down">↓2</td>
</tr>
</table>
</div>
</div>
</body>
</html>
相关推荐
![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)