CSS3 分页

其他 2018-06-21 14:32:11 阅读次数: 3

简单分页

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

<!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-radius: 5px;
			}
			
			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>

鼠标悬停过渡效果

   我们可以通过添加 transition 属性来为鼠标移动到页码上时添加过渡效果:

<!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;
				transition: background-color 3s;
			}
			
			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 属性来添加带边框分页:

<!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;
				transition: background-color .3s;
				border: 1px solid #ddd;
			}
			
			ul.pagination li a.active {
				background-color:#4CAF50;
				color:white;
				border: 1px solid #ddd;
			}
			
			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>

圆角边框

   提示: 在第一个分页链接和最后一个分页链接添加圆角：

<!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;
				transition: background-color .3s;
				border: 1px solid #ddd;
			}
			
			.pagination li:first-child a {
				border-top-left-radius: 5px;
				border-bottom-left-radius: 5px;
			}

			.pagination li:last-child a {
				border-top-right-radius: 5px;
				border-bottom-right-radius: 5px;
			}
			
			ul.pagination li a.active {
				background-color:#4CAF50;
				color:white;
				border: 1px solid #ddd;
			}
			
			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>

分页间隔

   提示: 你可以使用 margin 属性来为每个页码直接添加空格：

<!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;
				transition: background-color .3s;
				border: 1px solid #ddd;
				margin: 0 4px;
			}
			
			.pagination li:first-child a {
				border-top-left-radius: 5px;
				border-bottom-left-radius: 5px;
			}

			.pagination li:last-child a {
				border-top-right-radius: 5px;
				border-bottom-right-radius: 5px;
			}
			
			ul.pagination li a.active {
				background-color:#4CAF50;
				color:white;
				border: 1px solid #ddd;
			}
			
			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>

分页字体大小

   我们可以使用 font-size 属性来设置分页的字体大小:

<!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;
				transition: background-color .3s;
				border: 1px solid #ddd;
				font-size: 22px;
			}
			
			.pagination li:first-child a {
				border-top-left-radius: 5px;
				border-bottom-left-radius: 5px;
			}

			.pagination li:last-child a {
				border-top-right-radius: 5px;
				border-bottom-right-radius: 5px;
			}
			
			ul.pagination li a.active {
				background-color:#4CAF50;
				color:white;
				border: 1px solid #ddd;
			}
			
			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>

居中分页

   如果要让分页居中，可以在容器元素上 (如 <div>) 添加 text-align:center 样式：

<!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;
				transition: background-color .3s;
				border: 1px solid #ddd;
				font-size: 22px;
			}
			
			.pagination li:first-child a {
				border-top-left-radius: 5px;
				border-bottom-left-radius: 5px;
			}

			.pagination li:last-child a {
				border-top-right-radius: 5px;
				border-bottom-right-radius: 5px;
			}
			
			ul.pagination li a.active {
				background-color:#4CAF50;
				color:white;
				border: 1px solid #ddd;
			}
			
			ul.pagination li a:hover:not(.active) {background-color: #ddd;}
			
			div.center {text-align: center;}
		</style>
	</head>
		<h2>分页居中</h2>

		<div class="center">
		  <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>
		</div>
	<body >
	</body>
</html>

实例

<!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;
				transition: background-color .3s;
				border: 1px solid #ddd;
				font-size: 18px;
			}
			
			
			ul.pagination li a.active {
				background-color:#eee;
				color:white;
				border: 1px solid #ddd;
			}
			
			ul.pagination li a:hover:not(.active) {background-color: #ddd;}
			
			div.center {text-align: center;}
		</style>
	</head>
		<p>上一页，下一页按钮:</p>
		<ul class="pagination">
		  <li><a href="#">❮</a></li>
		  <li><a href="#">❯</a></li>
		</ul>

		<p>分页导航:</p>
		<ul class="pagination">
		  <li><a href="#" class="active">Home</a></li>
		  <li><a href="#">Link 1</a></li>
		  <li><a href="#">Link 2</a></li>
		  <li><a href="#">Link 3</a></li>
		</ul>
	<body >
	</body>
</html>

面包屑导航

<!DOCTYPE html>
<html>
	<head>
		<title>自学教程(如约智惠.com)</title>
		<meta charset="utf-8">
		<style>
			ul.breadcrumb {
				padding: 8px 16px;
				list-style: none;
				background-color: #eee;
			}
			ul.breadcrumb li {display: inline;}
			ul.breadcrumb li+li:before {
				padding: 8px;
				color: black;
				content: "/\00a0";
			}
			ul.breadcrumb li a {color: green;}
		</style>
	</head>
		<h2>面包屑导航</h2>
		<ul class="breadcrumb">
		  <li><a href="#">首页 </a></li>
		  <li><a href="#">前端 </a></li>
		  <li><a href="#">HTML 教程 </a></li>
		  <li>HTML 段落</li>
		</ul>

	<body >
	</body>
</html>

猜你喜欢

转载自blog.csdn.net/lengyuezuixue/article/details/80711698
今日推荐
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
周排行
curl的POST请求，封装方法
8.1.1. Integer Types
Java基础 Day05(个人复习整理)
Python - Django - 中间件 process_exception
小L的试卷
【Shell编程】 （函数）判断用户是否存在
python(css样式)
spring ant path 匹配原则 - 【笔记】
《JavaScript与JScript从入门到精通》(美)James.Jaworski.中译本.扫描版.pdf
Eclipse运行带参数的java程序
每日归档
更多
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022