layui分页样式改变

layui分页的原始样式：

修改成如下样式：

新增css代码如下：（pageBox为放置分页的容器id）

/*修改layui分页的样式*/
#pageBox .layui-laypage a{
color: #94999F;
font-size: 12px;
}
#pageBox .layui-laypage em{
font-size: 12px;
}

.layui-laypage .layui-laypage-spr{
   margin-right: 5px;
}
#pageBox .layui-laypage a{
   margin-right: 5px;
}
#pageBox .layui-laypage-curr{
   margin-right: 5px;
}
.layui-laypage-prev,.layui-laypage-next{
   font-family: "fontello";
}
#pageBox .layui-laypage .layui-laypage-curr .layui-laypage-em{
   background-color: #1FB1EA;
}

#pageBox .layui-laypage a,#pageBox .layui-laypage span:not(.layui-laypage-skip){
   box-sizing: border-box;
   padding: 4px 9px;
height: 26px;
width: 26px;
line-height: 1.42857143;
}
#pageBox .layui-laypage .layui-laypage-count{
   width: auto!important;
   float: none;
   color: #94999F;
font-size: 12px;
}
#pageBox .layui-laypage-btn{
   background-color: #1FB1EA;
   color: #FFFFFF;
   width: 50px;
height: 26px;
padding: 1px 5px;
line-height: 1.5;
}

#pageBox .layui-laypage a,#pageBox .layui-laypage-spr{
   border: 0px;
}
#pageBox a.layui-laypage-prev,#pageBox a.layui-laypage-next{
   border: 1px solid #ddd;
}
#pageBox>.layui-laypage>a:hover{
   color: #fff;
background-color: #58CAF4;
border-color: #58CAF4;
}
#pageBox a.layui-laypage-prev:hover,#pageBox a.layui-laypage-next:hover{
   color: #94999F;
   background-color: #fff;
border-color: #ddd;
}
#pageBox .layui-laypage-curr em:not(.layui-laypage-em){
   line-height: 1.328571;
}
#pageBox .layui-laypage-btn:hover{
   color: #656A71;
   border-color: #DEE1E3;
background-color: #fff;
}
</style>

js的设置：

prev: "",//是字体图标的方框
next: "",
layout: ['count', 'prev', 'page', 'next','skip'],

layui分页样式改变相关推荐

layui分页动态改变分页数
function flushPage(count,diarys){layui.use(['laypage', 'layer'], function(){var laypage = layui.layp ...
php分页样式,thinkphp分页样式修改
用tp框架内置的分页很容易实现分页功能. 首先是实例化数据表,然后统计数据,最后进行实例化分页类并按自己需要显示. 但是内置的分页样式可能不喜欢,感觉不是那么友好.所有可以个性化修改一下. 手册也提供 ...
layui分页和模板引擎
模板引擎 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...
html中单选按钮设置监听事件,浅谈监听单选框radio改变事件(和layui中单选按钮改变事件)，单选框radio...
浅谈监听单选框radio改变事件(和layui中单选按钮改变事件),单选框radio 若是只引用jquery的话,监听单选按钮改变事件如下: 男女 $(document).ready(functio ...
layui分页功能在vue写的H5中实现
layui分页原文档:https://www.layui.site/doc/modules/laypage.html 文档介绍的比较简单,实际用起来我走了很多弯路: 1.count总数从接口返回,需要 ...
GridView自定义分页样式（上一页，下一页，到第几页）（新手教程）
今天要为网站做一个文章列表,发现GridView的分页样式很难看,于是结合网上的例子,自己做了一个.不是很美观,不过还是很实用的,先看下效果吧,如图(1).演示地址http://www.veryam. ...
tp5.0分页样式调控
基础的分页调用 /*** 控制器部分代码*///实例化模型$areasModel=new Areas();//分页数据集$listarea=$areasModel->paginate($page ...
帝国CMS列表分页样式(三)[!--show.listpage--]
帝国CMS,列表,模版,分页,样式,[!--show.listpage--] 我们在自己设计网站列表页面或者仿别人的列表页面的时候可能会感觉帝国cms默认的列表页分页样式不是很好看,不过经过我最记得使 ...
Laravel自定义分页样式
Laravel 的分页组件默认为 Bootstrap 的分页样式,但如果我们用的并不是 Bootstrap 或者说分页的 HTML结构不一样,这时我们需要自定义分页.其实 Laravel 的分页组件是 ...
java实现layui分页_基于LayUI分页和LayUI laypage分页的使用示例
本文介绍了LayUI分页,LayUI动态分页,LayUI laypage分页,LayUI laypage刷新当前页,分享给大家,具体如下: 效果图: 一.引用js依赖主要是jquery-1.11. ...

layui分页样式改变

layui分页样式改变相关推荐

最新文章

热门文章