发表于: 2018-06-23 22:56:53
1 713
今天完成的事情
1.完成了任务11和任务12,模拟下拉框技能熟练度↑↑↑下拉框文字居中比较困难,可以通过设置padding的方法来达到居中效果,某些情况下需要多多调教
2.更改了两遍任务10~解决问题时一定要多多分析问题的原因,逆向思维往回摸,找到问题的根本
今天的收获
pointer-events,设置元素是否会成为属性事件的target
设置为none以后将不会触发鼠标事件,相当于被鼠标忽略掉,可以穿透该元素并且指定该元素下面的任何东西。IE11以下不支持
min-height注意事项
设置min-height后子元素100%是无效的,因为捕捉不到父元素的height
表单验证,只输入数字并且限制字符
核心代码:
maxlength="4" onKeyUp="value=value.replace(/[^\d]/g,'')"
maxlegth代表最大字符,value后面的则是正则表达式,现在还不懂。。
遇到的问题:
已解决:
1.小屏幕下模拟的折叠按钮,折叠的内容打开后,浏览器放大后按钮组不会消失
分析:因为是通过:checked伪类做的,激活时弹出按钮组,当浏览器放大时checkbox处于激活状态所以按钮组不会消失。解决方法:通过media查询,当宽度大于一个阈值时,设置:checked伪类的效果使其display:none
明天的计划:
看下任务8-13的深度思考,学习下js的基础,完成任务13,写任务总结学习做脑图
深度思考
1.如何改变radio和select的默认样式?
改变radio:用div画出想要的样子代替radio,使用label关联文字和radio,none掉radio,然后使用:checked伪类使radio激活时改变div的样式来模拟想要的效果
改变select:给select外层套个div,使这个完全覆盖select,改变div的样式来模拟select的样式。在这之前需要清除select的所有样式,然后使其宽高完全等于外层div
2.自适应小屏幕时该如何布局?
小屏幕下因为宽度问题,所以内容尽量竖排显示,主要用到媒体查询,所以在写html时就要考虑到是否方便小屏幕布局下的排版
评论