css 分页效果制作

css 分页这是本人在给客户开发网站时要用到了,所以我把它拿出来新手们学学,我们这里只是css分页效果而不是用服务器脚本那种分页了,这种只是做出一种漂亮的效果来哦,下面我们先看看效果图片吧.

就是这种效果,像dz论坛一样的分页效果吧,那我是如何实现的呢,我们就来看看源代码与样式吧.

简单的很,就是定义jogger时面的disabled,与current当前样式的a 标签就OK了.下面我们来看看样式定义代码.

DIV.jogger {
 PADDING-RIGHT: 2px;
 PADDING-LEFT: 2px;
 PADDING-BOTTOM: 2px;
 MARGIN: 7px;
 PADDING-TOP: 2px;
 FONT-FAMILY: "Lucida Sans Unicode", "Lucida Grande", LucidaGrande, "Lucida Sans", Geneva, Verdana, sans-serif;
 text-align: right;
 font-size: 12px;
}
DIV.jogger A {
 PADDING-RIGHT: 0.64em;
 PADDING-LEFT: 0.64em;
 PADDING-BOTTOM: 0.43em;
 MARGIN: 2px;
 COLOR: #fff;
 PADDING-TOP: 0.5em;
 BACKGROUND-COLOR: #333;
 TEXT-DECORATION: none;
 font-size: 12px;
}
DIV.jogger A:hover {
 PADDING-RIGHT: 0.64em;
 PADDING-LEFT: 0.64em;
 PADDING-BOTTOM: 0.43em;
 MARGIN: 2px;
 COLOR: #fff;
 PADDING-TOP: 0.5em;
 BACKGROUND-COLOR: #fc8dbd
}
DIV.jogger A:active {
 PADDING-RIGHT: 0.64em;
 PADDING-LEFT: 0.64em;
 PADDING-BOTTOM: 0.43em;
 MARGIN: 2px;
 COLOR: #fff;
 PADDING-TOP: 0.5em;
 BACKGROUND-COLOR: #333
}
DIV.jogger SPAN.current {
 PADDING-RIGHT: 0.64em;
 PADDING-LEFT: 0.64em;
 PADDING-BOTTOM: 0.43em;
 MARGIN: 2px;
 COLOR: #fff;
 PADDING-TOP: 0.5em;
 BACKGROUND-COLOR: #fc8dbd
}
DIV.jogger SPAN.disabled {
 DISPLAY: none
}

好了就这么简单了,本站原创转请注明来自:  www.111com.net/cssdiv/css.html