css spprite应用-CSDN博客

（一）实现简单的淘宝带图标侧边栏效果

 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="#">忘记密码?</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>

效果图：