uicss样式,ui版式设计

j-ui的树怎么加css样式

关于html文档应用css样式有三种形式，内联式，外联式和嵌入式。

在head头部定义style标签可以定义css样式，称为内联式，也可以在标签内部应用style元素定义该标签的css样式称为嵌入式，也可以引用外联样式表作为整个html文档的css样式规划，这种被称为外联式。外联式需要一个独立的.css的文本文件。使用link引用该文档。指的注意的是该文档必须和html文档处于同一级目录下。

相关问答

Q1: 多个UI框架的CSS样式之间起冲突该怎么解决

解决方法有很多，如果可以对html改动的话，就给你需要细化的页面元素加多一个class或者ID就行了，当然这种方法应该不是你想要的。那么接下来是不改变HTML的情况下，直接用css的方法来实现你想要的效果——

方法一 细化选择符

假如全局是这样来定义一个元素的样式的：.abc {background:#000}，同时这个class为abc的元素是隶属于某个元素的，比如下面这样的html代码结构

div class="container"

div class="abc"/div

/div

那么在细化css里面，只需要在.abc前面加多一个父元素的选择符就行了：

.container .abc {background:#fff}

这样.container .abc的优先级就大于了.abc，自然细化css里面的background设置也就不会被全局CSS覆盖了~~

方法二 提升样式的优先级

这种方法个人不太推荐，相对而言会简单粗暴一些。同样是上面的例子，在细化CSS里面，只要在样式后面加一个!important，例如这样：

.abc {background:#fff !improtant;}

这个样式的优先级就会默认提升到顶级，全局样式就无法影响到它了。

方法三 改变两个样式的加载顺序

这种方法比较简单，就是只要把细化css加载在全局css之后就行了，这样后面的样式就会自动覆盖前面的样式。不过如果你的html里面这两个样式表的加载顺序是先细化后全局的话，就要稍微调整一下代码才行。

Q2: 几种常见的css布局方式

四种方式

比如想要做这样一个布局，有哪几种方式。

最简单、最快捷的方式。

element-ui提供的布局容器，el-header头标签，有height属性。el-aside左侧边栏标签，有width属性。el-footer底部标签，有height属性。其他样式可以通过class进行控制。

相对简单的方式。

利用el-col将每行分为24等分的特性，进行布局。其他属性通过class进行控制。

原生css布局的方式，float布局，也是最基础的方式。

将aside向左浮动，固定好宽度。main向右浮动，注意固定好宽度是 100vw - 左侧边栏的宽度 ，注意高度是 100vh - 上下header和footer高度之和 。footer也由于浮动而被挤到到最下面，这边指定float为left、right都是可以的，都可以达到浮动到最下方的效果。

原生css布局的方式，position布局，也是最基础的方式。

sideBar设置好宽度，利用绝对定位将固定在最左边（由于是绝对定位，所以注意已经脱离了文档流）。main设置margin-left为侧边栏宽度，这样就可以使得main不会被遮挡。footer设置为固定定位，bottom为0固定在底部。其他height、width的值也要注意计算哦~