HTML5CSS3行内块的巧妙运用（上一页下一页效果）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>分页示例</title>
<style>
.pagination {
display: inline-block;
padding: 10px 0;
margin: 0;
list-style: none;
text-align: center;
}
.pagination li {
display: inline;
}
.pagination a {
display: inline-block;
padding: 5px 12px;
margin-right: 1px;
background: #ddd;
text-decoration: none;
color: #555;
border: 1px solid #ddd;
}
.pagination a:hover, .pagination a:active {
background-color: #f0f0f0;
}
</style>
</head>
<body>
<ul class="pagination">
<li><a href="#previous">« 上一页</a></li>
<li><a href="#upcoming">下一页 »</a></li>
</ul>
</body>
</html>这段代码展示了如何使用HTML和CSS创建一个简单的分页效果。.pagination 类用于创建一个水平的分页列表，其中的 <li> 元素被设置为行内块，以保持各个分页按钮之间的间隔，同时使用CSS为分页按钮添加了背景、边框、悬停效果等视觉样式。
评论已关闭