文章内容

DIV+CSS相册惊叹的效果！

作者：admin 来源：未知日期：2012-01-06 点击：0

　　这是子鼠制作的相册，完全用CSS来表现效果！非常棒，令人惊叹。
　　看下面的效果图：

　　运行查看最终效果：

Source Code to Run []

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test div</title>
<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(http://www.zishu.cn/images/b1.jpg)}
.b2{ background:url(http://www.zishu.cn/images/b2.jpg)}
.b3{ background:url(http://www.zishu.cn/images/b3.jpg)}
.b4{ background:url(http://www.zishu.cn/images/b4.jpg)}
.b5{ background:url(http://www.zishu.cn/images/b5.jpg)}
.b6{ background:url(http://www.zishu.cn/images/b6.jpg)}
</style>
</head>
<body>
<div id="info">
  <h3>子鼠的CSS相册</h3>
  <div id="zs">
    <ul>
      <li><span><img src="/Image/20111027180651566.jpg" alt="照片1" /><br />
        这是照片1<br />
        www.zishu.cn</span></li>
      <li><span><img src="/Image/20111027180651567.jpg" alt="照片2" /><br />
        这是照片2<br />
        www.zishu.cn</span></li>
      <li><span><img src="/Image/20111027180651568.jpg" alt="照片3" /><br />
        这是照片3<br />
        www.zishu.cn</span></li>
      <li><span><img src="/Image/20111027180651569.jpg" alt="照片4" /><br />
        这是照片4<br />
        www.zishu.cn</span></li>
      <li><span><img src="/Image/20111027180651570.jpg" alt="照片5" /><br />
        这是照片5<br />
        www.zishu.cn</span></li>
      <li><span><img src="/Image/20111027180651571.jpg" alt="照片6" /><br />
        这是照片6<br />
        www.zishu.cn</span></li>
      <li><span><img src="/Image/20111027180651566.jpg" alt="照片1" /><br />
        这是照片1<br />
        www.zishu.cn</span></li>
      <li><span><img src="/Image/20111027180651567.jpg" alt="照片2" />
<div id="more"><a>共2页: </a><a href='#'>上一页</a><a href='#'>1</a><a href='010631R012_2.html'>2</a><a href='010631R012_2.html'>下一页</a></div>
<div id="tdd">
<center><script language="JavaScript" src="/ad/468X60-2.js"></script></center>
<h1>相关文章</h1>
<ul><li>
 · <a class=cGray href="/Div_CSSjiaocheng/20120106/010631R012.html" title="DIV+CSS相册 惊叹的效果！">DIV+CSS相册 惊叹的效果！</a>
</li>
<li>
 · <a class=cGray href="/Div_CSSjiaocheng/20120106/01063132012.html" title="CSS Prism侦测在CSS中用了多少颜色">CSS Prism侦测在CSS中用了多少颜色</a>
</li>
<li>
 · <a class=cGray href="/Div_CSSjiaocheng/20120103/010330R012.html" title="关于CSS网页布局id与class命名及编码的6个最佳习惯">关于CSS网页布局id与class命名及编码的6个最佳习惯</a>
</li>
<li>
 · <a class=cGray href="/Div_CSSjiaocheng/20120103/01033032012.html" title="CSS画三角形的方法及应用实例">CSS画三角形的方法及应用实例</a>
</li>
<li>
 · <a class=cGray href="/Div_CSSjiaocheng/20120102/01022b2012.html" title="Div+CSS 网页布局 教程！">Div+CSS 网页布局 教程！</a>
</li>
<li>
 · <a class=cGray href="/Div_CSSjiaocheng/20120102/01022932012.html" title="简单实用的CSS网页布局中文排版心得">简单实用的CSS网页布局中文排版心得</a>
</li>
<li>
 · <a class=cGray href="/Div_CSSjiaocheng/20120102/01022X2012.html" title="text-indent 隐藏文字 出现虚线框outline">text-indent 隐藏文字 出现虚线框outline</a>
</li>
<li>
 · <a class=cGray href="/Div_CSSjiaocheng/20120102/01022S2012.html" title="DIV CSS网页布局：HTML结构化 DIV CSS网页布局入门指">DIV CSS网页布局：HTML结构化 DIV CSS网页布局入门指</a>
</li>
<li>
 · <a class=cGray href="/Div_CSSjiaocheng/20120102/01022O2012.html" title="用CSS样式来处理表格边框的实例">用CSS样式来处理表格边框的实例</a>
</li>
<li>
 · <a class=cGray href="/Div_CSSjiaocheng/20120102/01022I2012.html" title="CSS的ID与class类的长命名和短命名">CSS的ID与class类的长命名和短命名</a>
</li>
</ul><div id="moretop"><a href="#top">↑返回顶部</a></div></div>
<form action="/plus/feedback.php?action=send" method="post" name="feedback"><input type="hidden" name="arcID" value="318">   用户名:<input name="username" type="text" id="username" size="10" class="nb"> (<a href="/member/index_do.php?fmdo=user&dopost=regnew" target="_blank">新注册</a>)  密码:  <input name="pwd" type="text" id="pwd" size="10"class="nb"><input name="notuser" type="checkbox" id="notuser" value="1">  匿名评论  [<a href="/plus/feedback.php?arcID=318">所有评论</a>] <input type='button' value='发表评论' name='sb' onClick='javascript:if(document.feedback.msg.value!="") document.feedback.submit(); else alert("评论内容不能为空！");' style='width:50;height:15'>
    注意:（评论内容不能超过250字,需审核后才会公布,可以匿名评论,请自觉遵守互联网相关政策法规。）<textarea name="msg" cols="75" rows="4" id="msg" style="width:98%">

您现在的位置：主页 > Div+CSS教程 > 文章内容

DIV+CSS相册惊叹的效果！

精彩广告

精彩推荐

您现在的位置：主页 > Div+CSS教程 > 文章内容

DIV+CSS相册 惊叹的效果！

精彩广告

精彩推荐

DIV+CSS相册惊叹的效果！