當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

CSS Image Rollovers翻转效果Image Sprites图片精灵

發布時間：2025/3/21 CSS 38 豆豆

生活随笔收集整理的這篇文章主要介紹了 CSS Image Rollovers翻转效果Image Sprites图片精灵小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

代碼 ?1?<!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
?2?<html?xmlns="http://www.w3.org/1999/xhtml">
?3?
?4?<head>
?5?<meta?http-equiv="X-UA-Compatible"?content="IE=EmulateIE7"?/>
?6?<meta?content="text/html;?charset=utf-8"?http-equiv="Content-Type"?/>
?7?<title>CSS?Image?Rollovers,Image?Sprites?</title>
?8?<meta?name="Author"?content="涂聚文"?/>
?9?<meta?name="Keywords"?content=?"自定義字體?締友計算機信息技術有限公司?捷為工作室?www.dupcit.com,Image?Sprites?,Image?Rollovers"?/>
10?<meta?name="Description"?content="自定義字體?締友計算機信息技術有限公司?捷為工作室,Image?Rollovers,Image?Sprites"?/>
11?<link?rel="shortcut?icon"?href="http://www.dupcit.com/favicon.ico"?type="image/x-icon"?/>
12?<link?rel="icon"?href="http://www.dupcit.com/favicon.ico"?type="image/ico"?/>
13?
14?<style?type="text/css">
15?
16?????.rollover?a?{
17?????????display:block;
18?????????width:?90px;
19?????????padding:10px?10px?10px?7px;
20?????????font:?bold?13px?sans-serif;;
21?????????color:#333;
22?????????background:?url("rollover-image.gif")?0?0?no-repeat;
23?????????text-decoration:?none;
24?????????}
25?????.rollover?a:hover?{????
26?????????background-position:?0?-35px;
27?????????color:?#049;
28?????????}
29?????.rollover?a:active?{
30?????????background-position:?0?-70px;
31?????????color:#fff;
32?????????}
33?????#navlist{position:relative;}
34?#navlist?li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
35?#navlist?li,?#navlist?a{height:44px;display:block;}
36?
37?#home{left:0px;width:46px;}
38?#home{background:url('img_navsprites.gif')?0?0;}
39?
40?#prev{left:63px;width:43px;}
41?#prev{background:url('img_navsprites.gif')?-47px?0;}
42?
43?#next{left:129px;width:43px;}
44?#next{background:url('img_navsprites.gif')?-91px?0;}?
45?
46?</style>
47?
48?</head>
49?<body><h2>CSS?Rollover?Example</h2>
50?<p><a?href="pure-css-image-rollovers"><<?Back</a></p>
51?
52?
53?<div?class="rollover">
54?????<a?href="#">Item?1</a>
55?????<a?href="#">Item?2</a>
56?????<a?href="#">Item?3</a>
57?????<a?href="#">Tutorio</a>
58?</div>
59?
60?<p>View?the?source?to?see?how?this?was?done,?visit?<a?href="ure-css-image-rollovers">The?Pure?Css?Image?rollover?tutorial</a>
61??for?an?explanation</p>
62?
63?
64?<ul?id="navlist">
65???<li?id="home"><a?href="default.asp"></a></li>
66???<li?id="prev"><a?href="css_intro.asp"></a></li>
67???<li?id="next"><a?href="css_syntax.asp"></a></li>
68?</ul>
69?
70?
71?</body>
72?</html>
73?

總結

以上是生活随笔為你收集整理的CSS Image Rollovers翻转效果Image Sprites图片精灵的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： HDU 1848 Fibonacci a
下一篇： [bzoj 4887] [Tjoi201