css和前端UI框架设计ElementUI

  css的核心是box model, 也就是盒子模。可以简单理解为三个框,包含一个content,最外边的margin和内层的conent比较特殊。

  如图所示,可以清晰的看到其四部分。其margin(外边距), padding(内边距)都没有颜色信息,只有边距大小。background-color会包含padding和content,width限定的是content大小。

  css还有一个核心的概念就是选择器,比如我们常用的class(符号.),id(符号#)等属性,都是用于选择,通常一般会用class,应为id只能关联一个样式,class可以有多个。

  导入css文件的流行方式:

<style>
    @import url(style.css);
</style>

  

  UI框架的基础就是CSS和文件,比如优秀的ElementUI。最有效,简单的学习方法就是从一个简单的组件开始,然后以点带面,学会其他组件的使用。

  比如分页,这个是很多网也都要有的界面。自己手写分页的组件就太难了,还是用组件块。分页组件的文档地址:https://element.eleme.cn/2.0/#/zh-CN/component/pagination。首先,就像我们买衣服一样,我们喜欢什么样的样式,就可以选取,就是复制下面的模板代码。但是我们还得更加我们的数据,配置相关的参数。然后我们就可以使用了。

ElementUI文档地址:https://element.eleme.cn/2.0

参考文档:https://www.cnblogs.com/niujifei/p/11193140.html

原文地址:https://www.cnblogs.com/Robin008/p/13557982.html