发表于: 2018-12-29 15:07:29
1 814
今天完成的事情:
任务十基本完成,前面两个任务还在审核
明天计划的事情:
准备任务十一的知识储备,学习下sass和less,再提前了解下js的基本知识
遇到的问题:
inline-block属性默认间隙
在父元素下使用 font-size: 0;和letter-spacing: -3px; 可以去除间隙
间隙产生的原因是inline-block元素间有空格或换行
改变单选标签的样式
要先通过label元素中的for属性绑定对应的表单元素
使用绝对定位和裁剪把原来的单选按钮在不影响布局的情况下裁掉
这里需要用到伪元素:before,在label元素前面添加新的按钮,总的来说就是一招狸猫换太子
表单右边下拉选择菜单的样式
通过使用appearance: none;隐藏右边小箭头,再把事先做好的切图加入背景图片替代右边箭头的位置
Firefox 支持替代的 -moz-appearance 属性。
Safari 和 Chrome 支持替代的 -webkit-appearance 属性。
Internet Explorer 和 Opera 不支持 appearance 属性。
另外实测edge浏览器可以支持
收获:
学习表单的制作
评论