常用的CSS框架（上）

常用的CSS框架

之前在写自己的个人网站的时候，由于自己Web前端不是特别好，于是就去找相关的CSS框架来搭建页面了。

找到以下这么一篇文章(列出了很多常用的CSS框架)：

• http://w3schools.wang/report/top-UI-open-source-framework-summary.html
  

1. Bootstrap
   
2. Semantic-ui
   
3. Foundation
   
4. Materialize
   
5. Material-ui
   
6. Phantomjs
   
7. Pure
   
8. Flat-ui
   
9. Jquery-ui
   
10. React-bootstrap
    
11. Uikit
    
12. Metro-ui-css
    
13. Iview
    
14. Layui
    
15. Mui
    
16. Frozenui
    
17. AlloyUI
    
18. W3.CSS
    

本篇主要是记录我用过的CSS框架，并把之前写过的笔记进行整合一下。当然是不能面面俱到的…

jquery-easyUI

其实这个已经是比较早的了，只是之前学过了一点，做过笔记才拿到这里来。毕竟可能以后还是会用到的?

什么是easyUI

我们可以看官方对easyUI的介绍：

easyUI就是一个在Jquery的基础上封装了一些组件….我们在编写页面的时候，就可以直接使用这些组件…非常方便…easyUI多用于在后台的页面上…

在学习easyUI之前，我已经学过了bootstrap这么一个前端的框架了…因此学习easyUI并不困难….大多情况下，我们只要查询文档就可以找到对应的答案了。

easyUI快速入门

首先我们得去下载easyUI的资料…

然后在我们把对应的文件导入进去项目中，如下图：

这里写图片描述

在html文件的body标签内，写上如下的代码：

<!-- 
        第一：写一个普通div标签
        第二：提倡为div标签取一个id属性，将来用jquery好定位
        第三：为普通div标签添加easyui组件的样式
              所有的easyui组件的样式均按如下格式设置：
              easyui-组件名
        第四：如果要用easyui组件自身的属性时，必须在普通标签上书写data-options属性名,
              内容为，key:value,key:value,如果value是string类型加引号，外面双引号，
              则里面单引号      
        注意：要在普通标签中书写data-options属性的前提是：在普通标签上加class="easyui-组件名" 
              属性值大小写均可     
    -->
    <div 
        id="xx" 
        class="easyui-panel" 
        style="width:500px;height:300px;padding:15px"
        title="我的面板"
        data-options="iconCls:'icon-save',collapsible:true,minimizable:false,maximizable:true">
        这是我的第一个EasyUI程序
    </div>

效果：

                                                         这里写图片描述

关于样式的属性我们都会在data-options这个属性上设置的。