CSS 分页效果制作实例教程

  • 时间:
  • 浏览:299


这个教程也包含有实现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)


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

 


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

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

你可以使用包含

  • 标签(每个
  • 均单独对应一个分页元素)的HTML列表 (
      ) 来设计这样的结构,并分配一个ID给
        列表以便为当前列表应用具体的分页样式。看看下面这些教程以作说明。

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

        HTML代码很简单,而且你只需更改

          的ID就可以重复应用这个结构于所有分页样式中(在这个案例中我增加了“pagination-flickr”,如下面加粗的代码)

          复制代码
          代码如下:



          现在,你只需重新定义CSS标签的属性(ul, li, a)。


          Flickr式分页: CSS 代码
          非常简单:
           

          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 结构复制出来并粘贴。你只需更改

            的ID(替换"pagination-digg" 为 "pagination-flickr")


             



            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 结构和前面两个例子一样。你只需要做的是把

              的ID更改为 "pagination-clean":

               


              简洁的分页样式: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;
              }