发表于： 2019-10-26 21:56:59
1 928
今日完成:
开始任务12
遇到问题:
样式不显示
原因:在更改完混合宏,底部样式没有实时更改,less的延迟性是先完全读取less,
再编译为css,底部有错误,所以没有显示
解决:都实时更改
遇到问题:
广告页面,不显示代码如下:
/*横幅广告*/
.banner{
background: url("4.png") no-repeat;/*图片不重复*/
height: 100%;
width: 100%;
overflow: hidden;
background-size: cover;
}
原因:
1.图片设置成背景,占用的自己的宽度,或者父元素的高度,但这里父元素还有本身都没有
设置高度,所以无法显示
2.高度设置100%,为什么没有显示图片本身的高度,原因同1,设置为背景,
显示为图片原本高度,是用的img标签,图片为内容,要在图片基础上,在上面添加文字,
需要用到绝对定位,显示为背景,背景不是内容,可以直接添加内容,但是背景高度要指定.
解决:
为图片背景设置具体高度
遇到问题;
插入背景显示不完整
代码:
.banner{
background: url("4.png") no-repeat;/*图片不重复*/
height: 240px;
width: 100%;
background-size:100%;
}
解决:在background-size后面在再加一个100%,background-size:100%就是图片整个宽度自动填充整个宽度,
background-size:100% 100%后一个是高度,填充整个高度(纵向压缩或拉伸,与宽度无关,宽度同样)
不需要no-repeat和width
填充高度代码:
.banner{
background: url("4.png");
height: 240px;
background-size:100% 100%;
}
显示:
遇到问题:不习惯用less反而更慢,对我来说,这就不叫语法糖了
收获:感觉如果less习惯熟练,有点帮助吧
明日计划:task13
返回列表
评论