CSS Sprite雪碧图

2022-05-02 00:14:18

　　为了减少http请求数量，加速网页内容显示，很多网站的导航栏图标、登录框图片等，使用的并不是<image>标签，而是CSS Sprite雪碧图。

　两个小例子：

淘宝首页的侧栏图

代码

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <style>

      blockquote, body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, hr, input, legend, li, ol, p, pre, td, textarea, th, ul{

     margin: 0;

     padding: 0;

 }

 h3 {

     display: block;

     margin: 0;

     padding: 0;

 }

 .cat {

     position: relative;

     width: 150px;

     background: #f8f8f8;

     border: 1px solid #bbb;

 }

 ol, ul {

     list-style: none;

 }

 li{

     z-index: 2;/*设置元素的堆叠顺序,初始为0,2表示优先级更高*/

     position: relative;/*相对定位*/

     display: block;/*规定元素应该生成的框的类型,此元素将显示为块级元素*/

     height: 30px;

     line-height: 30px;

     overflow: hidden;/*内容溢出元素框时发生的事情*/

     margin: 1px 10px 0;/*元素的所有外边距*/

     vertical-align: bottom;/*元素的对齐方式*/

     border-bottom: 1px solid #dedede;

 }

 li h3 {

     font-size: 14px;

     font-weight: 400;

 }

 li i {

     display: inline;

     float: left;

     margin: 3px 10px 0 0;

     height: 24px;

     width: 30px

 }

 .cat i{

 background: url(http://img.mukewang.com/539a950e00015ba500710200.jpg )

 }

 .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;

 }

     </style>

     <title>Document</title>

 </head>

 <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>

                 </ul>

             </div>

 </body>

 </html>

效果： CSS Sprite雪碧图

雪碧图：

登录页面：

代码：

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>无标题文档</title>

 <style>

 *{margin:0;padding:0;}

 .inner{width:190px;

     background-color:#d5f4f5;

     padding:10px 20px;}

 .tp{

     width:190px;

     height:30px;

     text-indent:20px;

 }

 input[type="password"]{

     margin-top:10px;

 }

 p{

     font-size:12px;

     margin-top:10px;

     overflow:hidden;

 }

 p input{

     vertical-align:top;

     margin-right:4px;

 }

 p a{

     ext-decoration:none;

     float:right;

 }

 input[type="button"]{

     width:190px;

     height:37px;

     border:0;

     margin-top:15px;

     cursor:pointer;

 }

 #login{

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

 #enroll{

     background:url(http://img.mukewang.com/539a972b00013e9102280177.jpg) 0 -37px;}

 hr{

     margin-top:20px;

     color:#f5f5ef;

 }

 </style>

 </head>

 <body>

     <div class="inner">

         <form>

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

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

             <p>

                 <input type="checkbox" />下次自动登录<a href="javascript:;">忘记密码?</a>

             </p>

             <input id="login" type="button">

             <hr />

             <input id="enroll" type="button">

         </form>

     </div>

 </body>

 </html>

　　效果图：

雪碧图：http://img.mukewang.com/539a972b00013e9102280177.jpg

码农公寓

相关文章