EasyUI中的dialog修改样式

来源：互联网发布：project是什么软件编辑：程序博客网时间：2024/06/07 16:16

仅作为小白参考用，因为自己百度也百度了相当久，还没百度到。

easyui作为入门轻量级前端框架方便灵活，但是有个缺点就是太丑，所以上个项目要用时，还得自行修改下样式。无需修改原easyui中的任何css，只需在需要修改的页面添加CSS即可，具体CSS如下：

/*dialog整个标题分两部分组成，一个是整个标题头div，另外一个是标题中文字的div*/    .window,.panel-title{   /*修改dialog标题文字的div，dialog本身也继承window和panel组件*/        color:#fff;        border-color:#3366CC;        background-color: #3366CC;        background: -webkit-linear-gradient(top,#3366CC 0,#3366CC 20%);        background: -moz-linear-gradient(top,#3366CC 0,#3366CC 20%);        background: -o-linear-gradient(top,#3366CC 0,#3366CC 20%);        background: linear-gradient(to bottom,#3366CC 0,#3366CC 20%);        background-repeat: repeat-x;        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#3366CC,endColorstr=#3366CC,GradientType=0);    }    .window .window-body{   /*dialog的整个标题头div修改*/        border-color: #FFCCCC;    }    .panel-header,.panel-header-noborder,.window-header{  /*dialog阴影部分颜色修改*/        border-color: #FFCCCC;    }    .window-proxy-mask,    .window-mask {    /*最后一步，将原先的灰色蒙版变的更深更突出dialog的效果，适用于浅色主题*/        background: #000000;    }

阅读全文

0 0