分页页码的简单制作

最新推荐文章于 2022-04-14 16:55:00 发布

只想安静的敲代码

最新推荐文章于 2022-04-14 16:55:00 发布

阅读量711

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_37875876/article/details/80057297

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1.制作效果图：

html代码：

<div class="page">
	<span class="pre-page"><</span>
	<span class="current-page">1</span>
	<a href="#">2</a>
	<a href="#">3</a>
	<a href="#">4</a>
	<a href="#">5</a>
	<a href="#">6</a>
	<a href="#">7</a>
	<a href="#">8</a>
	<a href="#">9</a>
	<span class="dot">....</span>
	<a href="#">96</a>
	<a href="#">97</a>
	<a href="#">98</a>
	<a href="#">99</a>
	<a href="#">100</a>
	<a href="#">></a>
</div>

css代码：

<style type="text/css">
	.page{
		text-align: center;
		font-size: 0;
		margin-top: 50px;
	}
	.page a,.current-page,.pre-page{
		padding: 5px 7px;				
		margin: 5px;
		font-size: 12px;
	}
	.page a{
		text-decoration: none;
		border: coral 1px solid;			
		color: #FF7F50;
		
	}
	.page a:hover{
		background-color:brown ;
	}
	
	.current-page{
		border: 1px solid coral;				
		color: #FF7F50;
		background: brown;
		
	}
	.pre-page{
		border: 1px solid gainsboro;
		color: gainsboro;				
	}
	.dot{
		font-size: 12px;
		margin: 5px;
		border: none;
	}
</style>

2.解决行内元素中间有空隙的bug

出现原因：HTML代码中有换行符，制表符或则空格

解决方法：

元素写成一行
设置父元素“font-size：0”，设置父元素中子元素的font-size

3.全部代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>分页页码制作</title>
<style type="text/css">
	.page{
		text-align: center;
		font-size: 0;
		margin-top: 50px;
	}
	.page a,.current-page,.pre-page{
		padding: 5px 7px;				
		margin: 5px;
		font-size: 12px;
	}
	.page a{
		text-decoration: none;
		border: coral 1px solid;			
		color: #FF7F50;
		
	}
	.page a:hover{
		background-color:brown ;
	}
	
	.current-page{
		border: 1px solid coral;				
		color: #FF7F50;
		background: brown;
		
	}
	.pre-page{
		border: 1px solid gainsboro;
		color: gainsboro;				
	}
	.dot{
		font-size: 12px;
		margin: 5px;
		border: none;
	}
</style>
	</head>
	<body>
<div class="page">
	<span class="pre-page"><</span>
	<span class="current-page">1</span>
	<a href="#">2</a>
	<a href="#">3</a>
	<a href="#">4</a>
	<a href="#">5</a>
	<a href="#">6</a>
	<a href="#">7</a>
	<a href="#">8</a>
	<a href="#">9</a>
	<span class="dot">....</span>
	<a href="#">96</a>
	<a href="#">97</a>
	<a href="#">98</a>
	<a href="#">99</a>
	<a href="#">100</a>
	<a href="#">></a>
</div>
	</body>
</html>

只想安静的敲代码

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分页页码的简单制作

1.制作效果图：html代码：&lt;div class="page"&gt; &lt;span class="pre-page"&gt;&lt;&lt;/span&gt; &lt;span class="current-page"&gt;1&lt;/span&gt; &lt;a href="#"&gt;2&lt
复制链接

扫一扫