发表于: 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浏览器可以支持


收获:


学习表单的制作



返回列表 返回列表
评论

    分享到