特效介绍
兼容IE6等主流浏览器，不含任何js代码的纯CSS打造带tab选项卡，鼠标移上图片放大功能的相册
使用方法
1、复制以下代码粘贴到你想要显示的区域
<style type="text/css">
a {color:#000;} a:hover {text-decoration:none;} a:visited {color:#000;}
.photo {width:635px; text-align:left; position:relative; margin:0 auto;}
.photo ul.topic {padding:0; margin:0; list-style:none; width:635px; height:auto;
position:relative; z-index:10;} .photo ul.topic li {display:block; width:125px;
height:31px; float:left;} .photo ul.topic li a.set {display:block; font-size:11px;
width:124px; height:30px; text-align:center; line-height:30px; color:#000;
text-decoration:none; border:1px solid #fff; border-width:1px 1px 0 0;
background:#ccc; font-family:verdana, arial, sans-serif;} .photo ul.topic
li a ul, .photo ul.topic li ul {display:none;} .photo ul.topic li.active
a {color:#000; background:#bbb;} .photo ul.topic li a:hover, .photo ul.topic
li:hover a {color:#fff; background:#aaa;} .photo ul.topic li.active ul
{display:block; position:absolute; left:0; top:31px; list-style:none; padding:0;
margin:0; height:375px; background:#ddd; width:464px; padding:40px 60px;
border:20px solid #bbb; z-index:1;} .photo ul.topic li a:hover ul, .photo
ul.topic li:hover ul {display:block; position:absolute; left:0; top:31px;
list-style:none; padding:0; margin:0; height:375px; background:#ddd; width:464px;
padding:40px 60px; border:20px solid #aaa; z-index:100;} .photo ul.topic
li ul li {display:inline; width:112px; height:87px; float:left; border:1px
solid #fff; margin:1px;} .photo ul.topic li ul li a {display:block; width:110px;
height:85px; cursor:default; float:left; text-decoration:none; background:#444;
border:1px solid #888;} .photo ul.topic li ul li a img {display:block;
width:100px; height:75px; border:5px solid #eee;} .photo ul.topic li a:hover
ul li a:hover, .photo ul.topic li:hover ul li a:hover {white-space:normal;
position:relative;} .photo ul.topic li a:hover ul li a:hover img, .photo
ul.topic li:hover ul li a:hover img {position:absolute; left:-50px; top:-32px;
width:200px; height:150px; border-color:#fff;}
</style>
<div class="photo">
<ul class="topic">
<li>
<a class="set" href="#Portraits">
Portraits
<!--[if gte IE 7]>
<!-->
</a>
<!--<![endif]-->
<!--[if lte IE 6]>
<table>
<tr>
<td>
<![endif]-->
<ul>
<li>
<a href="lbox/portrait1.jpg">
<img src="images/portrait1a.jpg" alt="" title="" />
</a>
</li>
<li>
<a href="lbox/portrait2.jpg">
<img src="images/portrait1a.jpg" alt="" title="" />
</a>
</li>
<li>
<a href="lbox/portrait3.jpg">
<img src="images/portrait1a.jpg" alt="" title="" />
</a>
</li>
<li>
<a href="lbox/portrait4.jpg">
<img src="images/portrait1a.jpg" alt="" title="" />
</a>
</li>
<li>
<a href="lbox/portrait5.jpg">
<img src="images/portrait1a.jpg" alt="" title="" />
</a>
</li>
<li>
<a href="lbox/portrait6.jpg">
<img src="images/portrait1a.jpg" alt="" title="" />
</a>
</li>
<li>
<a href="lbox/portrait7.jpg">
<img src="images/portrait1a.jpg" alt="" title="" />
</a>
</li>
<li>
<a href="lbox/portrait8.jpg">
<img src="images/portrait1a.jpg" alt="" title="" />
</a>
</li>
<li>
<a href="lbox/portrait9.jpg">
<img src="images/portrait1a.jpg" alt="" title="" />
</a>
</li>
<li>
<a href="lbox/portrait10.jpg">
<img src="images/portrait1a.jpg" alt="" title="" />
</a>
</li>
<li>
<a href="lbox/portrait11.jpg">
<img src="images/portrait1a.jpg" alt="" title="" />
</a>
</li>
<li>
<a href="lbox/portrait12.jpg">
<img src="images/portrait1a.jpg" alt="" title="" />
</a>
</li>
<li>
<a href="lbox/portrait13.jpg">
<img src="images/portrait1a.jpg" alt="" title="" />
</a>
</li>
<li>
<a href="lbox/portrait14.jpg">
<img src="images/portrait1a.jpg" alt="" title="" />
</a>
</li>
<li>
<a href="lbox/portrait15.jpg">
<img src="images/portrait1a.jpg" alt="" title="" />
</a>
</li>
<li>
<a href="lbox/portrait16.jpg">
<img src="images/portrait1a.jpg" alt="" title="" />
</a>
</li>
</ul>
<!--[if lte IE 6]>
</td>
</tr>
</table>
</a>
<![endif]-->
</li>
<li class="active">
<a class="set" href="#Landscapes">
Landscapes
<!--[if gte IE 7]>
<!-->
</a>
<!--<![endif]-->
<!--[if lte IE 6]>
<table>
<tr>
<td>
<![endif]-->
<ul>
<li>
<a href="lbox/landscape1.jpg">
<img src="images/landscape1a.jpg" alt="" title="" />
</a>
</li>
<li>
<a href="lbox/landscape2.jpg">
<img src="images/landscape1a.jpg" alt="" title="" />
</a>
</li>
<li>
<a href="lbox/landscape3.jpg">
<img src="images/landscape1a.jpg" alt="" title="" />
</a>
</li>
<li>
<a href="lbox/landscape4.jpg">
<img src="images/landscape1a.jpg" alt="" title="" />
</a>
</li>
<li>
<a href="lbox/landscape5.jpg">
<img src="images/landscape1a.jpg" alt="" title="" />
</a>
</li>
<li>
<a href="lbox/landscape6.jpg">
<img src="images/landscape1a.jpg" alt="" title="" />
</a>
</li>
<li>
<a href="lbox/landscape7.jpg">
<img src="images/landscape1a.jpg" alt="" title="" />
</a>
</li>
<li>
<a href="lbox/landscape8.jpg">
<img src="images/landscape1a.jpg" alt="" title="" />
</a>
</li>
<li>
<a href="lbox/landscape9.jpg">
<img src="images/landscape1a.jpg" alt="" title="" />
</a>
</li>
<li>
<a href="lbox/landscape10.jpg">
<img src="images/landscape1a.jpg" alt="" title="" />
</a>
</li>
<li>
<a href="lbox/landscape11.jpg">
<img src="images/landscape1a.jpg" alt="" title="" />
</a>
</li>
<li>
<a href="lbox/landscape12.jpg">
<img src="images/landscape1a.jpg" alt="" title="" />
</a>
</li>
<li>
<a href="lbox/landscape13.jpg">
<img src="images/landscape1a.jpg" alt="" title="" />
</a>
</li>
<li>
<a href="lbox/landscape14.jpg">
<img src="images/landscape1a.jpg" alt="" title="" />
</a>
</li>
<li>
<a href="lbox/landscape15.jpg">
<img src="images/landscape1a.jpg" alt="" title="" />
</a>
</li>
<li>
<a href="lbox/landscape16.jpg">
<img src="images/landscape1a.jpg" alt="" title="" />
</a>
</li>
</ul>
<!--[if lte IE 6]>
</td>
</tr>
</table>
</a>
<![endif]-->
</li>
<li>
<a class="set" href="#Flowers">
Flowers
<!--[if gte IE 7]>
<!-->
</a>
<!--<![endif]-->
<!--[if lte IE 6]>
<table>
<tr>
<td>
<![endif]-->
<ul>
<li>
<a href="#flower1">
<img src="images/flower1.jpg" alt="" title="" />
</a>
</li>
<li>
<a href="#flower2">
<img src="images/flower1.jpg" alt="" title="" />
</a>
</li>
<li>
<a href="#flower3">
<img src="images/flower1.jpg" alt="" title="" />
</a>
</li>
<li>
<a href="#flower4">
<img src="images/flower1.jpg" alt="" title="" />
</a>
</li>
<li>
<a href="#flower5">
<img src="images/flower1.jpg" alt="" title="" />
</a>
</li>
<li>
<a href="#flower6">
<img src="images/flower1.jpg" alt="" title="" />
</a>
</li>
<li>
<a href="#flower7">
<img src="images/flower1.jpg" alt="" title="" />
</a>
</li>
<li>
<a href="#flower8">
<img src="images/flower1.jpg" alt="" title="" />
</a>
</li>
<li>
<a href="#flower9">
<img src="images/flower1.jpg" alt="" title="" />
</a>
</li>
<li>
<a href="#flower10">
<img src="images/flower1.jpg" alt="" title="" />
</a>
</li>
<li>
<a href="#flower11">
<img src="images/flower1.jpg" alt="" title="" />
</a>
</li>
<li>
<a href="#flower12">
<img src="images/flower1.jpg" alt="" title="" />
</a>
</li>
<li>
<a href="#flower13">
<img src="images/flower1.jpg" alt="" title="" />
</a>
</li>
<li>
<a href="#flower14">
<img src="images/flower1.jpg" alt="" title="" />
</a>
</li>
<li>
<a href="#flower15">
<img src="images/flower1.jpg" alt="" title="" />
</a>
</li>
<li>
<a href="#flower16">
<img src="images/flower1.jpg" alt="" title="" />
</a>
</li>
</ul>
<!--[if lte IE 6]>
</td>
</tr>
</table>
</a>
<![endif]-->
</li>
<li>
<a class="set" href="#Trees">
Trees
<!--[if gte IE 7]>
<!-->
</a>
<!--<![endif]-->
<!--[if lte IE 6]>
<table>
<tr>
<td>
<![endif]-->
<ul>
<li>
<a href="#tree1">
<img src="images/tree1.jpg" alt="" title="" />
</a>
</li>
<li>
<a href="#tree1">
<img src="images/tree1.jpg" alt="" title="" />
</a>
</li>
<li>
<a href="#tree1">
<img src="images/tree1.jpg" alt="" title="" />
</a>
</li>
<li>
<a href="#tree1">
<img src="images/tree1.jpg" alt="" title="" />
</a>
</li>
<li>
<a href="#tree1">
<img src="images/tree1.jpg" alt="" title="" />
</a>
</li>
<li>
<a href="#tree1">
<img src="images/tree1.jpg" alt="" title="" />
</a>
</li>
<li>
<a href="#tree1">
<img src="images/tree1.jpg" alt="" title="" />
</a>
</li>
<li>
<a href="#tree1">
<img src="images/tree1.jpg" alt="" title="" />
</a>
</li>
<li>
<a href="#tree1">
<img src="images/tree1.jpg" alt="" title="" />
</a>
</li>
<li>
<a href="#tree1">
<img src="images/tree1.jpg" alt="" title="" />
</a>
</li>
<li>
<a href="#tree1">
<img src="images/tree1.jpg" alt="" title="" />
</a>
</li>
<li>
<a href="#tree1">
<img src="images/tree1.jpg" alt="" title="" />
</a>
</li>
<li>
<a href="#tree1">
<img src="images/tree1.jpg" alt="" title="" />
</a>
</li>
<li>
<a href="#tree1">
<img src="images/tree1.jpg" alt="" title="" />
</a>
</li>
<li>
<a href="#tree1">
<img src="images/tree1.jpg" alt="" title="" />
</a>
</li>
<li>
<a href="#tree1">
<img src="images/tree1.jpg" alt="" title="" />
</a>
</li>
</ul>
<!--[if lte IE 6]>
</td>
</tr>
</table>
</a>
<![endif]-->
</li>
<li>
<a class="set" href="#Birds">
Birds
<!--[if gte IE 7]>
<!-->
</a>
<!--<![endif]-->
<!--[if lte IE 6]>
<table>
<tr>
<td>
<![endif]-->
<ul>
<li>
<a href="#bird1">
<img src="images/bird1.jpg" alt="" title="" />
</a>
</li>
<li>
<a href="#bird2">
<img src="images/bird1.jpg" alt="" title="" />
</a>
</li>
<li>
<a href="#bird3">
<img src="images/bird1.jpg" alt="" title="" />
</a>
</li>
<li>
<a href="#bird4">
<img src="images/bird1.jpg" alt="" title="" />
</a>
</li>
<li>
<a href="#bird5">
<img src="images/bird1.jpg" alt="" title="" />
</a>
</li>
<li>
<a href="#bird6">
<img src="images/bird1.jpg" alt="" title="" />
</a>
</li>
<li>
<a href="#bird7">
<img src="images/bird1.jpg" alt="" title="" />
</a>
</li>
<li>
<a href="#bird8">
<img src="images/bird1.jpg" alt="" title="" />
</a>
</li>
<li>
<a href="#bird9">
<img src="images/bird1.jpg" alt="" title="" />
</a>
</li>
<li>
<a href="#bird10">
<img src="images/bird1.jpg" alt="" title="" />
</a>
</li>
<li>
<a href="#bird11">
<img src="images/bird1.jpg" alt="" title="" />
</a>
</li>
<li>
<a href="#bird12">
<img src="images/bird1.jpg" alt="" title="" />
</a>
</li>
<li>
<a href="#bird13">
<img src="images/bird1.jpg" alt="" title="" />
</a>
</li>
<li>
<a href="#bird14">
<img src="images/bird1.jpg" alt="" title="" />
</a>
</li>
<li>
<a href="#bird15">
<img src="images/bird1.jpg" alt="" title="" />
</a>
</li>
<li>
<a href="#bird16">
<img src="images/bird1.jpg" alt="" title="" />
</a>
</li>
</ul>
<!--[if lte IE 6]>
</td>
</tr>
</table>
</a>
<![endif]-->
</li>
</ul>
<br class="clear" />
</div>
部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！