CSS Sprite雪碧圖

時間 2019-11-20

標籤 css sprite 雪碧欄目 CSS 简体版

原文原文鏈接

　　爲了減小http請求數量，加速網頁內容顯示，不少網站的導航欄圖標、登陸框圖片等，使用的並非<image>標籤，而是CSS Sprite雪碧圖。javascript

　兩個小例子：html

淘寶首頁的側欄圖

代碼

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7     <style>
  8      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{
  9     margin: 0;
 10     padding: 0;
 11 }
 12 
 13 h3 {
 14     display: block;
 15     margin: 0;
 16     padding: 0;
 17 }
 18 .cat {
 19     position: relative;
 20     width: 150px;
 21     background: #f8f8f8;
 22     border: 1px solid #bbb;
 23 }
 24 
 25 ol, ul {
 26     list-style: none;
 27 }
 28 
 29 li{
 30     z-index: 2;/*設置元素的堆疊順序,初始爲0,2表示優先級更高*/
 31     position: relative;/*相對定位*/
 32     display: block;/*規定元素應該生成的框的類型,此元素將顯示爲塊級元素*/
 33     height: 30px;
 34     line-height: 30px;
 35     overflow: hidden;/*內容溢出元素框時發生的事情*/
 36     margin: 1px 10px 0;/*元素的全部外邊距*/
 37     vertical-align: bottom;/*元素的對齊方式*/
 38     border-bottom: 1px solid #dedede;
 39 }
 40 
 41 li h3 {
 42     font-size: 14px;
 43     font-weight: 400;
 44 }
 45 
 46 li i {
 47     display: inline;
 48     float: left;
 49     margin: 3px 10px 0 0;
 50     height: 24px;
 51     width: 30px
 52 }
 53 
 54 
 55 .cat i{
 56 background: url(http://img.mukewang.com/539a950e00015ba500710200.jpg )
 57 }
 58 .cat-1 i{
 59     background-position: 0 0;
 60 }
 61 .cat-2 i{
 62     background-position: 0 -24px;
 63 }
 64 .cat-3 i{
 65     background-position: 0 -48px;
 66 }
 67 .cat-4 i{
 68     background-position: 0 -72px;
 69 }
 70 .cat-5 i{
 71     background-position: 0 -96px;
 72 }
 73 .cat-6 i{
 74     background-position: 0 -120px;
 75 }
 76 .cat-7 i{
 77     background-position: 0 -144px;
 78 }
 79 .cat-8 i{
 80     background-position: 0 -168px;
 81 }
 82 
 83     </style>
 84     <title>Document</title>
 85 
 86 </head>
 87 <body>
 88         <div class="cat">
 89                 <ul>
 90                     <li class="cat-1">
 91                         <i></i>
 92                         <h3>服裝內衣</h3>
 93                     </li>
 94                     <li class="cat-2">
 95                         <i></i>
 96                         <h3>鞋包配飾</h3>
 97                     </li>
 98                     <li class="cat-3">
 99                         <i></i>
100                         <h3>戶外運動</h3>
101                     </li>
102                     <li class="cat-4">
103                         <i></i>
104                         <h3>珠寶手錶</h3>
105                     </li>
106                     <li class="cat-5">
107                         <i></i>
108                         <h3>手機數碼</h3>
109                     </li>
110                     <li class="cat-6">
111                         <i></i>
112                         <h3>家電辦公</h3>
113                     </li>
114                     <li class="cat-7">
115                         <i></i>
116                         <h3>護膚彩妝</h3>
117                     </li> 
118                     <li class="cat-8">
119                         <i></i>
120                         <h3>母嬰用品</h3>
121                     </li>    
122                 </ul>
123             </div>
124 </body>
125 </html>

效果：java

雪碧圖：網站

登陸頁面：

代碼：ui

 1 <html xmlns="http://www.w3.org/1999/xhtml">
 2 <head>
 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 4 <title>無標題文檔</title>
 5 <style>
 6 *{margin:0;padding:0;}
 7 .inner{width:190px;
 8     background-color:#d5f4f5;
 9     padding:10px 20px;}
10 
11 .tp{
12     width:190px;
13     height:30px;
14     text-indent:20px;
15     
16 }
17 input[type="password"]{
18     margin-top:10px;
19     
20 }
21 p{
22     font-size:12px;
23     margin-top:10px;
24     overflow:hidden;
25     
26 }
27 p input{
28     vertical-align:top;
29     margin-right:4px;
30     
31 }
32 p a{
33     ext-decoration:none;
34     float:right;
35 }
36 input[type="button"]{
37     width:190px;
38     height:37px;
39     border:0;
40     margin-top:15px;
41     cursor:pointer;
42     
43 }
44 #login{
45     background:url(http://img.mukewang.com/539a972b00013e9102280177.jpg);}
46 #enroll{
47     background:url(http://img.mukewang.com/539a972b00013e9102280177.jpg) 0 -37px;}
48 hr{
49     margin-top:20px;
50     color:#f5f5ef;
51     
52 }
53 </style>
54 </head>
55 
56 <body>
57     <div class="inner">
58         <form>
59             <input class="tp" type="text" placeholder="郵箱/手機號/用戶名" />
60             <input class="tp" type="password" placeholder="請輸入密碼" />
61             <p>
62                 <input type="checkbox" />下次自動登陸<a href="javascript:;">忘記密碼?</a>
63             </p>
64             <input id="login" type="button">
65             <hr />
66             <input id="enroll" type="button">
67         </form>
68     </div>
69 
70 </body>
71 </html>

　　效果圖：url

雪碧圖：http://img.mukewang.com/539a972b00013e9102280177.jpgspa

1. css Sprite雪碧圖
2. CSS Sprite雪碧圖
3. css sprite 雪碧圖
4. CSS Sprite——CSS雪碧圖
5. Sprite - 雪碧圖
6. CSS Sprite 雪碧圖製做
7. 關於css雪碧圖sprite
8. CSS Sprite雪碧圖應用
9. No.006 雪碧圖CSS Sprite
10. compass與css sprite（雪碧圖）
更多相關文章...
• jQuery Mobile CSS 類 - jQuery Mobile 教程
• CSS 指南 - 網站建設指南
• Git可視化極簡易教程 — Git GUI使用方法
• 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。