CSS Sprite實例

時間 2019-11-20

標籤 css sprite 實例欄目 CSS 简体版

原文原文鏈接

1.javascript

 1 <%@ page language="java" contentType="text/html; charset=UTF-8"
 2     pageEncoding="UTF-8"%>
 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 4 <html>
 5     <head>
 6         <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
 7         <title>CSS Sprite實例</title>
 8         <style type="text/css">
 9             .sprite {
10                 background:url(sprite.png);
11             }
12             .monster {
13                 height:128px;
14             }
15             .application {
16                 height:61px;
17             }
18             /* Monsters */
19             .doctor {
20                 width:103px;
21                 background-position:-2px -2px;
22             }
23             .octopus {
24                 width:89px;
25                 background-position:-106px -2px;
26             }
27             .wolf {
28                 width:115px;
29                 background-position:-196px -2px;
30             }
31             .star {
32                 width:126px;
33                 background-position:-312px -2px;
34             }
35             .dog {
36                 width:128px;
37                 background-position:-439px -2px;
38             }
39             /* Applications -*/
40             .css {
41                 width:61px;
42                 background-position:-2px -133px;
43             }
44             .activityMonitor {
45                 width:58px;
46                 background-position:-64px -133px;
47             }
48             .dashboard {
49                 width:51px;
50                 background-position:-123px -133px;
51             }
52             .quicktime {
53                 width:53px;
54                 background-position:-175px -133px;
55             }
56             .scanner {
57                 width:74px;
58                 background-position:-229px -133px;
59             }
60 
61         </style>
62         <script src="../jquery-1.5.2.js" type="text/javascript"></script>
63         <script type="text/javascript">
64         </script>
65     </head>
66     <body>
67         <img src="images/transparent.gif"
68         class="sprite monster doctor" alt="Doctor Image" />
69         <img src="images/transparent.gif"
70         class="sprite monster octopus" alt="Octopus Image" />
71         <img src="images/transparent.gif"
72         class="sprite monster wolf" alt="Wolf Image" />
73         <img src="images/transparent.gif"
74         class="sprite monster star" alt="Star Image" />
75         <img src="images/transparent.gif"
76         class="sprite monster dog" alt="Dog Image" />
77         <img src="images/transparent.gif"
78         class="sprite application css" alt="Css Image" />
79         <img src="images/transparent.gif"
80         class="sprite application activityMonitor" />
81         <img src="images/transparent.gif"
82         class="sprite application dashboard" alt="Dashboard Image" />
83         <img src="images/transparent.gif"
84         class="sprite application quicktime" alt="Quicktime Image" />
85         <img src="images/transparent.gif"
86         class="sprite application scanner" alt="Scanner Image" />
87     </body>
88 </html>

1. css sprite實例
2. css sprite應用實例
3. css sprite
4. CSS Sprite
5. CSS sprite
6. CSS Sprite（CSS貼圖）
7. 經過 font-awesome 案例來學習 css sprite 和 svg sprite
8. css sprite合併
9. CSS sprite使用
10. Css Sprite Demo
更多相關文章...
• XML 實例 - XML 教程
• XML DOM 實例 - XML DOM 教程
• ☆基於Java Instrument的Agent實現
• Docker容器實戰(一) - 封神Server端技術

相關標籤/搜索

每日一句

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