css spprite应用
（一）实现简单的淘宝带图标侧边栏效果
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>
效果图：
