原英文地址：woork.blogspot.com/2008/03/perfect-pagination-style-using-css.html

图片无法显示请看：http://hi.baidu.com/oceaniver/blog/

这个教程要说明的是如何为搜索结果或更常见的长记录列表设计分页。经常有人问我这个问题，所以我决定发一个帖子来说明如何用少量的 HTML 和 CSS 代码设计出完美的分页样式。

This tutorial explains how to design a pagination for search results or more in general to split a long list of records in more pages. It's a question I often receive, so I decided to publish a very simple post which explains how to design a perfect pagination style using some lines of HTML and CSS code.

这个教程也包含有实现Flickr、Digg式的简洁分页样式的HTML/CSS代码，随时可以应用于你的WEB项目中。
This tutorial also includes HTML/CSS code to implement a Flickr-like, Digg-like, Clean pagination style ready to use in your web projects.

Update as March 17, 2008: My friends Simone Saveri solved some issuse with IE6 and IE7.

Download this tutorial (original)

Download this tutorial (Simone Saveri version)


典型的分页结构
下图显示的是一个典型分页结构的例子
Typical pagination structure
The following image represents an example of a typical pagination structure:


一般你可以看出四个主要元素：

          -前一页/后一页 按钮（不可用）
          -当前页
          -标准的页面选择器
          -前一页/后一页 按钮（可用）
In general you can identify four main elements:

    - Previous/Next button (disabled)
    - Current Active page
    - Standard Page selector
    - Previous/Next button (enabled)

你可以使用包含<li>标签（每个<li>均单独对应一个分页元素）的HTML列表 (<ul>) 来设计这样的结构，并分配一个ID给<ul>列表以便为当前列表应用具体的分页样式。看看下面这些教程以作说明。
You can design this structure using an HTML list (<ul>) which contains some <li> elements (one for each pagination element) and apply an ID to the<ul> list to assign a specific pagination style to the current list. Take a look at these tutorials for an explanation.

Flickr式的分页：HTML 代码
想象你要设计的Flickr式分页样式就像这样：
Flickr-like pagination: HTML Code
Image you want to design a Flickr-like pagination style which looks like this:

HTML代码很简单，而且你只需更改<ul>的ID就可以重复应用这个结构于所有分页样式中（在这个案例中我增加了“pagination-flickr”，如下面加粗的代码）
HTML code is very simple and you can reuse this structure in all pagination-style you want only changing the <ul> ID (in this case I added "pagination-flickr", in bold in the code below):

<ul id="pagination-flickr">
<li class="previous-off">«Previous</li>
<li class="active">1</li>
<li><a href="?page=2">2</a></li>
<li><a href="?page=3">3</a></li>
<li><a href="?page=4">4</a></li>
<li><a href="?page=5">5</a></li>
<li><a href="?page=6">6</a></li>
<li><a href="?page=7">7</a></li>
<li class="next"><a href="?page=2">Next »</a></li>
</ul>

现在，你只需重新定义CSS标签的属性(ul, li, a)。
Now, you have only to redefine CSS element properties (ul, li, a).


Flickr式分页: CSS 代码
非常简单：
Flickr-like pagination: CSS Code
Is very simple:

ul{border:0; margin:0; padding:0;}

#pagination-flickr li{
border:0; margin:0; padding:0;
font-size:11px;
list-style:none;
}
#pagination-flickr a{
border:solid 1px #DDDDDD;
margin-right:2px;
}
#pagination-flickr .previous-off,
#pagination-flickr .next-off {
color:#666666;
display:block;
float:left;
font-weight:bold;
padding:3px 4px;
}
#pagination-flickr .next a,
#pagination-flickr .previous a {
font-weight:bold;
border:solid 1px #FFFFFF;
}
#pagination-flickr .active{
color:#ff0084;
font-weight:bold;
display:block;
float:left;
padding:4px 6px;
}
#pagination-flickr a:link,
#pagination-flickr a:visited {
color:#0063e3;
display:block;
float:left;
padding:3px 6px;
text-decoration:none;
}
#pagination-flickr a:hover{
border:solid 1px #666666;
}


Digg式的分页：HTML 代码
好了，现在你想设计一个Digg式的分页样式就像：
Ok, now you want to design a Digg-like pagination style which looks like this:


从上一个教程中把HTML 结构复制出来并粘贴。你只需更改<ul> 的ID（替换"pagination-digg" 为 "pagination-flickr"）
From the previous tutorial copy and paste the HTML structure. You have only to change the <ul> ID ():

<ul id="pagination-digg">
<li class="previous-off">«Previous</li>
<li class="active">1</li>
<li><a href="?page=2">2</a></li>
<li><a href="?page=3">3</a></li>
<li><a href="?page=4">4</a></li>
<li><a href="?page=5">5</a></li>
<li><a href="?page=6">6</a></li>
<li><a href="?page=7">7</a></li>
<li class="next"><a href="?page=2">Next »</a></li>
</ul>


Digg式分页: CSS 代码
CSS代码与前面Flickr式分页的例子非常相似。你只需修改一些属性，并把#pagination-flikr更改为 #pagination-digg，但CSS的分页元素不需修改：
Digg-like pagination: CSS Code
CSS code is very similar to the previous Flickr-like example.You have only to change some attributes, and modify #pagination-flikr ID with #pagination-digg, but CSS pagination elements don't change:

ul{border:0; margin:0; padding:0;}

#pagination-digg li{
border:0; margin:0; padding:0;
font-size:11px;
list-style:none;
margin-right:2px;
}
#pagination-digg a{
border:solid 1px #9aafe5
margin-right:2px;
}
#pagination-digg .previous-off,
#pagination-digg .next-off {
border:solid 1px #DEDEDE
color:#888888
display:block;
float:left;
font-weight:bold;
margin-right:2px;
padding:3px 4px;
}
#pagination-digg .next a,
#pagination-digg .previous a {
font-weight:bold;
}
#pagination-digg .active{
background:#2e6ab1;
color:#FFFFFF;
font-weight:bold;
display:block;
float:left;
padding:4px 6px;
}
#pagination-digg a:link,
#pagination-digg a:visited {
color:#0e509e
display:block;
float:left;
padding:3px 6px;
text-decoration:none;
}
#pagination-digg a:hover{
border:solid 1px #0e509e
}


简洁的分页样式：HTML 代码
如果你喜欢小巧，简洁的设计，那么这个例子将展示出如何设计出如下图所示简洁的分页样式：
Clean pagination style: HTML Code
If you like minimal, clean design，this example shows how to design a very clean pagination style which looks like this:


HTML 结构和前面两个例子一样。你只需要做的是把<ul> 的ID更改为 "pagination-clean":
HTML structure is the same of two previous examples. The only thing you have to change is the <ul> ID with "pagination-clean":

<ul id="pagination-clean">
<li class="previous-off">«Previous</li>
<li class="active">1</li>
<li><a href="?page=2">2</a></li>
<li><a href="?page=3">3</a></li>
<li><a href="?page=4">4</a></li>
<li><a href="?page=5">5</a></li>
<li><a href="?page=6">6</a></li>
<li><a href="?page=7">7</a></li>
<li class="next"><a href="?page=2">Next »</a></li>
</ul>

简洁的分页样式：CSS代码
这个分页样式的CSS代码如下：
Clean pagination style: CSS Code
CSS code for this kind of pagination style is:

ul{border:0; margin:0; padding:0;}

#pagination-clean li{
border:0; margin:0; padding:0;
font-size:11px;
list-style:none;
}
#pagination-clean li, #pagination-clean a{
border:solid 1px #DEDEDE
margin-right:2px;
}
#pagination-clean .previous-off,
#pagination-clean .next-off {
color:#888888
display:block;
float:left;
font-weight:bold;
padding:3px 4px;
}
#pagination-clean .next a,
#pagination-clean .previous a {
font-weight:bold;
border:solid 1px #FFFFFF;
}
#pagination-clean .active{
color:#00000
font-weight:bold;
display:block;
float:left;
padding:4px 6px;
}
#pagination-clean a:link,
#pagination-clean a:visited {
color:#0033CC
display:block;
float:left;
padding:3px 6px;
text-decoration:none;
}
#pagination-clean a:hover{
text-decoration:none;
}


Download this tutorial

很好啊，我要的博客要转载这篇文章

正巧前段时间做的demo，交流下：
http://bbs.blueidea.com/thread-2848992-1-1.html

我认为这不是完美的分页样式, 一般这样的分页效果的所用CSS不会相差太远, 不喜欢这样的原因主要是HTML太多, 我认为分页不应该是一个列表, 不仅仅是因为他代码多, 想想在没有样式的情况下, 或者在某种对CSS支持不是太好的平台上, 那么这种用li构架的分页就变得相当长, 他们默认是每行一个的, 比如在小屏幕的设备上, 意味着要向下或向上滚动好几个屏幕的高度.

所以分页一般还是采用一系列的内联元素来做. 例如a, span, strong, em, b ...

这个人说他实现了flickr和digg的效果, 但是可以肯定他并没见过这2个网站是怎么来实现分页的. 因为这2个网站并不是用这样的方式来做的. 不要盲目崇洋媚外
还有代码根本不像他说的那样very simple

你要简单的分页代码直接去这2个网站找

楼上所言极是!!分页无论如何也要考虑没有了css后的结构!本来就是带来方便的东西,在没了CSS后结构也要带来方便!!

谢谢ashung的指教
当初翻译这个作者的文章的主要原因是它提供的图片很有意思，可能就这样粗心的忽略了代码的质量。

你说的这个问题别人不是没有仔细考虑过，甚至可能花费了很多的时间，我做的这个demo就是，当然每个人可以坚持自己的想法，探讨一下：

1.没有样式的页面，很多地方内容（列表纵向排列）都会很高的，不单是这种分页列表结构部分；
2.小屏幕的设备上，没有CSS表现控制，默认在一行上宽度同样也是不够的；
3.不支持CSS的视觉浏览器是极少数的；
4.倒是应该好好想想语义部分，有序列表语义不用再解释了，特别是赋予屏幕阅读机的语义；
5.如果确实需要专门针对你担心的问题，用<map>可能比较合适。
6.very simple并不是指代码少（如果以这个标准看看W3C的代码有多“冗余”），结构良好、语义易读基础之上的简洁——我想除此之外应该就是本末倒置了。

好吧，即便这样，也只能说是具体情况具体对待了

引用:

原帖由 Elking 于 2008-6-8 02:14 发表
楼上所言极是!!分页无论如何也要考虑没有了css后的结构!本来就是带来方便的东西,在没了CSS后结构也要带来方便!!

HTML的核心思想是结构化的标记语言，文档结构、明确语义才是其核心。

HTML文档规范设计之初就没打算只是满足你所谓的“方便"的——你要的只是视觉上的方便而已（甚至可能对另外一些阅读人群或阅读设备反倒不方便了），即便是这样也请不要把CSS担任的角色全部强加到HTML文档上。尽量让HTML一心一意的做好自己的事情吧，否则请再回到那个混沌之初不用分离的WEB世界了。

这就像是：
“我多么希望我的页面在没有CSS样式的情况下，能够3列并排显示啊——屏幕那么宽，我这样的想法多美好啊！”
ok！用表格吧，（而且我都不知道是不是所有人的屏幕以及所有设备的屏幕都是这么宽），并且我不打算再继续讨论这个问题了

[ 本帖最后由 zbm2001z 于 2008-6-10 11:22 编辑 ]

特地去flickr看了下，果然正版的更简洁，而且在不支持css的平台上也不会造成很长的分页。感谢4楼的提醒，不然真是被误导了。