金牌译作 CSS完美分页样式

2850个读者 翻译: 水明生  06/06/2008 原文 引用 双语对照及眉批 字体大小 小 中 大

简介

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

译言不能本地上传图片挺麻烦的，看图片请到http://hi.baidu.com/oceaniver/blog/item/efdd31d31ead2e053af3cfca.html

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


这个教程也包含有实现Flickr、Digg式的简洁分页样式的HTML/CSS代码，随时可以应用于你的WEB项目中。
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)


典型的分页结构
下图显示的是一个典型分页结构的例子


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

          -前一页/后一页 按钮（不可用）
          -当前页
          -标准的页面选择器
          -前一页/后一页 按钮（可用）

你可以使用包含<li>元素（每个均单独对应一个分页元素）的HTML列表 (<ul>) 来设计这样的结构，并分配一个ID给<ul>列表以便为当前列表应用具体的分页样式。看看下面教程以作说明。

Flickr式的分页：HTML 代码
想象你要设计的Flickr式分页样式就像这样：

HTML代码很简单，而且你只需更改<ul>的ID就可以重复应用这个结构于所有分页样式中（在这个案例中我增加了“pagination-flickr”，如下面加粗的代码）

<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)。



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式的分页样式就像：

从上一个教程中把HTML 结构复制出来并粘贴。你只需更改<ul> 的ID（替换"pagination-digg" 为 "pagination-flickr"）


<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的分页元素不要修改：


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 代码
如果你喜欢小巧，简洁的设计，这个例子将展示出如何设计出如下图所示的简洁的分页样式：



HTML 结构和前面两个例子一样。你只需要做的是把<ul> 的ID更改为 "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代码如下：


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
继续阅读
  • 使用CSS开发时髦的导航栏（一）

    除非限制你自己只做单个页面的网站，否则你都需要导航栏。事实上，导航栏是任何网站设计中最主要的部分之一，如果希望用户很容易的在你的站点移动，导航栏的设计需要大量的思考。 制作容易的站点导航栏是CSS真...

  • CSS渐变文本效果

    你是否想不用photoshop来创建一个带渐变的标题文字吗? 这里用一个简单的css技巧来向你展示如何仅仅使用css和png图片来制造这种效果. 经测试这种方法适合大多数主流浏览器.当然, IE6需...

  • 14个可以节省你时间的CSS工具

    作为一个网站设计/开发人员，你必须不断寻找方法来减少设计/开发过程中所花费的时间。这对于提高你的工作效率并最大化你的利润是非常重要的。下面介绍的按功能分类的CSS工具可以有效地节省你设计网站的时间。C...

  • 另外五种高效网页设计的原则

    另外五种有效网页设计的原则

  • 2008 Web设计潮流走势

    之所以翻译这篇文章，不是让大家欢欣鼓舞的去跟随这些所谓的“潮流走势”，正好相反，我是想提醒大家：小心，这些风格可能马上就要过时了。 当某种风格一旦成为了可以归类的“潮流”，那就意味着，它离过时已...

  • 使用CSS开发时髦的导航栏（二）

    我能够使用CSS和列表创造有子菜单的导航栏吗？ 有时候我们需要超过一级的导航栏 – 可是在CSS里面用样式化的列表能够创建多级导航栏吗？   解决方案 在一个导航系统中显示子菜单最好的办法是在一个列...

  • 使用CSS开发时髦的导航栏（三）

    如何使用CSS和列表构造一个水平菜单？ 到目前为止，我们能够处理垂直导航栏了—这种导航栏在一个中间是主要内容的网站左边或右边很容易被看到。然而，导航栏也常常被做成水平菜单紧挨在文本上方。 解决方案 ...

  • 设计者的框架

    这是A List Apart上面一篇关于CSS设计框架的文章，初次上yeeyan翻译，包涵包涵，站点还不是很会用。有错误希望指正。

相关小组

标签:

内容有问题？请与我们联络。

译作评分

  • Currently 0.00/5
  • 1
  • 2
  • 3
  • 4
  • 5
 0.0  |  0 个评分
收藏夹  引用

3条评论    0眉批

  • 1.

    Bill 状元 | Blog

    前两天看了一下校内的CSS，才知道有这个东西，不过他们那个代码写得实在是……唉……完全没有可读性，一陀一陀的。

    06/07/2008

  • 2.

    毛心宇 大学士 | Blog

    图片看不到，看不到啊看不到

    06/07/2008

  • 3.

    chinaren123 童生

    哥，我是菜鸟，我现在用DW做一个企业网站，产品的页面要用到页码翻页，我想用你发表的最下的效果就可以，但我不知道怎么才能把它加到我的网页里面，帮我下，多谢了

    09/01/2008

添加评论

欢迎访问译言网。在这里，您可以。。。

阅读
发现
翻译