ddc
联网
Dreamweaver Flash Photoshop 其它周边 web标准 asp php .net CSS WAP网站攻略 专题
网站建设 域名注册 网站建设 虚拟主机 广州网站设计 域名注册 广州网站建设 上海网站建设 虚拟主机 广州网页设计 虚拟主机 域名注册 acg王国 ACG玩家 品牌设计 上海网站建设
求创科技
网站建设
中国互联
素材出售
中国设计秀
中资源
当前位置:网络学院首页 >> 设计教程 >> web标准 >> DIV+CSS实现的一个相册的效果

DIV+CSS实现的一个相册的效果

来源:中国设计秀    作者:    点击:879     加入收藏
以下就是效果。



HTML代码


         
这些代码不是最优的,我正在想。

程序代码
<style>
body{ margin:0; padding:0; font-size:12px; background: #333333; line-height:1.7; font-family:Verdana, "宋体"; overflow:hidden }
#info{ width:600px; background: #666666; margin-left:auto; margin-right:auto; text-align:center; border:1px solid #FFFFFF; height:450px; margin-top:20px;}
h3{ margin:30px 0 0 0; color:#CC0000; font-size:12px;color:#FFF}
span{visibility:hidden; position:absolute; overflow:hidden;}
ul,li{ list-style:none; margin:0; padding:0;}
a:active,a:hover{ cursor:pointer}
a:hover span,a:active span{position:absolute; top:90px;  z-index:20px; visibility: visible; margin-left:-500px;}
#info img{ width:400px; height:280px; border:7px solid #FFFFFF}
#zs{ height:340px; overflow: auto; width:140px; float:right; margin-top:20px; margin-bottom:50px;}
.z{ width:80px; height:56px;display:block; border:1px solid #FFFFFF; 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)}
</style>


程序代码
<div id="info">
  <h3>CSS相册</h3>
  <div id="zs">
    <ul>
      <li><a href="http://www.cnwebshow.com" class="b1 z" target="_blank" title="照片1"><span><img src="images/a1.jpg" alt="照片1" /><br />
        这是照片1<br />
        www.cnwebshow.com</span></a></li>
      <li><a href="http://www.cnwebshow.com" class="b2 z" target="_blank" title="照片2"><span><img src="images/a2.jpg" alt="照片2" /><br />
        这是照片2<br />
        www.cnwebshow.com</span></a></li>
      <li><a href="http://www.cnwebshow.com" class="b3 z" target="_blank" title="照片3"><span><img src="images/a3.jpg" alt="照片3" /><br />
        这是照片3<br />
        www.cnwebshow.com</span></a></li>
      <li><a href="http://www.cnwebshow.com" class="b4 z" target="_blank" title="照片4"><span><img src="images/a4.jpg" alt="照片4" /><br />
        这是照片4<br />
        www.cnwebshow.com</span></a></li>
      <li><a href="http://www.cnwebshow.com" class="b5 z" target="_blank" title="照片5"><span><img src="images/a5.jpg" alt="照片5" /><br />
        这是照片5<br />
        www.cnwebshow.com</span></a></li>
      <li><a href="http://www.cnwebshow.com" class="b6 z" target="_blank" title="照片6"><span><img src="images/a6.jpg" alt="照片6" /><br />
        这是照片6<br />
        www.cnwebshow.com</span></a></li>
      <li><a href="http://www.cnwebshow.com" class="b1 z" target="_blank" title="照片1"><span><img src="images/a1.jpg" alt="照片1" /><br />
        这是照片1<br />
        www.cnwebshow.com</span></a></li>
      <li><a href="http://www.cnwebshow.com" class="b2 z" target="_blank" title="照片2"><span><img src="images/a2.jpg" alt="照片2" /><br />
        这是照片2<br />
        www.cnwebshow.com</span></a></li>
    </ul>
  </div>
</div>


0
顶一下
2007-08-05 17:51:00    出处:
Google
热点文章/相关文章
网站地图 | 关于我们 | 联系我们 | 网站建设 | 广告服务 | 版权声明 | 免责声明 | 网站公告 | 友情链接 | 留言 | 旧版入口