发表于： 2019-11-01 20:49:32
1 1098
今天完成的事情：
完成任务10部分布局。
1、hover效果设置交互
2、input+label完成表单单选设置。更改input单选样式
利用label和input关联，利用label的伪类（或子元素加一个div盒子）设置样式，并将input“消失”。达到input样式优化效果。
Label默认有margin-bottom，需要提前取消。
3、下拉菜单的样式优化
设置绝对定位将下拉菜单固定在每一栏固定位置。
样式优化：菜单栏样式如常设置，右边箭头的设置采用了另设div盒子+点击穿透完成。
明天计划的事情：
完成任务10,剩下部分，花半天到一天时间将之前的琐碎知识点整理。
遇到的问题：
1、表单选项单选设置
利用label和input关联，利用label的伪类（或子元素加一个div盒子）设置样式，并将input“消失”。达到input样式优化效果。
2、下拉菜单右边箭头的样式优化。
方法一：
另设div盒子完成样式修改，利用定位+点击穿透的方式完成。
方法二：
1.去除select右侧箭头
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
2.利用z-index将div盒子置底（或下拉菜单置顶），将顶部下拉菜单的的背景色设为transparent透明。
收获：
熟悉表单input的各属性。能够完成简单样式优化。
学会点击穿透。
返回列表
评论