简易CSS相册源代码

 很早以前就有很多关于用CSS制作的相册，今天突然想看又找不到，反正也无聊，自己做了一下，结果做一下发现自己温习了一些东西。还行，呵呵！

我做的这个CSS相册呢大概有下面这样几个功能以及缺点。

1、小图是利用大图在li中的负边距隐藏，显示部分内容（这样就失去了图片中亮点，不过可以单独对每个小图加负边距，控制不同的位置，但不实际）

2、大图显示的时候图片大小最好是要固定的，没办法自适应宽高！

3、针对IE6还要多加几个样式来实现:hover的BUG问题

主要的CSS部分：

 ul {width:148px;height:590px;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;}
img {display:block;overflow:hidden;border:none;margin:-150px 0 0 -80px;} /* margin的负值是控制图片显示小图的大概位置 */
/* 主要针对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;}
#photo {width:748px;height:590px;margin:0 auto;position:relative;background:#333;}

主要的xhtml部分：

 <div id="photo">
    <ul>
        <li>
            <a href="#" title=""><img src="images/1.jpg" alt="" /></a>
        </li>
        <li>
            <a href="#" title=""><img src="images/2.jpg" alt="" /></a>
        </li>
        <li>
            <a href="#" title=""><img src="images/3.jpg" alt="" /></a>
        </li>
        <li>
            <a href="#" title=""><img src="images/4.jpg" alt="" /></a>
        </li>
        <li>
            <a href="#" title=""><img src="images/5.jpg" alt="" /></a>
        </li>
        <li>
            <a href="#" title=""><img src="images/6.jpg" alt="" /></a>
        </li>
        <li>
            <a href="#" title=""><img src="images/7.jpg" alt="" /></a>
        </li>
        <li>
            <a href="#" title=""><img src="images/8.jpg" alt="" /></a>
        </li>
        <li>
            <a href="#" title=""><img src="images/9.jpg" alt="" /></a>
        </li>
    </ul>
</div>

测试环境：IE6、IE7、FF2

简易CSS相册演示demo地址：album.html