最近学习了雪碧图的使用，雪碧图的好处这块就不多说了，只说应用部分。
雪碧图的使用依赖于background-position这个属性，属性值分别为x,y轴的值，图片的显示大小由容器决定，简单点说，就是承载该图片的大小是多大显示区间就是多大，起始点就是background-position属性值的坐标。
素材取自慕课网雪碧图课程http://www.imooc.com/code/1992
无标题文档 下次自动登录 忘记密码？

书写过程中遇到的几个小问题：
清除a标签样式
使用text-decoration:none。其他属性overline——上划线，underline——默认的下划线，line-through——贯穿线
改变placeholder的样式
因为不同浏览器存在兼容性问题，这里主要设置webkit内核浏览器、火狐浏览器、ie浏览器三种，伪类的写法如下：
::-moz-placeholder{color:red;} //ff19+ :-moz-placeholder{color:red} //ff18- ::-webkit-input-placeholder{color:red;} //chrome,safari :-ms-input-placeholder{color:red;} //ie10
复选框与文字不对齐的解决：
这个问题设置默认的margin和padding是无法去掉的，可以为复选框和文字都使用vertical-align:middle属性即可，如文中代码：
.content .text input,.content .text label,.content .text a{ vertical-align:middle;height:20px;line-height:20px;}
去除输入框获取焦点时的浅蓝色边框
设置input属性outline:none