仅作为小白参考用,因为自己百度也百度了相当久,还没百度到。 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;
}
EasyUI中的dialog修改样式
最新推荐文章于 2023-05-09 08:42:16 发布