css sprite应用
（一）实现简单的淘宝带图标侧边栏效果
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <style> 8 ul,h3{padding: 0;margin:0; 9 list-style: none; 10 font-size: 14px; 11 font-weight: 400} 12 .cat{width:150px; 13 background-color: #f8f8f8; 14 border: 1px solid #bbb;} 15 li{line-height: 31px; 16 height: 31px; 17 border-bottom: 1px solid #dedede; 18 overflow: hidden;} 19 li i{background:url(sidebar.png); 20 display: inline; 21 width: 30px; 22 height: 40px; 23 float: left; 24 margin-top:6px; 25 margin-left:25px; 26 } 27 .cat-1 i{background-position: 0 0;} 28 .cat-2 i{background-position: 0 -24px;} 29 .cat-3 i{background-position: 0 -48px;} 30 .cat-4 i{background-position: 0 -72px;} 31 .cat-5 i{background-position: 0 -96px;} 32 .cat-6 i{background-position: 0 -120px;} 33 .cat-7 i{background-position: 0 -144px;} 34 .cat-8 i{background-position: 0 -168px;} 35 .cat-9 i{background-position: -40px 0;} 36 </style> 37 <body> 38 <div class="cat"> 39 <ul> 40 <li class="cat-1"><i></i><h3>服饰内衣</h3></li> 41 <li class="cat-2"><i></i><h3>鞋包配饰</h3></li> 42 <li class="cat-3"><i></i><h3>运动户外</h3></li> 43 <li class="cat-4"><i></i><h3>珠宝手表</h3></li> 44 <li class="cat-5"><i></i><h3>手机数码</h3></li> 45 <li class="cat-6"><i></i><h3>办公家电</h3></li> 46 <li class="cat-7"><i></i><h3>护肤彩妆</h3></li> 47 <li class="cat-8"><i></i><h3>母婴用品</h3></li> 48 <li class="cat-9"><i></i><h3>其他分类</h3></li> 49 </ul> 50 </div> 51 </body> 52 </html>
效果图：
（二）实现人人网登录页面（登录和提交按钮通过css sprite实现）
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>LOGIN</title> 6 <style> 7 input,p,span,ul,li{margin:0;padding: 0;} 8 .cat{width: 192px; 9 background-color:#EFFBFE; 10 padding-left: 15px; 11 position: relative;} 12 span{font-size: 14px; 13 font-weight: 400px;} 14 input{margin-top: 10px;} 15 .login{ 16 width: 176px; 17 height: 32px; 18 text-indent: 2em; 19 font-size: 13px; 20 font-family:sans-serif; 21 border-radius: 3px; 22 border:1px solid #bbbbbb;} 23 a{text-decoration: none;} 24 hr{width:176px;margin-top: 14px; 25 position: absolute;left: 15px;} 26 p{font-size: 12px; 27 font-family: sans-serif;} 28 29 /* input[type="button"]{ 30 width:180px;height:38px; 31 border:0;margin-top:15px; 32 cursor:pointer;}*/ 33 34 /*按钮如果不设置长宽的话则图标无法正常显示*/ 35 .login_btn,.reg_btn{ 36 width:180px;height:38px; 37 border:0;margin-top:15px; 38 cursor:pointer;} 39 .login_btn{background: url(http://img.mukewang.com/539a972b00013e9102280177.jpg); 40 background-position: 0 0;} 41 .reg_btn{background: url(http://img.mukewang.com/539a972b00013e9102280177.jpg); 42 background-position: 0 -38px;} 43 </style> 44 </head> 45 <body> 46 <div class="cat"> 47 <form action="#" method="post"> 48 <input type="text" class="login"placeholder="邮箱/手机号/用户名"/> 49 <input type="password" class="login" placeholder="请输入密码"> 50 <br> 51 <p> 52 <input type="checkbox" class="auto" checked="">下次自动登录 53 54 <a href="#">忘记密码?</a> 55 </p> 56 <input type="button" class="login_btn"><br> 57 <hr> 58 <br> 59 <input type="button" class="reg_btn"> 60 </form> 61 </div> 62 </body> 63 </html>
效果图：
参考：慕课网
