分页样式的书写

上一页 上一页 1 2 3 4 5 ... 50 下一页 2/50页  跳转

HTML

 

 

 

01	<!-- 分页 -->

02	<div class="sn-page">

03	<span href="#" class="sn-page-prev"><i class="sn-arrow-right"></i><span>上一页</span></span>

04	<a href="#" class="sn-page-prev"><i class="sn-arrow-right"></i><span>上一页</span></a>

05	<a href="#" class="sn-page-item">1</a>

06	<a href="#" class="sn-page-item sn-page-current">2</a>

07	<a href="#" class="sn-page-item">3</a>

08	<a href="#" class="sn-page-item">4</a>

09	<a href="#" class="sn-page-item">5</a>

10	<span class="sn-page-ellipsis">...</span>

11	<a href="#" class="sn-page-item">50</a>

12	<a href="#" class="sn-page-next"><span>下一页</span><i class="sn-arrow-left"></i></a>

13	<span class="sn-page-info"><span class="sn-page-bold">2/50</span>页</span>

14	<span class="sn-page-which"><input name="some_name" value="6" type="text"></span>

15	<a class="sn-page-info sn-page-goto" href="#">跳转</a>

16

</div>

CSS

view source

print?

01

/* 分页 */

02	.sn-page,.sn-page input{margin:0;padding:0;color:#666;font: 14px tahoma,arial,\5b8b\4f53;vertical-align:middle;zoom:1;}

03	.sn-page:after{clear:both;content:" ";display:block;font-size:0;height:0;visibility:hidden}

04	.sn-page a,.sn-page span.sn-page-prev,.sn-page span.sn-page-next{text-decoration:none;color:#666;margin:0 3px;display:inline-block;vertical-align:middle;height:30px;line-height:30px;*display:inline;*zoom:1;}

05

.sn-page-prev,.sn-page-next,.sn-page-goto{background-color:#F9F9F9;background:-webkit-gradient(linear,left top,left bottom,from(#ffffff),to(#f4f4f4));background:-moz-linear-gradient(top,#ffffff,#f4f4f4);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f4f4f4');background:-o-linear-gradient(top,#ffffff,#f4f4f4);background:linear-gradient(top,#ffffff,#f4f4f4);padding:0 8px;border:1px solid #d7d7d7;box-shadow:0 0 0 1px #fff inset;}

06	.sn-page-prev:hover,.sn-page-next:hover,.sn-page-goto:hover{border-color:#999;color:#666}

07	.sn-page .sn-page-prev{margin:0 3px 0 0}

08	.sn-page a.sn-page-item{background:#fff;font-weight:700;padding:0 11px;border: 1px solid #d7d7d7;}

09	.sn-page a.sn-page-current{border: 1px solid #fff;}

10	.sn-page a.sn-page-item:hover{color:#f70;}

11	.sn-page a.sn-page-current:hover{color:#666;}

12	a.sn-page-prev:hover,a.sn-page-next:hover{text-decoration:none;color:#666}

13	a.sn-page-prev span,a.sn-page-next span{float:left;cursor:pointer;}

14	.sn-page-prev i,.sn-page-next i{margin-top:9px;}

15	.sn-page-prev i{margin-right:8px;border-right:6px solid #333;}

16	.sn-page-next i{margin-left:8px;border-left:6px solid #333;}

17	.sn-page-info{line-height:24px;margin-right:5px;height:24px}

18	.sn-page-ellipsis{margin:0 5px;line-height:16px;font-weight:700}

19	.sn-page-which input{height:20px;line-height:20px;padding:5px 6px;width:22px;border:1px solid #d7d7d7;}

20	.sn-page-bold{font-weight:700;padding:0 8px}

21	.sn-page span.sn-page-prev,.sn-page span.sn-page-next{color:#b1b1b1;box-shadow:none;background:#fff;border-color:#d7d7d7;filter:none}

22	span.sn-page-prev i{margin-right:8px;border-right:6px solid #b1b1b1;}

23	span.sn-page-next i{margin-left:8px;border-left:6px solid #b1b1b1;}