如何制作CSS分页效果？对于这个问题你是不是不了解呢？下面文章中是爱站小编为大家整理的CSS分页效果制作实例教程，希望能给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)
典型的分页结构
下图显示的是一个典型分页结构
一般你可以看出有四个主要元素：
-前一页/后一页 按钮（不可用）
-当前页
-标准的页面选择器
-前一页/后一页 按钮（可用）
你可以使用包含
Flickr式的分页：HTML 代码
想象你要设计的Flickr式分页样式就像下面这样：
HTML代码很简单，而且你只需更改
的ID就可以重复应用这个结构于所有分页样式中（在这个案例中我增加了“pagination-flickr”，如下面加粗的代码）
代码如下:
- «Previous
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- Next »
现在，你只需重新定义CSS标签的属性(ul, li, a)。
Flickr式分页: CSS 代码
非常简单：
border
:
0
;
margin
:
0
;
padding
:
0
;
}
#pagination-flickr li{
:
0
;
margin
:
0
;
padding
:
0
;
font-size
:
11px
;
list-style
:
none
;
}
#pagination-flickr a{
:
solid 1px #DDDDDD
;
margin-right
:
2px
;
}
#pagination-flickr .previous-off,
#pagination-flickr .next-off {
:
#666666
;
display
:
block
;
float
:
left
;
font-weight
:
bold
;
padding
:
3px 4px
;
}
#pagination-flickr .next a,
#pagination-flickr .previous a {
:
bold
;
border
:
solid 1px #FFFFFF
;
}
#pagination-flickr .active{
:
#ff0084
;
font-weight
:
bold
;
display
:
block
;
float
:
left
;
padding
:
4px 6px
;
}
#pagination-flickr a:link,
#pagination-flickr a:visited {
:
#0063e3
;
display
:
block
;
float
:
left
;
padding
:
3px 6px
;
text-decoration
:
none
;
}
#pagination-flickr a:hover{
:
solid 1px #666666
;
}
Digg式的分页：HTML 代码
好了，现在你想设计的Digg式的分页样式就像：
把上一个教程中的HTML 结构复制出来并粘贴。你只需更改
的ID（替换”pagination-digg” 为 “pagination-flickr“）
<ul id="
“
pagination-digg
“
>
<li class=" “active”>1
<li class=" “next”>“?page=2”>Next »
Digg式分页: CSS 代码
CSS代码与前面Flickr式分页的例子非常相似。你只需修改一些属性，并把#pagination-flikr更改为 #pagination-digg，CSS的分页元素不需修改：
border
:
0
;
margin
:
0
;
padding
:
0
;
}
#pagination-digg li{
:
0
;
margin
:
0
;
padding
:
0
;
font-size
:
11px
;
list-style
:
none
;
margin-right
:
2px
;
}
#pagination-
digg
a{
:
solid 1px #9aafe5
margin-right
:
2px
;
}
#pagination-
digg
.previous-off,
#pagination-
digg
.next-off {
:
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 {
:
bold
;
}
#pagination-
digg
.active{
:
#2e6ab1
;
color
:
#FFFFFF
;
font-weight
:
bold
;
display
:
block
;
float
:
left
;
padding
:
4px 6px
;
}
#pagination-
digg
a:link,
#pagination-
digg
a:visited {
:
#0e509e
display
:
block
;
float
:
left
;
padding
:
3px 6px
;
text-decoration
:
none
;
}
#pagination-
digg
a:hover{
:
solid 1px #0e509e
}
简洁的分页样式：HTML 代码
如果你喜欢小巧，简洁的设计，那么这个例子将告诉你如何设计出如下图所示简洁的分页样式：
HTML 结构和前面两个例子一样。你只需要做的是把
的ID更改为 “pagination-clean“:
<ul id="
“
pagination-clean
“
>
<li class=" “active”>1
<li class=" “next”>“?page=2”>Next »
简洁的分页样式：CSS代码
这个分页样式的CSS代码如下：
border
:
0
;
margin
:
0
;
padding
:
0
;
}
#pagination-clean li{
:
0
;
margin
:
0
;
padding
:
0
;
font-size
:
11px
;
list-style
:
none
;
}
#pagination-clean li, #pagination-
clean
a{
:
solid 1px #DEDEDE
margin-right
:
2px
;
}
#pagination-
clean
.previous-off,
#pagination-
clean
.next-off {
:
#888888
display
:
block
;
float
:
left
;
font-weight
:
bold
;
padding
:
3px 4px
;
}
#pagination-
clean
.next a,
#pagination-
clean
.previous a {
:
bold
;
border
:
solid 1px #FFFFFF
;
}
#pagination-
clean
.active{
:
#00000
font-weight
:
bold
;
display
:
block
;
float
:
left
;
padding
:
4px 6px
;
}
#pagination-
clean
a:link,
#pagination-
clean
a:visited {
:
#0033CC
display
:
block
;
float
:
left
;
padding
:
3px 6px
;
text-decoration
:
none
;
}
#pagination-
clean
a:hover{
:
none
;
}
以上就是如何制作CSS分页效果的内容，本文介绍的是如何为搜索结果或更长记录列表设计分页。为大家说明如何用少量的HTML和CSS代码设计出完美的分页样式。