仅作为小白参考用,因为自己百度也百度了相当久,还没百度到。
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 发布