CSS 图片放大展示代码

a{color:000;}

a:hover{text-dicoration:none;}

a:visited{color:000;}

.photo{padding:20px;background:#fff;width:600px;height:330px;text-align:left;}

.photo ul{list-style:none;padding:0px;margin:0px;width:230px;height:144px;border:1px solid #666;position:relative;}

.photo ul li{width:24px;height:24px;display:inline;margin:6px;}

.photo ul li a{width:24px;height:24px;cursor:default;display:block}

.photo ul li a b{display:none}

.photo ul li a img{display:block;width:24px;height:24px;border:1px solid #666;border-top-color:#ccc;background:url(pics/arrow.gif) no-repeat;}

.photo ul li a:hover{white-space:normal;position:relative;}

.photo ul li a.vert:hover img{left:-12px;top:-12px;width:48px;height:64px;border-color:#fc0;position:absolute}

.photo ul li a.hor:hover img{left:-20px;top:-20px;width:64px;height:48px;border-color:#fc0;position:absolute}

.photo ul li a:active,.photo ul li a:focus{outline:0;position:static}

</style>

<body>

<ul>

<li><a href="#nogo1" class="hor"><img src="pics/pic_1h.jpg" alt="" title="" />Snow capped mountains</a></li>

<li><a href="#nogo2" class="vert"><img src="pics/pic_1v.jpg" alt="" title="" />Model</a></li>

<li><a href="#nogo" class="vert"><img src="pics/pic_2v.jpg" alt="" title="" />An eagle</a></li>

<li><a href="#nogo" class="hor"><img src="pics/pic_3h.jpg" alt="" title="" />Tubes of paint</a></li>

<li><a href="#nogo" class="vert"><img src="pics/pic_3v.jpg" alt="" title="" />Flowers on a table</a></li>

<li><a href="#nogo" class="hor"><img src="pics/pic_4h.jpg" alt="" title="" />A clown</a></li>

<li><a href="#nogo" class="vert"><img src="pics/pic_4v.jpg" alt="" title="" />Painted lady</a></li>

<li><a href="#nogo" class="hor"><img src="pics/pic_5h.jpg" alt="" title="" />Boat on a river</a></li>

<li><a href="#nogo" class="vert"><img src="pics/pic_5v.jpg" alt="" title="" />Underneath the arches</a></li>

<li><a href="#nogo" class="hor"><img src="pics/pic_6h.jpg" alt="" title="" />Stormy weather</a></li>

<li><a href="#nogo" class="vert"><img src="pics/pic_6v.jpg" alt="" title="" />A fisheye view</a></li>

<li><a href="#nogo" class="vert"><img src="pics/pic_7v.jpg" alt="" title="" />A misty morning</a></li>

<li><a href="#nogo" class="hor"><img src="pics/pic_7h.jpg" alt="" title="" />Rays of light in the forest</a></li>

<li><a href="#nogo" class="vert"><img src="pics/pic_8v.jpg" alt="" title="" />A tree lined avenue</a></li>

<li><a href="#nogo" class="vert"><img src="pics/pic_9v.jpg" alt="" title="" />A portrait in black and white</a></li>

<li><a href="#nogo" class="hor"><img src="pics/pic_8h.jpg" alt="" title="" />Forest walk</a></li>

<li><a href="#nogo" class="hor"><img src="pics/pic_9h.jpg" alt="" title="" />Cold and frosty morning</a></li>

<li><a href="#nogo" class="hor"><img src="pics/pic_10h.jpg" alt="" title="" />Blue flower</a></li>

<li><a href="#nogo" class="vert"><img src="pics/pic_11v.jpg" alt="" title="" />White feather</a></li>

<li><a href="#nogo" class="hor"><img src="pics/pic_11h.jpg" alt="" title="" />White flowers on green leaves</a></li>

<li><a href="#nogo" class="vert"><img src="pics/pic_12v.jpg" alt="" title="" />Green and blue with a touch of white</a></li>

<li><a href="#nogo" class="hor"><img src="pics/pic_12h.jpg" alt="" title="" />Ripe tomatoes</a></li>

</ul>

</div>

</body>

相关阅读:
个人总结
找水王
nabcd需求分析
四则运算最终篇-网页版四则运算
第一次冲刺--个人工作总结02
第一次冲刺--个人工作总结01
组队APP功能点定点NABCD分析
水王
软件工程结对作业01
个人工作总结06

原文地址：https://www.cnblogs.com/sxlfybb/p/668981.html