CSS Sprite实例

 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>
posted on 2017-01-17 23:46 Sharpest 阅读(165) 评论(0) 编辑收藏举报