美观 漂亮 分页 样式

最新推荐文章于 2022-07-04 17:18:58 发布
最新推荐文章于 2022-07-04 17:18:58 发布
阅读量230 收藏
点赞数
原文链接：http://www.cnblogs.com/zengxiangzhan/archive/2011/08/03/2126179.html
版权

曾祥展    
   


美观 漂亮 分页 样式  HTML: 

<body>
<div class="navigation">
  <ol class="wp-paginate">
    <li><span class="title">Pages:</span></li>
    <li><span class="page current">1</span></li>
    <li><a href="" title="2" class="page">2</a></li>
    <li><a href="" title="3" class="page">3</a></li>
    <li><a href="" title="4" class="page">4</a></li>
    <li><a href="" title="5" class="page">5</a></li>
    <li><a href="" title="6" class="page">6</a></li>
    <li><a href="" title="7" class="page">7</a></li>
    <li><span class="gap">...</span></li>
    <li><a href="" title="31" class="page">31</a></li>
    <li><a href="" class="next">&gt;</a></li>
  </ol>
</div>


CSS: 

.navigation {
    margin:auto auto 10px 10px;
    float:left;
}
.wp-paginate {
    padding:0;
    margin:0;
}
.wp-paginate li {
    float:left;
    list-style:none;
    margin:2px;
    padding:0;
}
.wp-paginate a {
    margin:0 2px;
    line-height:20px;
    text-align:center;
    text-decoration:none;
    border-radius:3px;
    -moz-border-radius:3px;
    float:left;
    min-height:20px;
    min-width:20px;
    color:#858585;
    border:2px #e3e3e3 solid;
    border-radius:13px;
    font-size:11px;
}
.wp-paginate a:hover {
    border:2px #858585 solid;
    color:#858585;
}
.wp-paginate .title {
    color:#555;
    margin:0;
    margin-right:4px;
    font-size:14px;
}
.wp-paginate .gap {
    color:#999;
    margin:0;
    margin-right:4px;
}
.wp-paginate .current {
    margin:0 2px;
    line-height:20px;
    text-align:center;
    text-decoration:none;
    border-radius:3px;
    -moz-border-radius:3px;
    float:left;
    font-weight:700;
    min-height:20px;
    min-width:20px;
    color:#262626;
    border:2px #119eda solid;
    border-radius:13px;
    font-size:11px;
    color:#119eda;
}
.wp-paginate .page {
    margin:0;
    padding:0;
}
.wp-paginate .prev {
}
.wp-paginate .next {
}

 

转载于:https://www.cnblogs.com/zengxiangzhan/archive/2011/08/03/2126179.html

weixin_34112208
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
漂亮实用的jQuery分页样式插件代码
06-10
本资源提供了一款“漂亮实用的jQuery分页样式插件代码”，适用于那些希望为网站添加美观、易用的分页功能的开发者。这款插件采用红色主题，具有无刷新的分页效果，并且集成了搜索功能，增强了用户体验。 首先，...
漂亮的分页样式例子
01-17
以下是一些关于创建漂亮分页样式的知识点： 1. **基本元素**：分页通常包含“上一页”，“下一页”按钮，以及数字链接来表示不同的页面。用户可以通过点击这些元素在内容之间跳转。 2. **清晰的视觉提示**：分页...
好看的分页样式
jhl52771的专栏
01-02 1249
@charset "utf-8";       .pagination a {     text-decoration: none; border: 1px solid #AAE; color: #15B; } .pagination a, .pagination span {     display: inline-block;     padding: 0.1em 0.
创意bootstrap分页样式
ICode联盟
05-24 332
下载地址 两款创意bootstrap分页样式。他们在元素bootstrap3分页样式的基础上，通过简单的CSS3代码来对它进行美化，生成漂亮的分页样式 dd:
一套方便实用的分页设计方案 Bootstrap5 + Thymeleaf
土味儿
07-04 1296
- 可以方便地进入 第一页、最后页 - 可以方便地进入 当前活动页 的 前两页、后两页 - 可以根据 总页数 及 当前活动页 自动地排版页码
两款漂亮的bootstrap分页样式
12-13
在本主题中，我们聚焦于"两款漂亮的bootstrap分页样式"，这涉及到CSS3技术在Bootstrap分页组件上的应用。 Bootstrap的分页组件（Pagination）是一个基本的导航元素，用于分隔大量的内容或结果，让用户能够分步骤...
最实用的漂亮的分页样式
08-27
"最实用的漂亮的分页样式"这一主题着重于提升用户体验，通过美观的设计吸引用户并方便他们高效地浏览网页内容。下面我们将详细探讨分页样式的设计原则、常见类型以及实现方法。 1. **设计原则**： - **易用性**：...
有序列表ol漂亮css分页样式代码(纯css)
09-05
本文将详细讲解如何使用纯CSS实现一个漂亮的有序列表（ol）分页样式，供制作分页的朋友参考。 首先，我们需要了解HTML的基础结构，创建一个有序列表`<ol>`来作为分页的基础框架。在`<ol>`标签内，我们可以使用`<li>...
收集的几种分页样式，非常漂亮
12-12
精选的几种漂亮分页样式。 其中有一款模仿百度的熊爪足迹。
样式 24种分页样式
04-13
NULL 博文链接：https://guomingzhang2008.iteye.com/blog/1733639
好看的jquuery分页样式
02-16
能够实现多种好看样式的jquery分页，支持数据绑定，css控制分页的样式，jquery空控制分页的走位！
一个比较通用的分页控件，完整的设计时支持和比较流行的分页模式（提供源码下载）
01-02
这是我写的一个分页控件，功能如下： 1.支持设计时支持和两种分页模式，其中综合分页模式的效果如下： 普通分页模式的效果如下： 2.完善的设计时支持，包括自动套用格式和设计时面板设置：   使用方法： 在aspx页面中： 代码如下: <%@ Page Language=”C#” AutoEventWireup=”true” CodeBehind=”Default.aspx.cs” Inherits=”Cyclone.CustomPager.WebApplication._Default” %> <%@ Register assembly=”Cyclone.CustomPager.Pag
简单的分页
05-28
NULL 博文链接：https://wangwang-163-com.iteye.com/blog/728011
自制分页功能, 样式好看,代码完整
weixin_42960873的博客
07-17 216
https://download.csdn.net/download/weixin_42960873/12514541 java用的一些分页插件有时会与其他功能有冲突, 导致分页功能不稳定或者失效, 此时可以用本人自制的分页demo, 可以解决这种问题
dedecms 快速美化分页样式
xiaohongIT的博客
08-10 344
展示图 laypage.css /*! laypage默认样式 */ .laypage_main{font-size:0; clear:both; color:#666;} .laypage_main *{display:inline-block; vertical-align: top; font-size:12px;} .laypage_main a{height:26px; line-height:26px; text-decoration:none; color:#666;} .laypage
分页设计的难点问题
01-25 905
在网站开发、移动 APP 开发的时候，遇到数据量多的时候，都会有人性化的分页功能。但是，看似简单的分页功能，其实存在很多的设计技巧以及不少的坑。 分页有三种样式：普通分页、首末分页、跳转分页 Google的翻页功能的设计 当超过10项的搜索结果，Google会自动分页，你是否曾注意到，这个分页的链接，只出现在网页的底部，而网页顶部却没有分页的链接？分页的链接如下图： ​ 从用户体验的角度，如果顶部也出现分页链接，实际上可有可无。因为按照逻辑的操作，用户起码应该是快速浏览完每页的10项搜索.
分页设计
weixin_44022886的博客
07-31 337
分页设计： #9条记录，每页最多只能显示4条 ，会有3页 第一页 0,4 第二页 4,4 第三页 8,4 select * from user limit 4,4 #n条记录 每页最多只能显示4条,会有整除n/4 n/4+1 页 ,第一页 0,4 ，第二页4,4 第三页 8,4 第m页 （m-1）*4 ，4 #n条记录 select...
bootstraptable漂亮样式
最新发布
03-16
BootstrapTable是一个非常流行的开源表格插件，它提供了丰富的功能和漂亮的样式，可以让我们快速地创建出美观的表格。它支持响应式设计，可以自适应不同的屏幕大小，同时也支持排序、分页、搜索、编辑等功能，非常...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值