百度前端技术学院是一个为大学生创办的免费的前端技术实践、分享、交流平台。由百度校园招聘组、百度校园品牌部、百度前端技术部以及多个百度的前端团队联合创办。学院组织了一批百度在职工程师,精心编写了数十个实践编码任务,将技术知识点系统有机地串联在各个充满趣味与挑战的任务中,同学们通过实际地编码练习来掌握知识,再辅以互相评价、学习笔记等方式,加深对于学习内容的理解。在过去的三年中,百度前端技术学院累积吸引了上万名同学参加,并且有数十名同学在学习后,顺利加入了百度,成为了百度的前端工程师。

自定义checkbox, radio样式

普通

人数1582人在学习该课程,有438人已经完成该课程

时间平均用时3.2

课程概述

作业提交截止时间:04-24

任务目的

  1. 深入了解html label标签
  2. 了解CSS边框、背景、伪元素、伪类(注意和伪元素区分)等属性的设置
  3. 了解CSS中常见的雪碧图,并能自己制作使用雪碧图

任务描述

  1. 参考 样例(点击查看),实现页面开发,要求实现效果基本一致

任务注意事项

  1. 尝试背景图和伪元素两种不同方式实现,对比两种方式各自的优缺点。
  2. 注意测试不同情况,尤其是极端情况下的效果。

参考资料

  1. MDN label: 了解html中label的基本知识
  2. MDN background-position: 了解背景图片定位相关知识
  3. MDN :checked: 了解input的:checked伪类的基本知识以及应用场景
  4. MDN :before:了解input的:before伪元素的基本知识
  5. MDN :after:了解input的:after伪元素的基本知识
学员提交的作业 (-)
学员名称提交时间提交的代码预览效果评价数平均得分操作
课程优秀学习笔记
标题发布时间浏览量点赞量
自定义checkbox、radio2017-02-24 13:24155143
关于label标签、CSS3制作“对钩”的笔记2017-02-25 21:155513
制作记录2017-02-28 20:434790
点击查看更多课程优秀笔记