Top

分页

所有分页元素都可以使用左侧导航的所有class类进行细节样式的调整

(1) <li>标签分页

有间距

 
HTML代码:

<ul class="dsure-page dsure-page-s1">
    <li class="prev"><a href="#">&#171;</a></li>
    <li><a href="#">7</a></li>
    <li><a href="#">8</a></li>
    <li><b>3</b></li>
    <li><a href="#">10</a></li>
    <li><a href="#">11</a></li>
    <li><a href="#">12</a></li>
    <li class="next"><a href="#">&#187;</a></li>
</ul>

<ul class="dsure-page dsure-page-s1">
    <li><a href="#" class="prev">上一页</a></li>
    <li><a href="#">233</a></li>
    <li><a href="#">234</a></li>
    <li><b>235</b></li>
    <li><a href="#">236</a></li>
    <li><a href="#"  class="next">下一页</a></li>
</ul>

<ul class="dsure-page dsure-page-s2">
    <li><a class="prev" href="#">上一页</a></li>
    <li><a href="#">7</a></li>
    <li><a href="#">8</a></li>
    <li><b>9</b></li>
    <li><a href="#">10</a></li>
    <li><a href="#">11</a></li>
    <li><a href="#">12</a></li>
    <li><a class="next" href="#">下一页</a></li>
</ul>

无间距

 
HTML代码:

<ul class="dsure-page dsure-page-nospace">
    <li class="prev"><a href="#">&#171;</a></li>
    <li><a href="#">7</a></li>
    <li><a href="#">8</a></li>
    <li><b>3</b></li>
    <li><a href="#">10</a></li>
    <li><a href="#">11</a></li>
    <li><a href="#">12</a></li>
    <li class="next"><a href="#">&#187;</a></li>
</ul>

(2) 独立<a>标签分页

有间距

7 8 3 10 11 12
223 224 225 226 
 
HTML代码:

<div class="dsure-page dsure-page-a dsure-page-s1">
    <a class="prev" href="#">&#171;</a>
    <a href="#">7</a>
    <a href="#">8</a>
    <b>3</b>
    <a href="#">10</a>
    <a href="#">11</a>
    <a href="#">12</a>
    <a class="next" href="#">&#187;</a>
</div>

<div class="dsure-page dsure-page-a dsure-page-s2">
    <a class="prev" href="#">上一页</a>
    <a href="#">223</a>
    <b>224</b>
    <a href="#">225</a>
    <a href="#">226</a>
    <a class="next" href="#">下一页</a>
</div>

无间距

7 8 3 10 11 12 
 
HTML代码:

<div class="dsure-page dsure-page-a dsure-page-nospace">
    <a class="prev" href="#">&#171;</a>
    <a href="#">7</a>
    <a href="#">8</a>
    <b>3</b>
    <a href="#">10</a>
    <a href="#">11</a>
    <a href="#">12</a>
    <a class="next" href="#">&#187;</a>
</div>

(3) 自定义分页样式

如果您想要自定义分页，请自己将以下的代码拷贝到新的样式文件中，修改{ ... }内的内容，增加或者修改现有的样式,不要删除原有的代码 

 
CSS代码:      
            

.dsure-page a,
.dsure-page b{
	padding:.4em .6em;/*注意,此样式元素的padding值不能小于给定的默认值，否则会出现间距bug*/
}

.dsure-page.dsure-page-a a,.dsure-page.dsure-page-a b{
	padding:.4em .6em;/*注意,此样式元素的padding值不能小于给定的默认值，否则会出现间距bug*/
}
.dsure-page a:hover{
	text-decoration:none;	
}
.dsure-page .prev a,
.dsure-page .next a,
.dsure-page a.prev,
.dsure-page a.next {
	
}


.dsure-page a:focus,
.dsure-page a:active,
.dsure-page b{
	border:1px solid #BFBFBF; 
	font-weight:bold; 
	background:#d7d7d7;
	-mo-z-box-shadow:0 1px 5px #b2b2b2 inset,0px 1px 1px #fff;
	-web-kit-box-shadow:0 1px 5px #b2b2b2 inset,0px 1px 1px #fff;
	box-shadow:0 2px 2px #b8b8b8 inset,0px 1px 1px #fff;
}

.dsure-page.dsure-page-nospace a{
	background:#EBEBEB;
}
.dsure-page.dsure-page-nospace a:hover{
	background:#F7F7F7;
	border:none
}
.dsure-page.dsure-page-nospace a:focus,
.dsure-page.dsure-page-nospace a:active,
.dsure-page.dsure-page-nospace b{
	border:none
}