网站模板中心

您现在的位置:首页>>织梦大学>>安装使用

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

来源: 编辑:admin 发布时间:2019-11-07热度:56 ℃
分页样式虽然很短,但是复用率非常高,早就想过整理下这个东西,一直拖着没弄,今天开个头,以后用起来也方便点。 div class=pagination-wrapper div class=pagination {dede:pagelist listsize=5 listi...
分页样式虽然很短,但是复用率非常高,早就想过整理下这个东西,一直拖着没弄,今天开个头,以后用起来也方便点。

样式一

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;}

Pbootcms问题解决

请点击在线联系我们【点击咨询解决问题】   如果您有任何Pbootcms问题,我们将免费为您写解决教程!

    PB模板网:承接仿站业务,价格200元起!