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