2008 - 08 - 25
Published by 朝心
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>图片展示例子-修改by 朝心（在linxz的基础上修改）</title> <style> ul {width:148px;height:540px;float:right;list-style:none;} li {width:54px;height:54px;float:left;margin:10px;display:inline;overflow:hidden;} li a {width:50px;height:50px;display:block;overflow:hidden;border:2px solid #ccc;} li a img{width:50px;height:50px;} img {display:block;overflow:hidden;border:none;} /* 主要针对IE6的a:hover的BUG */ li a {position:static;} li a:hover {border:2px solid #000;} /* 主要针对IE6的a:hover的BUG end */ li a:hover img {margin:0;position:absolute;top:10px;left:10px;border:2px solid #fff;width:250px;height:250px;} #photo {width:748px;height:540px;margin:0 auto;position:relative;background:#333;} /*wolf*/ .big{margin:12px 0 0 12px;width:500px;height:500px;overflow:hidden;} .big img{width:500px;height:500px;} </style> </head> <body> <div id="photo"> <ul> <li> <a href="#p1" title=""><img src="http://www.itroam.com/images/pic_1.jpg" alt="" /></a> </li> <li> <a href="#p2" title=""><img src="http://www.itroam.com/images/pic_2.jpg" alt="" /></a> </li> <li> <a href="#p3" title=""><img src="http://www.itroam.com/images/pic_3.jpg" alt="" /></a> </li> <li> <a href="#p4" title=""><img src="http://www.itroam.com/images/pic_4.jpg" alt="" /></a> </li> <li> <a href="#p5" title=""><img src="http://www.itroam.com/images/pic_5.jpg" alt="" /></a> </li> <li> <a href="#p6" title=""><img src="http://www.itroam.com/images/pic_6.jpg" alt="" /></a> </li> <li> <a href="#p7" title=""><img src="http://www.itroam.com/images/pic_7.jpg" alt="" /></a> </li> <li> <a href="#p8" title=""><img src="http://www.itroam.com/images/pic_8.jpg" alt="" /></a> </li> <li> <a href="#p9" title=""><img src="http://www.itroam.com/images/pic_9.jpg" alt="" /></a> </li> </ul> <div class="big"> <img id="p1" src="http://www.itroam.com/images/pic_1.jpg" alt="" /> <img id="p2" src="http://www.itroam.com/images/pic_2.jpg" alt="" /> <img id="p3" src="http://www.itroam.com/images/pic_3.jpg" alt="" /> <img id="p4" src="http://www.itroam.com/images/pic_4.jpg" alt="" /> <img id="p5" src="http://www.itroam.com/images/pic_5.jpg" alt="" /> <img id="p6" src="http://www.itroam.com/images/pic_6.jpg" alt="" /> <img id="p7" src="http://www.itroam.com/images/pic_7.jpg" alt="" /> <img id="p8" src="http://www.itroam.com/images/pic_8.jpg" alt="" /> <img id="p9" src="http://www.itroam.com/images/pic_9.jpg" alt="" /> </div> </div> </body> </html>
Comments RSS
Name (必需)
Mail (hidden) (必需)
Website