CSS应用——相册V1.0

先看看效果图：

上边的效果是鼠标经过时才会显示大图，具体效果请查看样例。

样例下载：点击下载

Body部分：

<div id="wrap">
  <div id="main" class="clearfix">
    <div id="content">
        <h3>拂云飘海龙的相册</h3>
        <div id="zs">
          <ul>
            <li><a href="http://www.cnblogs.com/uhome" class="b1 z" title="照片1" target="_blank"><span><img src="images/a1.jpg" alt="照片1" /><br />这是照片1<br />http://www.cnblogs.com/uhome</span></a></li>
            <li><a href="http://www.cnblogs.com/uhome" class="b2 z" title="照片2 " target="_blank"><span><img src="images/a2.jpg" alt="照片2" /><br />这是照片2<br />http://www.cnblogs.com/uhome</span></a></li>
            <li><a href="http://www.cnblogs.com/uhome" class="b3 z" title="照片3" target="_blank"><span><img src="images/a3.jpg" alt="照片3" /><br />这是照片3<br />http://www.cnblogs.com/uhome</span></a></li>
            <li><a href="http://www.cnblogs.com/uhome" class="b4 z" title="照片4" target="_blank"><span><img src="images/a4.jpg" alt="照片4" /><br />这是照片4<br />http://www.cnblogs.com/uhome</span></a></li>
            <li><a href="http://www.cnblogs.com/uhome" class="b5 z" title="照片5" target="_blank"><span><img src="images/a5.jpg" alt="照片5" /><br />这是照片5<br />http://www.cnblogs.com/uhome</span></a></li>
            <li><a href="http://www.cnblogs.com/uhome" class="b6 z" title="照片6" target="_blank"><span><img src="images/a6.jpg" alt="照片6" /><br />这是照片6<br />http://www.cnblogs.com/uhome</span></a></li>
            <li><a href="http://www.cnblogs.com/uhome" class="b7 z" title="照片7" target="_blank"><span><img src="images/a7.jpg" alt="照片7" /><br />这是照片7<br />http://www.cnblogs.com/uhome</span></a></li>
            <li><a href="http://www.cnblogs.com/uhome" class="b8 z" title="照片8" target="_blank"><span><img src="images/a8.jpg" alt="照片8" /><br />这是照片8<br />http://www.cnblogs.com/uhome</span></a></li>
          </ul>
        </div>
    </div>
  </div>
</div>
<div id="footer">
  <div id="foot">
      <div id="left">
            <p><a href="http://www.cnblogs.com/uhome">css sticky footer</a></p>
            <p>这是一个Div+Css相册效果</p>
        </div>
        <div id="right">
            <p>Copyright ©2009 <a href="http://www.cnblogs.com/uhome/">拂云漂海龙</a> Powered by: Chotim</p>
        </div>
</div>
</div>

CSS部分：

/*Example Source Code*/
body{margin:0; padding:0; font-size:12px; background:#eee; line-height:1.7; font-family:Verdana, "宋体"; overflow:hidden;}

#content{background: #666; text-align: center; height: 430px; width: 600px; border: 1px solid #000; margin:0 auto;}

h3{margin:10px 0 0 0; color:#fff; font-size:12px;}

p{margin:5px 0 5px 0;}

span{visibility:hidden; position:absolute; overflow:hidden;}

ul,li{list-style:none; margin:0; padding:0;}

a:active,a:hover{cursor:pointer;}

a:active span,a:hover span{position:absolute; top:90px; z-index:20; visibility:visible; margin-left:80px;}

#content img{width:400px; height:280px; border:7px solid #fff;}

#zs{width:140px; height:340px; overflow:auto; float:left; margin-top:20px; margin-bottom:50px;}

.z{width:80px; height:56px; display:block; border:1px solid #fff; margin:4px 0 4px 25px; color:#fff;}

.b1{background:url(images/b1.jpg);}
.b2{background:url(images/b2.jpg);}
.b3{background:url(images/b3.jpg);}
.b4{background:url(images/b4.jpg);}
.b5{background:url(images/b5.jpg);}
.b6{background:url(images/b6.jpg);}
.b7{background:url(images/b7.jpg);}
.b8{background:url(images/b8.jpg);}

样例下载：点击下载

1.CSS应用——相册V2.0

2.CSS应用——相册V3.0

来源：http://www.zishu.cn/blogview.asp?logID=459

posted on 2010-01-07 20:10 拂云漂海龙阅读(431) 评论(0) 编辑收藏举报