首页 > 代码库 > css spprite应用

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         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
54         <a href="http://www.mamicode.com/#">忘记密码?</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>
技术分享

效果图:

技术分享

 

css spprite应用