CSS3 分页

最新推荐文章于 2023-12-22 22:21:20 发布

冷月醉雪

最新推荐文章于 2023-12-22 22:21:20 发布

阅读量1.3k

点赞数

分类专栏： CSS3 文章标签： CSS3 分页

本文链接：https://blog.csdn.net/lengyuezuixue/article/details/80711698

版权

简单分页

如果你的网站有很多个页面，你就需要使用分页来为每个页面做导航。

<!DOCTYPE html>
<html>
	<head>
		<title>自学教程(如约智惠.com)</title>
		<meta charset="utf-8">
		<style>
			ul.pagination {
				display:inline-block;
				padding:0px;
				margin:0px;
			}
			
			ul.pagination li {
				display:inline;
			}
			
			ul.pagination li a {
				color:black;
				float:left;
				padding:8px 16px;
				text-decoration:none;
			}
		</style>
	</head>
		<h2>简单的分页</h2>
		<ul class="pagination">
		  <li><a href="#">«</a></li>
		  <li><a href="#">1</a></li>
		  <li><a class="active" href="#">2</a></li>
		  <li><a href="#">3</a></li>
		  <li><a href="#">4</a></li>
		  <li><a href="#">5</a></li>
		  <li><a href="#">6</a></li>
		  <li><a href="#">7</a></li>
		  <li><a href="#">»</a></li>
		</ul>
	<body >
	</body>
</html>

点击及鼠标悬停分页样式

如果点击当前页，可以使用 .active 来设置当期页样式，鼠标悬停可以使用 :hover 选择器来修改样式：

<!DOCTYPE html>
<html>
	<head>
		<title>自学教程(如约智惠.com)</title>
		<meta charset="utf-8">
		<style>
			ul.pagination {
				display:inline-block;
				padding:0px;
				margin:0px;
			}
			
			ul.pagination li {
				display:inline;
			}
			
			ul.pagination li a {
				color:black;
				float:left;
				padding:8px 16px;
				text-decoration:none;
			}
			
			ul.pagination li a.active {
				background-color:#4CAF50;
				color:white;
			}
			
			ul.pagination li a:hover:not(.active) {background-color: #ddd;}
		</style>
	</head>
		<<h2>点击及鼠标悬停分页样式</h2>
		<p>移动鼠标的分页的数字上。</p>
		<ul class="pagination">
		  <li><a href="#">«</a></li>
		  <li><a href="#">1</a></li>
		  <li><a class="active" href="#">2</a></li>
		  <li><a href="#">3</a></li>
		  <li><a href="#">4</a></li>
		  <li><a href="#">5</a></li>
		  <li><a href="#">6</a></li>
		  <li><a href="#">7</a></li>
		  <li><a href="#">»</a></li>
		</ul>
	<body >
	</body>
</html>

圆角样式

可以使用 border-radius 属性为选中的页码来添加圆角样式:

<!DOCTYPE html>
<html>
	<head>
		<title>自学教程(如约智惠.com)</title>
		<meta charset="utf-8">
		<style>
			ul.pagination {
				display:inline-block;
				padding:0px;
				margin:0px;
			}
			
			ul.pagination li {
				display:inline;
			}
			
			ul.pagination li a {
				color:black;
				float:left;
				padding:8px 16px;
				text-decoration:none;
				border-radius: 5px;
			}
			
			ul.pagination li a.active {
				background-color:#4CAF50;
				color:white;
				border-radi

最低0.47元/天解锁文章

冷月醉雪

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
CSS3 分页

简单分页如果你的网站有很多个页面，你就需要使用分页来为每个页面做导航。&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;title&gt;自学教程(如约智惠.com)&lt;/title&gt; &lt;meta charset="utf-8"&gt; &lt;style&gt; ul.p
复制链接

扫一扫