(一)实现简单的淘宝带图标侧边栏效果
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>
效果图: