在线建站培训
您的位置: 魔客吧站长论坛网页特效查看内容

不同风格的div+css分页24种示例

轮子 发表于 2017-7-7 12:26 | 查看:755 | 回复:1
网站特效
效果: 其它 
脚本: jQuery特效 
201707051454.jpg


简要教程
这是一组简单的div+css分页代码。示例代码中共有24种不同风格的div+css分页示例。这些page分页代码简单,非常容易集成到项目中。

使用方法
在页面中引入pages.css文件。

1
<link rel="stylesheet" href="css/pages.css" type="text/css" />   
HTML结构
所有的page分页的HTML结构基本相似,都采用<div>包裹一组超链接<a>元素。例如第一种Digg Style的分页HTML代码如下:

1234567891011121314
<div class="digg">   <span class="disabled"> < </span>   <span class="current">1</span>   <a href="#?page=2">2</a>   <a href="#?page=3">3</a>   <a href="#?page=4">4</a>   <a href="#?page=5">5</a>   <a href="#?page=6">6</a>   <a href="#?page=7">7</a>   ...   <a href="#?page=199">199</a>   <a href="#?page=200">200</a>   <a href="#?page=2"> > </a> </div>   
CSS样式
所有分页样式都通过CSS来进行渲染,每种分页CSS样式都非常简单,不超过10行代码。例如第一种Digg Style的分页CSS样式如下:

1234567
/*css digg style pagination*/div.digg{padding:3px;margin:3px;text-align:center} div.digg a{border:#aaaadd 1px solid;padding:2px 5px;margin:2px;color:#000099;text-decoration:none} div.digg a:hover{border:#000099 1px solid;color:#000;} div.digg a:active{border:#000099 1px solid;color:#000;} div.digg span.current{border:solid 1px #000099;padding:2px 5px;font-weight:bold;margin:2px;color:#fff;background-color:#000099;} div.digg span.disabled{border:#eee 1px solid;padding:2px 5px;margin:2px;color:#ddd;}        
请点击此处下载

请先注册会员后在进行下载

已注册会员,请先登录后下载

售价: 免费    【充值金币】 
下载权限: 无下载限制    【购买VIP】

wx_MmezhsNm
wx_MmezhsNm 发表于 2018-3-9 10:13
支持楼主,支持魔客吧,以后经常来!