css spprite应用

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

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

 </head>

 <style>

     ul,h3{padding: 0;margin:0;

         list-style: none;

         font-size: 14px;

         font-weight: 400}

     .cat{width:150px;

         background-color: #f8f8f8;

         border: 1px solid #bbb;}

     li{line-height: 31px;

         height: 31px;

         border-bottom: 1px solid #dedede;

         overflow: hidden;}

     li i{background:url(sidebar.png);

         display: inline;

         width: 30px;

         height: 40px;

         float: left;

         margin-top:6px;

         margin-left:25px;

     }

     .cat-1 i{background-position: 0 0;}

     .cat-2 i{background-position: 0 -24px;}

     .cat-3 i{background-position: 0 -48px;}

     .cat-4 i{background-position: 0 -72px;}

     .cat-5 i{background-position: 0 -96px;}

     .cat-6 i{background-position: 0 -120px;}

     .cat-7 i{background-position: 0 -144px;}

     .cat-8 i{background-position: 0 -168px;}

     .cat-9 i{background-position: -40px 0;}

 </style>

 <body>

     <div class="cat">

         <ul>

             <li class="cat-1"><i></i><h3>服饰内衣</h3></li>

             <li class="cat-2"><i></i><h3>鞋包配饰</h3></li>

             <li class="cat-3"><i></i><h3>运动户外</h3></li>

             <li class="cat-4"><i></i><h3>珠宝手表</h3></li>

             <li class="cat-5"><i></i><h3>手机数码</h3></li>

             <li class="cat-6"><i></i><h3>办公家电</h3></li>

             <li class="cat-7"><i></i><h3>护肤彩妆</h3></li>

             <li class="cat-8"><i></i><h3>母婴用品</h3></li>

             <li class="cat-9"><i></i><h3>其他分类</h3></li>

         </ul>

     </div>

 </body>

 </html>

效果图：

css spprite应用

（二）实现人人网登录页面（登录和提交按钮通过css sprite实现）

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>LOGIN</title>

 <style>

     input,p,span,ul,li{margin:0;padding: 0;}

     .cat{width: 192px;

         background-color:#EFFBFE;

         padding-left: 15px;

         position: relative;}

     span{font-size: 14px;

         font-weight: 400px;}

     input{margin-top: 10px;}

     .login{

         width: 176px;

         height: 32px;

         text-indent: 2em;

         font-size: 13px;

         font-family:sans-serif;

         border-radius: 3px;

         border:1px solid #bbbbbb;}

     a{text-decoration: none;}

     hr{width:176px;margin-top: 14px;

         position: absolute;left: 15px;}

     p{font-size: 12px;

         font-family: sans-serif;}

 /*    input[type="button"]{

         width:180px;height:38px;

         border:0;margin-top:15px;

         cursor:pointer;}*/

 /*按钮如果不设置长宽的话则图标无法正常显示*/

     .login_btn,.reg_btn{

         width:180px;height:38px;

         border:0;margin-top:15px;

         cursor:pointer;}

     .login_btn{background: url(http://img.mukewang.com/539a972b00013e9102280177.jpg);

         background-position: 0 0;}

     .reg_btn{background: url(http://img.mukewang.com/539a972b00013e9102280177.jpg);

         background-position: 0 -38px;}

 </style>

 </head>

 <body>

 <div class="cat">

     <form action="#" method="post">

         <input type="text" class="login"placeholder="邮箱/手机号/用户名"/>

         <input type="password" class="login" placeholder="请输入密码">

         <br>

         <p>

         <input type="checkbox" class="auto" checked="">下次自动登录

         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

         <a href="#">忘记密码?</a>

         </p>

         <input type="button" class="login_btn"><br>

         <hr>

         <br>

         <input type="button" class="reg_btn">

     </form>

 </div>

 </body>

 </html>

效果图：

css spprite应用

参考：慕课网

相关文章