雪碧图应用

最近学习了雪碧图的使用，雪碧图的好处这块就不多说了，只说应用部分。

雪碧图的使用依赖于background-position这个属性，属性值分别为x,y轴的值，图片的显示大小由容器决定，简单点说，就是承载该图片的大小是多大显示区间就是多大，起始点就是background-position属性值的坐标。

   DOCTYPE html"  > 
   head  > 
   meta   http-equiv  ="Content-Type"   content  ="text/html; charset=utf-8"   />  
   title  > 无标题文档   title  > 
   head  > 
   style  > 
     /*  清除默认样式  */  
   html,body,ul,li,button,div,input,a  {   padding  :  0  ;   margin  :  0  ;   }  
   a  {  text-decoration  :  none  }  
   body  {   font-size  :  10px  ;  }  
   .content input::-webkit-input-placeholder   {  color  :  #ccc  ;  padding-left  :  30px  ;  } 
   style  > 
   style  > 
     /*  书写样式  */  
    .content  {  margin-top  :  15px  ;  padding  :  10px  ;   width  :  190px  ;  height  :  240px  ;  background-color  :  #deeaf6  ;  }  
    .content .text input,.content .text label,.content .text a  {   vertical-align  :  middle  ;  height  :  20px  ;  line-height  :  20px  ;  }  
    .content .text a  {  float  :  right  ;   color  :  #696BF6  ;  }  
    .content input[type='text']  {  margin-bottom  :  15px  ;  border  :  1px solid #CDCACA  ;  width  :  100%  ;   height  :  30px  ;  border-radius  :  5px  ;  background-color  :  #fff  ;  }  
    .button button  {  background  :  url("http://img.mukewang测试数据/539a972b00013e9102280177.jpg") no-repeat  ;  width  :  100%  ;  height  :  38px  ;   margin-top  :  15px  ;  border  :  none  ; 
     }  
    .button .btn1  {  background-position  :  0 0  ;   }  
    .button .btn2  {  background-position  :  0 -38px  ;    }  
    .button span  {  display  :  inline-block  ;   width  :  100%  ;  height  :  15px  ;  border-bottom  :  1px solid #ccc  ;   } 
   style  > 
   body  > 
   div   class  ="content"  > 
       input   type  ="text"   placeholder  ="邮箱/手机号/用户名"  /> 
       input   type  ="text"   placeholder  ="请输入密码"  /> 
       div   class  ="text"  > 
           input   type  ="checkbox"   id  ="box"  /> 
           label   for  ="box"  > 下次自动登录   label  > 
            a   href  ="#"  > 忘记密码？   a  > 
       div  > 
   
       div   class  ="button"  > 
           button   class  ="btn1"  >  button  > 
           span  >  span  > 
           button   class  ="btn2"  >  button  > 
       div  > 
   div  > 
   body  > 
   html  >  

查看更多关于雪碧图应用的详细内容...