css 实现app图标样式_都说EasyUI框架的界面不够漂亮？稍有一点CSS知识就可以改造它...

EasyUI虽然是一款非常优秀的企业级及网站后台开发框架，但其太过朴素的UI界面一直饱受诟病。其实，只要用户稍微具备一些最基本的CSS样式知识，就可以很轻松的改变它的颜值。

本文以最常用也是最基本的panel组件为例，简要探讨一下如何进行改造。由于头条号文章不允许插入外链，请点击本文最后的“了解更多”直接体验实例效果。

panel组件与外观样式相关的属性

本组件与外观样式相关的属性主要是以下6个：

其中，border属性用于决定是否显示边框；另外5个都是指定样式的：

● iconCls

该属性用来指定一个图标显示在面板头部的左侧。注意，这里指定的并不是一个图标文件的名称，而是在页面中引用的icon.css样式文件所定义的类名称。

● cls、headerCls、bodyCls和style

前三个属性都是指定一个具体的class类样式名称，分别对面板整体(含边框)、面板头部或面板主体内容进行样式的调整。

假如我们在页面的head中已经引用了EasyUI的配色样式文件color.css，那么前三个属性就可以直接指定c1-c8样式中的一种。例如：

由于同时设置了cls和headCls属性，则cls样式优先，面板标题颜色并不会使用headCls指定的样式。如果没有设置cls，则headerCls样式有效。如下图：

当然，我们也可以自定义class样式，然后在上面三个属性中引用。例如，在页面中添加一个class名称为ct的样式：

如要让面板中的所有内容都水平居中，可以设置cls属性：

运行效果如下图：

如果你觉得这种处理方法有点麻烦，还可直接使用panel组件中自带的style样式属性。例如，以下代码的运行效果与上图相同：

请注意，style的属性值是一个对象，样式中的键值对可以有多个，不同键值对之间用半角逗号分开。其中，键名的引号可用可不用，但对于以“-”连接的键名则必须使用。再如：

运行效果如下图：

其实，这里的style属性写法，遵循的就是jQuery中的CSS方法规则。

演示实例

为了让大家更加直观的看到改变后的效果，在文末的“了解更多”中链接到了一个实例。

在这个实例中，初始生成的面板是这样的，确实比较呆板：

可是，如果你在这个实例中点击“加上图标”、“修改标题颜色”、“改为圆角带阴影”等按钮之后，面板就会变成这个样子：

要实现这样的效果，其实使用的就是前面所讲到的cls、style等属性。当然，前提是，你要具备一定的css样式基础知识。关于css，这里有个系列专栏向大家推荐一下，近期将陆续更新完毕(包含CSS选择器、CSS基本样式设置等多个专栏)：