css 分页这是本人在给客户开发网站时要用到了,所以我把它拿出来新手们学学,我们这里只是css分页效果而不是用服务器脚本那种分页了,这种只是做出一种漂亮的效果来哦,下面我们先看看效果图片吧.
就是这种效果,像dz论坛一样的分页效果吧,那我是如何实现的呢,我们就来看看源代码与样式吧.
<div class="jogger">
<span class="disabled"> < </span>
<span class="current">1</span>
<a href="#?page=2">2</a>
<a href="#?page=3">3</a>
<a href="#?page=4">4</a>
<a href="#?page=5">5</a>
<a href="#?page=6">6</a>
<a href="#?page=7">7</a>...
<a href="#?page=199">199</a>
<a href="#?page=200">200</a>
<a href="#?page=2"> > </a>
</div>
简单的很,就是定义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.111cn.net/cssdiv/css.html
