全网整合营销服务商

电脑端+手机端+微信端+网站SEO优化=数据同步管理

免费咨询热线:13962806263

分享两个织梦分页样式

发布时间:2019-09-12 14:51  作者:安讯信息  点击数:
织梦分页样式代码经常用到,今天整理下,便于以后随用随时复制。

分页模板上复制粘贴以下代码:

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

样式一的样式表代码:



/*pages*/
.pagination-wrapper {
clear: both;
padding: 1em 0 2em 0;
text-align: center;
}
 
.pagination {
display: inline-block;
*display: inline;
*zoom: 1;
font-size: 12px;
border-radius: 3px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
 
.pagination li {
list-style: none;
display: inline;
float: left;
line-height: 1em;
text-decoration: none;
border: 1px solid #ddd;
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-left-width: 1px;
border-radius: 3px 0 0 3px;
}
 
.pagination li:last-child {
border-radius: 0 3px 3px 0;
}
 
.pagination .pageinfo {
color: #444;
}
 
样式二的样式表代码:



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

您的项目需求

*请认真填写需求信息,我们会在24小时内与您取得联系。