发表于： 2019-11-08 19:55:31
1 942
今日完成;
处理task13侧边栏
问题1:侧边栏加页面宽度超过设定,如何不出现滑动轴
解决:overflow:hidden
意为超出内容被修剪并且其余内容不可见
没有解决,
1.换个思路,不去管怎么让侧边栏和主体,联系起来,
把问题拆分,先想办法把主体移动化效果右移动,
结合任务10,完成
input:checked ~.box123 {
transform: translateX(300px);
transition: transform 5s;
}
.box123{
width: 100%;
transform: translateX(0px);
transition: transform 5s;
background-color: #f0f0f0;
}
2.之后再去想怎么达到侧边栏效果
方法:
1.用display:none
放弃,因为过渡动画效果,所以不能直接隐藏
2.可以用固定定位fixed,left负距离,与侧边栏宽度相等,把侧边栏隐藏,
然后同主体类似,做法
3.连接在一起,没有滚动框,
用overflow:hidden, 是当元素内的内容溢出的时候使它隐藏溢出的部分，即超出部分隐藏。
其实在bfc,和任务7,文本边距不足成省略号排列时,已经了解,但是不知道怎么去应用
遇到问题:
侧边栏高度设置100%无效,高度由内容撑开,
解决:height:100vh
ps:
1.vh根据的是视口的高度,100vh即整个视口的高度(不是父元素额的100%)
2.宽高由内容撑开,父元素没有固定高度,百分比是无效的,或者有其他兄弟元素撑开的父元素,也可以共用
遇到问题:
input在父元素中,想要的效果是点击它整个父元素生效,input在父元素中点击无法生效;
解决:label绑定input,代替它在父元素内设置按钮样式,
但是,没有规定,input必须也在父元素内部,把input摘出,与父元素并列为兄弟元素
遇到问题;事件触发,是两次,即点击改变,再次点击还原,同一元素需要设置两次过渡动画效果
解决;用复选框checkbox,点击改变,再次点击取消还原
遇到问题:
input:checked +.n-1
中"+"代表相邻的兄弟元素生效,但是任务两个元素公用一个点击事件,有且只有一个生效.
解决:"+"换成"~"含义为:~ 是代表选择 checked 的后面的所有兄弟节点
遇到问题:
还是只有一个生效,
解决;
在html中把input标签放到两个点击事件元素的上方
原因:
与css浏览器完全识别再出样式效果不同,
html浏览器是从上往下,一边识别,一边识别效果,
html点击事件元素出现在input上方,浏览器先识别点击事件元素,后识别的input,所以后者无法影响前者
task14
遇到问题:样式无效
原因(解决):导航栏a标签下划线删除
.text-decoration:none清除默认样式,在这个属性之前的样式,也会被覆盖清除,所以要设置新的样式,要在添加这个属性
标签之后设置,或者在添加这个属性的标签中设置新的样式
遇到问题:
1.同上
2.开头难,真难不难不确定,但就是会消耗一部分时间,没有做到敲代码之前动脑子想,无脑去做,
要约束自己思维,集中在某个点上
3.做侧边栏,看了,很多例子,单个也许都行,但自己记之后混淆了,最后把问题拆分,解决的
收获:
1.input单选框和复选框的多样灵活运用及应用细节
2.overflow属性的应用环境
3.html与css浏览器识别的差异印象加深,与可能的因为先后差异造成代码bug的经验
4.ul,li布置导航栏
明日计划;
上午,task13深度思考,样式重置及思维导图,如果有富余时间,继续task14,15
下午,task14,15
返回列表
评论