扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
关于html文档应用css样式有三种形式,内联式,外联式和嵌入式。
让客户满意是我们工作的目标,不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户,将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴,公司提供的服务项目有:域名注册、网页空间、营销软件、网站建设、西吉网站维护、网站推广。
在head头部定义style标签可以定义css样式,称为内联式,也可以在标签内部应用style元素定义该标签的css样式称为嵌入式,也可以引用外联样式表作为整个html文档的css样式规划,这种被称为外联式。外联式需要一个独立的.css的文本文件。使用link引用该文档。指的注意的是该文档必须和html文档处于同一级目录下。
解决方法有很多,如果可以对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里面这两个样式表的加载顺序是先细化后全局的话,就要稍微调整一下代码才行。
四种方式
比如想要做这样一个布局,有哪几种方式。
最简单、最快捷的方式。
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的值也要注意计算哦~
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流