1.自定义checkbox， radio样式

知识：

（1）<label>

<label>元素表示一项用户界面的标题。

使用方法：

1. 在<label>标签中放控制元件：

<label>Click here <input type="text"></label>

2.使用for属性：

<label for="username">Click here</label>

<input type="text" id="username">

（2）:checked伪类

:checked伪类表示所有选定状态的单选按钮radio，多选按钮checkbox，或者下拉菜单select里的option。

（3）::before伪类

::before伪类在相关元素第一个子元素前创造了一个伪元素。默认情况下是inline元素。

经常用于给一个元素添加装饰用元素，通过使用content属性。

::before 2个冒号是CSS3的，:before 1个冒号是CSS2的。

（4）::after伪类

除了位置在最后以外，其他与::before伪类相同。

（5）CSS雪碧图

CSS雪碧就是 CSS Sprite，也叫CSS精灵，是一种CSS图像合并技术。

将小图标和背景图合并到一张图片上，然后利用CSS的背景定位来显示需要显示的图片部分。

优点：减少加载网页图片时对服务器的请求次数；提高页面的加载速度；减少鼠标滑过（hover）的bug。

思路：