分页样式虽然很短,但是重用率很高。我早就想整理这个东西了,但是一直没有做。今天是大的,然后用起来方便。
模板中的分页查询一部分页一部分源代码:复制代码编码以下:
<divclass="pagination-wrapper">
<divclass="pagination">
{dede:pagelistlistsize='5'listitem='info,index,end,pre,next,pageno'/}
</div>
</div>
款式一
复制代码编码以下:
/*pages*/
.pagination-wrapper{
clear:both;
padding:1em02em0;
text-align:center;
}
.pagination{
display:inline-block;
*display:inline;
*zoom:1;
font-size:12px;
border-radius:3px;
box-shadow:01px2pxrgba(0,0,0,0.05);
}
.paginationli{
list-style:none;
display:inline;
float:left;
line-height:1em;
text-decoration:none;
border:1pxsolid#ddd;
border-left-width:0;
}
.paginationlia{
display:inline-block;
padding:.5em.8em;
background-color:#f9f9f9;
color:#999;
}
.paginationlia:link{
background:#fff;
color:#5C78A5;
}
.paginationlia:hover{
text-decoration:none;
}
.paginationlia:link:hover{
color:#000;
}
.paginationli.thisclass{
background-color:#f9f9f9;
color:#999;
}
.paginationli:first-child{
border-left-width:1px;
border-radius:3px003px;
}
.paginationli:last-child{
border-radius:03px3px0;
}
.pagination.pageinfo{
color:#444;
}
款式二
复制代码编码以下:
/*pages*/
.pagination-wrapper{
margin:20px0;
}
.pagination{
height:34px;
text-align:center;
}
.paginationli{
display:inline-block;
height:34px;
margin-right:5px;
}
.paginationlia{
float:left;
display:block;
height:32px;
line-height:32px;
padding:012px;
font-size:16px;
border:1pxsolid#dddddd;
color:#555555;
text-decoration:none;
}
.paginationlia:hover{
background:#f5f5f5;
color:#0099ff;
}
.paginationli.thisclass{
background:#09f;
color:#fff;
}
.paginationli.thisclassa,.paginationli.thisclassa:hover{
background:transparent;
border-color:#09f;
color:#fff;
cursor:default;
}
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)