任务目的
- 深入了解html label标签
- 了解CSS边框、背景、伪元素、伪类(注意和伪元素区分)等属性的设置
- 了解CSS中常见的雪碧图,并能自己制作使用雪碧图
任务描述
- 参考 样例(点击查看),实现页面开发,要求实现效果基本一致
任务注意事项
- 尝试背景图和伪元素两种不同方式实现,对比两种方式各自的优缺点。
- 注意测试不同情况,尤其是极端情况下的效果。
参考资料
- MDN label: 了解html中label的基本知识
- MDN background-position: 了解背景图片定位相关知识
- MDN :checked: 了解input的:checked伪类的基本知识以及应用场景
- MDN :before:了解input的:before伪元素的基本知识
- MDN :after:了解input的:after伪元素的基本知识
自定义checkbox, radio样式总结
1、HTML <label> Tag
<label> 标签为 input 元素定义标注(标记)。
label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。
<label> 标签的 for 属性应当与相关元素的 id 属性相同。
5、已提交作业
代码地址https://github.com/Nunawading2016/2017-IFE-Baidu/blob/master/task4-2
预览地址http://htmlpreview.github.io/?https://github.com/Nunawading2016/2017-IFE-Baidu/blob/master/task4-2/index.html