分页列表实现CSS \HTML（类似百度分页）

最新推荐文章于 2021-06-19 18:43:52 发布

lujiebin

最新推荐文章于 2021-06-19 18:43:52 发布

阅读量921

点赞数 1

分类专栏： CSS 文章标签： css html css3

本文链接：https://blog.csdn.net/lujiebin/article/details/105997019

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 1.样式的重置 */
			ul{
				list-style: none;
				padding: 0;
				margin: 0;
			}
			a{
				text-decoration: none;
				color: #0000cc;
			}
			/* 2.整体样式 */
			/* 3.每一个li的样式 */
			.page ul li{
				display: inline-block;
			}
			.page ul li a{
				display: inline-block;
				width: 34px;
				height:34px;
				border:1px solid #e1e2e3;
				font-size: 14px;
				/* 居中 */
				text-align: center;
				line-height: 34px;
				/* 间距 */
				margin-right: 5px;
			}
			.page ul li a:hover{
				border: 1px solid #38f;
				background-color: #f2f8ff;
			}
			.page .prev a, .page .next a{
				width: 88px;
			}
			/* 4.点击后的a效果 */
			.page .active{
				width: 36px;
				height: 36px;
				line-height: 36px;
				border:none;
				font-weight: 700;
				color: #000;
				/* cursor: initial; */
			}
			.page .active:hover{
				border:none;
				background-color: transparent;
			}
		</style>
	</head>
	<body>
		<div class="page">
			<ul>			
				<li class="prev"><a href="">上一页</a></li>
				<li><a href="">1</a></li>
				<li><a href="">2</a></li>
				<li><a href="" class="active">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="">8</a></li>
				<li><a href="">9</a></li>
				<li><a href="">10</a></li>
				<li class="next"><a href="">下一页</a></li>
			</ul>
		</div>
	</body>
</html>