发表于: 2021-04-07 23:50:33
1 992
今天完成的事情:
继续任务8首页
!important是CSS1就定义的语法,作用是提高指定样式规则的应用优先权,语法格式{ sRule!important },即写在定义的最后面,并且在分号之前,比如:
{font-color: red !important;}
由于IE并不支持该语法,所以我们可以利用这一点解决部分CSS的浏览器兼容问题。
在页面设计中,需要将布局定义相关部分改为:{margin-right: -2px !important margin-right: 0px;},这样Firefox仍然使用前一部分的margin定义,而IE则使用后一部分margin定义,立即试用,果然在IE下浏览正常了。
总结
由于css是采用越接近越优先的原则,同一个定义,比如{margin: 2px;margin: 0px;},在IE和firefox中就会解释成{margin: 0px;};而使用了!important之后,!important对firefox有效,对IE无效,故{margin: 2px !important; margin: 0px;},在firefox中解释为{margin:2px;},在IE中解释为{margin:2px;}
!important用来让firefox支持前面的定义,忽略后面的定义
!important对IE无效,IE依然会采用后面的定义,即后面的定义有效,前面的无效。
遇到一个问题给li标签添加<li class="active">没有效果
先往下做轮播图直接套样式就好了
内容部分使用栅格系统图标不整齐 因为几个图标的高度不一样,我使用 margin来调整图标
调整好
发现添加文字和不添加文字的圆形盒子变形了
使用min-width解决圆形盒子变形的问题
使用flex来垂直居中,发现p有默认的外边距
使用
margin-bottom: 0 !important;
来去除p标签的默认外边距
明天计划的事情:请假三天,回来继续搞任务八
遇到的问题:给li标签添加<li class="active">没有效果 还没有找到解决办法
收获:bootstrap的初步使用
评论