CSS分页实例

最新推荐文章于 2024-01-15 09:21:30 发布

这碗花里只有粥

最新推荐文章于 2024-01-15 09:21:30 发布

阅读量141

点赞数

分类专栏： # CSS

本文链接：https://blog.csdn.net/qq_36381242/article/details/99316224

版权

CSS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

效果如下：

CSS分页实例效果图

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>分页实例</title>
		<style>
			ul.pagination{
				display: inline-block;
				padding: 0;
				margin: 0;
			}
			ul.pagination li{display: inline;}
			ul.pagination li a{
				width: 20px;
				height: 20px;
				box-sizing: content-box;
				text-align: center;
				color: black;
				float: left;
				padding: 8px 8px;
				text-decoration: none;
			}
			ul.pagination li a:hover{
				background: gray;
				opacity: 0.5;
				color: red;
			}
			ul.pagination li .active{
				background-color: red;
				color: #FFFFFF;
			}
		</style>
	</head>
	<body>
		<ul class="pagination">
			<li><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="#">>></a></li>
		</ul>
	</body>
</html>

这碗花里只有粥

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS分页实例

效果如下：代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>分页实例</title> <style> ul.pagination{ display: inline-block; p...
复制链接

扫一扫