样式表效果二

Aug 18, 2004 Author: | Filed under: Uncategorized

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="gb2312" > <head> <style type="text/css"> body {font:11px verdana;} oShow {position:absolute;} img {border:none;} #oShow a {color:#fff;text-decoration:none;position:absolute;width:50px;height:50px;background-color:#5c6773;} #oShow a img {position:absolute;left:-999px;top:-999px;} .a1 {left:50px;} .a2 {left:100px;} .a3 {left:150px;} #oShow a:hover {background-color:#8c97a3;} #oShow a.a1:hover img {left:-50px;top:0px;} #oShow a.a2:hover img {left:-100px;top:0px;} #oShow a.a3:hover img {left:-150px;top:0px;} #footer {margin-top:160px;float:left;} </style> </head> <body bgcolor="#ffffff"> <div id="oShow"> <a href="#1" class="a1">1<img src="mywebcodingpic1.gif" alt="test1" /></a><a href="#1" class="a2">2<img src="mywebcodingpic2.gif" alt="test2" /></a><a href="#1" class="a3">3<img src="mywebcodingpic3.gif" alt="test3" /></a> </div> <div id="footer"> </div> </body> </html> 运行代码 [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]