一个分页页码示例

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>分页页码--加入小图标</title>
<style type="text/css">
.page-icon{
	margin:20px 0 0 0;
	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;
}
.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:url(img/bg_hotsale.gif);
}
.page-disabled i{
	background-position:-80px -608px;
	margin-right:3px;
}

.page-next i{
	background-position:-62px -608px;
	margin-left:3px;
}

</style>
</head>

<body>
<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>
</div>

</body>

此分页页码解决了行内元素空格产生间距的bug.用到背景图片定位等技巧。

时间： 2024-08-02 16:30:29

一个分页页码示例的相关文章

php分页函数示例代码,php分页代码实现方法

php分页函数示例代码分享一例php分页函数代码,用此函数实现分页代码很不错. 代码,php分页函数. <?php /* * Created on 2011-07-28 * Author : LKK , http://lianq.net * 使用方法: require_once('mypage.php'); $result=mysql_query("select * from mytable", $myconn); $total=mysql_num_rows($result);

自己重构的一个分页

/// <summary> /// 分页控件(wu) /// </summary> /// <param name="RecordCount">记录数</param> /// <param name="curPage">当前页</param> /// <param name="PageSize">一页多少条数据</param> /// <para

js分页页码算法

function get_hs_page(cur_page, total_page) { var result = ""; for(var i = 1; i <= total_page; i++) { if(i == 2 && cur_page - 6 > 1) { i = cur_page - 6; }else if(i == cur_page + 6 && cur_page + 6 < total_page) { i = total

scroll事件实现监控滚动条并分页显示示例（zepto.js）

scroll事件实现监控滚动条并分页显示示例(zepto.js ) 需求:在APP落地页上的底部位置显示此前其他用户的购买记录,要求此div盒子只显示3条半,但一页有10条,div内的滑动条滑到一页底部自动加载下一页并发加载埋点. 实现:首先理解三个概念,分别是contentH,viewH,scrollTop. contentH:即所要滑动的元素内容的高度,包括可见部分以及滚动条下面的不可见部分. ViewH:即我们看到的这个DIV的高度,不包括可见部分也不包括滚动条下面的不可见部分. scr

无刷新分页代码，jQuery分页完整示例

<!DOCTYPE html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>jQuery分页演示效果</title><script type="text/javascript" src="/ajaxjs/jquery1.3.2.js">&l

Web分页页码的制作

效果图: HTML代码 <!doctype html><html><head> <meta charset="utf-8"> <title>分页页码</title> <link rel="stylesheet" type="text/css" href="style.css" ></head> <body ><di

使用Express创建一个简单的示例

1.安装Express 使用npm包安装工具来安装Express安装包,打开npm命令行,输入: npm install -g express 2.创建一个工程本示例是在windows下创建的,项目所在目录为D:\workSpace\mxk. 在D盘新建project-Express文件夹,打开命令行进入D盘,输入: express -e project-Express (“project-Express”是项目名) 安装完成后输入: cd project-Express & npm inst

dede仿站栏目列表页分页页码链接问题

最近在学习dede仿站,在仿站过程中,出现了栏目列表页分页页码链接问题,网上找不到解决的方法.花了30大洋注册了dede官方论坛,希望可以得到解决.问题就是:不管栏目是顶级栏目还是二级栏目,点击页码链接出错,如点击第2页,本来应当是这样的:…/news/list_1_2.html, 实际情况是这样的:…/list_1_2.html分页调用标签:{dede:pagelist listitem="info,index,end,pre,next,pageno,option" listsize

设置分页页码

/// <summary> /// 设置分页页码 /// </summary> /// <param name="pageNum">当前页码</param> /// <param name="pageCount">总页数</param> /// <param name="sideNum">每页显示条数</param> /// <param nam