分享几款115cms样式分页

  • 梦雨
  • 0
  • 77
  • 01月13日 17:08
  • 01月13日 17:08

css代码一

.pagination{margin:0;padding:0 10px;margin-bottom:30px;text-align:center;font-size:12px;display:block;border-radius:0}
.pagination ul{display:inline-block !important;*display:inline;*zoom:1;margin-left:0;margin-bottom:0;padding:0}
.pagination ul > li{display:inline}
.pagination ul > li > a,.pagination ul > li > span{margin:0 2px;float:left;padding:5px 12px;background-color:#ddd;color:#666;border-radius:2px;opacity:.88}
.pagination ul > li > a:hover,.pagination ul > li > a:focus{opacity:1}
.pagination ul > .active > a,.pagination ul > .active > span{background-color:#ff5f33;color:#fff}
.pagination ul > .active > a,.pagination ul > .active > span{cursor:default}
.pagination ul > li > span,.pagination ul > .disabled > span,.pagination ul > .disabled > a,.pagination ul > .disabled > a:hover,.pagination ul > .disabled > a:focus{color:#999;background-color:transparent;cursor:default}
.pagination-trigger{padding:10px 15px;text-align:center;margin-bottom:20px}
.pagination-trigger a{margin:0 5px;display:inline-block;padding:8px 25px;text-decoration:none;background-color:#ff5f33;color:#fff !important;border-radius:2px;opacity:.88}
.pagination-trigger a:hover{opacity:1}
.pagination-loading{font-size:16px;text-align:center;color:#AAB2BD;padding:10px 15px;margin-bottom:20px} #fenlei .layui-colorpicker-trigger-span .layui-icon{margin-left: -5px;}


css代码二

.pagination{display:inline-block;padding-left:0;border-radius:4px;float:right}
.pagination li{display:inline}
.pagination li a,.pagination li span{position:relative;float:left;padding:6px 12px;line-height:1.42857143;color:#393D49;background:#fff;margin:0 0 0 8px;border:1px solid #eee}
.pagination li a:hover{color:#fff;background:#1E9FFF}
.pagination .active span{background:#1E9FFF;color:#fff}
.pagination .disabled{display:none}


css代码三

.pagination{display:inline-block;padding-left:0;border-radius:4px;float:right;margin-bottom:30px;}
.pagination li{display:inline}
.pagination li a,.pagination li span{position:relative;float:left;padding:6px 12px;line-height:1.42857143;color:#393D49;background: #3c3c3c;margin:0 0 0 8px;border:1px solid #eee;border-radius: 50px;box-shadow: 0 0 10px #a5a1a1;color: #fff;}
.pagination li a:hover{color:#fff;background:#673AB7}
.pagination .active span{background: #FF5722;color:#fff;border-radius: 50px;box-shadow: 0 0 10px #8c8787;}
.pagination .disabled{display:none}


只显示上一页下一页的代码 适合手机版本使用

.pagination{display:inline-block;padding-left:0;border-radius:4px;text-align:center;width: 100%;}
.pagination li{display:none}
.pagination li a,.pagination li span{position:relative;/* float:left; */padding: 8px 50px;line-height: 30px;height: 45px;color:#393D49;background:#fff;margin: 0 0 5px 2px;border:1px solid #eee;/* width: 50%; */border-radius: 10px;font-size: 1rem;}
.pagination li:nth-child(1){display:inline;}
.pagination li:last-child{display:inline}



评论

0 条评论

    你来消灭 零 评论