发表于： 2019-11-11 18:11:14
1 879
今日完成
首页算是完成,添加细节:
头部尾部添加下划线
遇到问题:
描述:
下拉菜单不二次点击消失的情况下,直接放大视口宽度,下拉菜单不会消失
解决:
1.直接添加代码:
@media screen and (min-width: 768px){
.ul-box-2{
display: none;
}
}
使下拉框在一定高度后隐藏
无效
原因:应该是样式覆盖,input点击出现的属性覆盖
2.问题拆分
1.下拉菜单超过一定宽度要隐藏
2.下拉菜单在一定宽度内,默认隐藏,点击生效
解决:
把点击生效放在,媒体查询生效的宽度内
代码:
@media screen and (max-width: 768px){
.ul-box-2{
.flex;
display: none;
flex-direction:column;
list-style-type: none;/*去除li前面的圆点样式*/
background: @c-1;
.box-R-2{
.box-R-1;
margin:0;
padding:4px 0;
border-bottom:1px solid @c-1;
}
.box-R-2:hover{
border-bottom:1px solid white;
}
}
input:checked ~.ul-box-2{
display:flex;
}
}
生效
含义是在在于一定宽度时点击生效,把点击生效局限在了"一定宽度"这个前提下,超过失效,就会隐藏
遇到问题:
在下拉菜单点击生效的前提下,扩大宽度,下拉菜单隐藏,但是,在宽度缩小之后
出现的下拉菜单仍然是点击生效状态,并没有回到起始状态
刷新后,恢复到未选中状态
未解决:
1.css中好像无法实现
2.正常状态下也无法从电脑端,跳到手机端
遇到问题;
justify-content: space-between;
无法生效
原因:模拟的col只是弹性元素,不是弹性盒子
无法赋予其子元素自身的高度
并且,在这种情况下,其子元素设置弹性盒子,只有块级元素的继承宽度的属性,高度自适应,
无法继承
解决:为模拟的col添加flex属性,让其中的子元素变为它的弹性元素,可以继承它的高度
ps;弹性元素继承父元素弹性盒子的属性是;
align-items属性的默认属性;stretch
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
遇到问题:
图片拉伸
原因:
因为主轴变成垂直方向,交叉轴就变成水平方向,
交叉轴的默认样式
align-items属性的默认属性;stretch
就会变为填满整个容器的宽度
解决;
1.为图片设置具体宽度
2,为图片声明align-items属性
遇到问题;
媒体查询没有生效
原因:媒体查询没有出现在,目标属性的父元素同级
解决:
放到与它同级里
总结:
不再一个框下设置媒体查询,就像一个树枝长了两个叉,互不影响,
设置同级的媒体查询,就像一个树枝可以长成的两种结果
验证:为目标设置个媒体查询,在一定宽度生效
结果,样式只有左对齐,样式,原来设置的没有继承
验证成功,算是第二个树杈长出结果,与原本属性无关,
轮播图宽度没搞定,明天搞
.box{
width:100%;
overflow: hidden;
.box-1{
display:flex;
width: 300%;
.box-img{
width: 100%;
height: 30vw;
}
}
}
遇到问题:
1.同上
2.被垂直导航栏卡了一下,结果在css中无法实现恢复初始状态
因为checked是js属性,需要用js属性去改变它
3.本来想做完的,被轮播图插入图片卡住了,
问题:
1.设置vw会出现横向滚动轴
2.设置百分比,又会如图不全,现在脑子不清醒,暂定明天完成
3.今天事情比较多,做的少
收获:
1.less语法掌握
2.弹性布局应用
明日计划:完成task14,15
返回列表
评论