一个比较流行的分页样式
页面
<div class="pagination">
<ul>
<li class="disablepage">上一页</li>
<li class="currentpage">1</li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
<li><a href="#">9</a>...</li>
<li><a href="#">15</a></li>
<li><a href="#">16</a></li>
<li class="nextpage"><a href="#">下一页</a></li>
</ul>
</div>
CSS
.pagination{
padding: 2px;
}
.pagination ul{
margin: 0;
padding: 0;
text-align: left; /*Set to "right" to right align pagination interface*/
font-size: 12px;
}
.pagination li{
list-style-type: none;
display: inline;
padding-bottom: 1px;
}
.pagination a, .pagination a:visited{
padding: 0 5px;
border: 1px solid #9aafe5;
text-decoration: none;
color: #2e6ab1;
}
.pagination a:hover, .pagination a:active{
border: 1px solid #2b66a5;
color: #000;
background-color: lightyellow;
}
.pagination li.currentpage{
font-weight: bold;
padding: 0 5px;
border: 1px solid navy;
background-color: #2e6ab1;
color: #FFF;
}
.pagination li.disablepage{
padding: 0 5px;
border: 1px solid #929292;
color: #929292;
}
.pagination li.nextpage{
font-weight: bold;
}
* html .pagination li.currentpage, * html .pagination li.disablepage{ /*IE 6 and below. Adjust non linked LIs slightly to account for bugs*/
margin-right: 5px;
padding-right: 0;
}
显示样式
分享到:
相关推荐
这是我写的一个分页控件,功能如下: 1.支持设计时支持和两种分页模式,其中综合分页模式的效果如下: 普通分页模式的效果如下: 2.完善的设计时支持,包括自动套用格式和设计时面板设置: 使用方法: 在...
24款分页样式任意挑选,样式精美,流行的css架构,代码质量高,重用率高
非常好用的分页类,很容易定制各种风格,可以与网上流行的 《24款超实用的Web 2.0风格翻页页码css代码》 完美无缝连接。你所做的,就是改个div的名字而已。另外懂点儿CSS的朋友甚至可以轻松实现仿Google的翻页样式。
非常好用的分页类,很容易定制各种风格,可以与网上流行的 《24款超实用的Web 2.0风格翻页页码css代码》 完美无缝连接。你所做的,就是改个div的名字而已。另外懂点儿CSS的朋友甚至可以轻松实现仿Google的翻页样式。至...
功能非常好自主研发的自定义Repeater分页控件,包括目前较为流行的20多种分页样式,也可定义无刷新分页,支持简洁分页,调用存储过程分页,速度很好,是您页面上的最佳选择,本人还有许多其它的一些控件,如有需要可...
模仿拍拍网、京东等这些网站上所用的比较流行的分页!样式可又自己写!
常好用的分页类,很容易定制各种风格,可以与网上流行的 《24款超实用的Web 2.0风格翻页页码css代码》 完美无缝连接。你所做的,就是改个div的名字而已。另外懂点儿CSS的朋友甚至可以轻松实现仿Google的翻页样式。至...
React数据排序一个简单的react组件,可帮助您对数据列表进行排序和分页。问题您想要在表或列表中显示一组自定义数据,并希望能够对其进行排序和/或分页。 您还希望拥有样式自由和简单的API。这个解决方案带有组件...
多功能ASP分页类, 可以与网上流行的 《24款超实用的Web 2.0风格翻页页码css代码》 完美无缝连接。你所做的,就是改个div的名字而已。另外懂点儿CSS的朋友也可以轻松实现仿Google的翻页样式。
功能特点: 1.全局设置功能(可以设置企业的基本信息) 2.导航菜单管理(前台采用jquery插件实现二级下拉菜单,后台可设置菜单的显示和隐藏) ...分页样式9种样式,可以随意改变。手动分页,采用我们的标签,在需要分
非常好用的分页类,很容易定制各种风格,可以与网上流行的 《24款超实用的Web 2.0风格翻页页码css代码》 完美无缝连接。你所做的,就是改个div的名字而已。另外懂点儿CSS的朋友甚至可以轻松实现仿Google的翻页样式。至...
不错的哟非常好用的分页类,很容易定制各种风格,可以与网上流行的《24款超实用的Web2.0风格翻页页码css代码》完美无缝连接。你所做的,就是改个div的名字而已。另外懂点儿CSS的朋友甚至可以轻松实现仿Google的翻页...
分页样式9种样式,可以随意改变。手动分页,采用我们的标签,在需要分页处插入我们的标签,即可实现分页效果。 9.产品频道:采用三级频道分类:支持无限极自定义产品属性。采用批量上传图片。全方位展示贵企业的产品...
preloaddisplay 预先加载页面,如果你的网站下载的速度比较慢,用这个比较好。 swftext 将Drm和Flash结合起来了,选择文本,执行该Command,swf动画就轻易的生成了 SliderMenu 设计导航菜单的绝佳助手,可以用于导航...
分页样式9种样式,可以随意改变。手动分页,采用我们的标签,在需要分页处插入我们的标签,即可实现分页效果。9.产品频道:采用三级频道分类:支持无限极自定义产品属性。采用批量上传图片。全方位展示贵企业的产品...
分页样式9种样式,可以随意改变。手动分页,采用我们的标签,在需要分页处插入我们的标签,即可实现分页效果。 9.产品频道:采用三级频道分类:支持无限极自定义产品属性。采用批量上传图片。全方位展示贵企业的...
分页样式9种样式,可以随意改变。手动分页,采用我们的标签,在需要分页处插入我们的标签,即可实现分页效果。 9.产品频道:采用三级频道分类:支持无限极自定义产品属性。采用批量上传图片。全方位展示贵企业的...
分页样式9种样式,可以随意改变。手动分页,采用我们的标签,在需要分页处插入我们的标签,即可实现分页效果。 9.产品频道:采用三级频道分类:支持无限极自定义产品属性。采用批量上传图片。全方位展示贵企业的...