HTML+CSS实现网页分页页码_html分页页码_Hern（宋兆恒）的博客

link之家
链接快照平台
输入网页链接，自动生成快照
标签化管理网页链接
在直角分页码上面加入小图标

<!doctype html>
<meta charset="utf-8">
<title>直角分页页码-有图标的情况</title>
<style type="text/css">
	/*设置div样式的整体布局*/
	.page-icon{
		margin:20px 0 0 0;/*设置距离顶部20像素*/
		font-size:0;/*修复行内元素之间空隙间隔*/
		text-align:center;/*设置内容居中显示*/
	/*设置共有的的样式布局，主要是进行代码优化，提高运行效率*/
	.page-icon a,.page-disabled,.page-next{
		border:1px solid #ccc;
		border-radius:3px;
		padding:4px 10px 5px;
		font-size:14PX;/*修复行内元素之间空隙间隔*/
		margin-right:10px;
	/*对 a 标签进行样式布局 */
	.page-icon a{
		text-decoration:none;/*取消链接的下划线*/
		color:#005aa0;
	.page-current{
		color:#ff6600;
		padding:4px 10px 5px;
		font-size:14PX;/*修复行内元素之间空隙间隔*/
	.page-disabled{
		color:#ccc;
	.page-next i,.page-disabled i{
		cursor:pointer;/*设置鼠标经过时的显示状态，这里设置的是显示状态为小手状态*/
		display:inline-block;/*设置显示的方式为行内块元素*/
		width:5px;
		height:9px;
		background-image:url(http://img.mukewang.com/547fdbc60001bab900880700.gif);/*获取图标的背景链接*/
	.page-disabled i{
		background-position:-80px -608px;
		margin-right:3px;
	.page-next i{
		background-position:-62px -608px;
		margin-left:3px;
</style>
</head>
<div class="page-icon">
	<span class="page-disabled"><i></i>上一页</span>
    <span class="page-current">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="#">199</a>
    <a href="#">200</a>
    <a class="page-next" href="#">下一页<i></i></a>
</body>
</html>
运行效果截图 
更过详细技术难点、解决思路、实现过程讲解，及细致的代码注释，本人博文有详细介绍
https://blog.csdn.net/chao141yang/article/details/108991252
欢迎查阅或交流！
主要是通过display: block和display: none来实现页面的切换。
将每个页面用一个div包起来，默认第一个页面的样式是display: block，其他页面的样式是display: none，然后通过JavaScript获取鼠标点击事件来隐藏其他页面，显示当前页面，达到页面切换的目的。
具体实现
首先创建一个项目，我的项目的目录结构大致如下图所示。
.html文件
篇幅问题，这里就只详细放page部分的第一个页面的两个条目的代码作为例子了。
<!DOCTY
                                    1、通过Jquery插件技术 
2、后端传回数据为JSON 进行分页（转自https://blog.csdn.net/LDSWAN0/article/details/78554313） 
这是一篇我在初学习过程中，遇到的动态数据分页显示的问题，前台采用Ajax传给后台，后台在访问数据库取出分页数据再转换为json格式传递给前台，前台再解析显示到表格中。在此写出我在做的过程中遇到的问题，可以让其他人...
&amp;lt;html&amp;gt;
&amp;lt;head&amp;gt;
	&amp;lt;title&amp;gt;HTML页码设置&amp;lt;/title&amp;gt;
	&amp;lt;meta http-equiv=&quot;Content-Type&quot; content=&a
                                    今天继续组件文章的分享,今天来讲讲分页组件。分页组件用在地方很多，特别是内容比较多，用分页能更好显示内容,下面讲下如何实现.想要做一个组件,首先要想该组件时什么样子的,有什么样式,有什么功能,其结构是如何的.这是我想实现的组件的样子,先分析一下如何实现分析组件功能分析首先,先是上一页的按钮,后面紧跟着页数的按钮，而页数的按钮后跟下一页的按钮。有了按钮，也要有显示 当前页数总数有多少，那么就有显示现...
                                    PHP与HTML实现数据的分页显示一、分页样式与结果二、PHP函数分析1、数据库查询操作函数分析2、数据表格显示函数分析三、HTML部分的逻辑划分分析1、分页类型判断2、分页页码不足3、页码溢出
一、分页样式与结果
　　分页的页码总共显示10个，如果需要分的页超过10个就将显示2~11,3~12…,15~24等依次类推，界面依旧显示10个可操作页码。
　　具体的CSS样式，参考Bootstrap
https://v3.bootcss.com/components/
二、PHP函数分析
1、数据库查询