织梦模板分页样式大全分页list标签CSS

分页样式虽然很短，但是复用率***高，早就想过整理下这个东西，一直拖着没弄，今天开个头，以后用起来也方便点。

<div class="pagination-wrapper">
    <div class="pagination"> 
    {dede:pagelist listsize='5' listitem='info,index,end,pre,next,pageno'/} 
    </div>
</div>

样式一

pagelist1

.pagination-wrapper{clear:both;padding:1em 0 2em 0;text-align:center;}
.pagination{display:inline-block;border-radius:3px;box-shadow:0 1px 2px rgba(0,0,0,.05);font-size:12px;}
.pagination li{float:left;display:inline;border:1px solid #ddd;list-style:none;text-decoration:none;line-height:1em;border-left-width:0;}
.pagination li a{display:inline-block;padding:.5em .8em;background-color:#f9f9f9;color:#999;}
.pagination li a:link{background:#fff;color:#4c78a5;}
.pagination li a:hover{text-decoration:none;}
.pagination li a:link:hover{color:#000;}
.pagination li.thisclass{background-color:#f9f9f9;color:#999;}
.pagination li:first-child{border-radius:3px 0 0 3px;border-left-width:1px;}
.pagination li:last-child{border-radius:0 3px 3px 0;}
.pagination .pageinfo{color:#444;}

样式二

pagelist2

.pagination-wrapper{margin:20px 0;}
.pagination{height:34px;text-align:center;}
.pagination li{display:inline-block;margin-right:5px;height:34px;}
.pagination li a{float:left;display:block;padding:0 12px;height:32px;border:1px solid #ddd;color:#555;text-decoration:none;font-size:16px;line-height:32px;}
.pagination li a:hover{background:#f5f5f5;color:#09f;}
.pagination li.thisclass{background:#09f;color:#fff;}
.pagination li.thisclass a,.pagination li.thisclass a:hover{border-color:#09f;background:0 0;color:#fff;cursor:default;}