DIV+CSS 相册效果实例源代码

css|源代码

以前用FLASH作过一个FLASH相册—网络版 这个效果有点学这个的意思。

为了一行了的代码，我已经花了两个晚上来想了，结果下来就是感觉IE有点变态。用正常的想法去作，FIREFOX 等浏览器都没有问题，只有IE不可以。只有加那么一行垃圾代码，IE才能正常显示。

以下就是效果：

运行代码框

<!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(/UploadPic/2007-7/200777205430312.jpg)}.b2{ background:url(/UploadPic/2007-7/200777205430562.jpg)}.b3{ background:url(/UploadPic/2007-7/200777205430945.jpg)}.b4{ background:url(/UploadPic/2007-7/200777205431703.jpg)}.b5{ background:url(/UploadPic/2007-7/200777205431906.jpg)}.b6{ background:url(/UploadPic/2007-7/200777205430312.jpg)}</style></head><body><div id="info"> <h3>子鼠的CSS相册</h3> <div id="zs"> <ul> <li><a href="http://webjx.com" class="b1 z" target="_blank" title="照片1"><span><img src="/UploadPic/2007-7/200777205430312.jpg" alt="照片1" /><br /> 这是照片1<br /> webjx.com</span></a></li> <li><a href="http://webjx.com" class="b2 z" target="_blank" title="照片2"><span><img src="/UploadPic/2007-7/200777205430562.jpg" alt="照片2" /><br /> 这是照片2<br /> webjx.com</span></a></li> <li><a href="http://webjx.com" class="b3 z" target="_blank" title="照片3"><span><img src="/UploadPic/2007-7/200777205430945.jpg" alt="照片3" /><br /> 这是照片3<br /> webjx.com</span></a></li> <li><a href="http://webjx.com" class="b4 z" target="_blank" title="照片4"><span><img src="/UploadPic/2007-7/200777205431703.jpg" alt="照片4" /><br /> 这是照片4<br /> webjx.com</span></a></li> <li><a href="http://webjx.com" class="b5 z" target="_blank" title="照片5"><span><img src="/UploadPic/2007-7/200777205431906.jpg" alt="照片5" /><br /> 这是照片5<br /> webjx.com</span></a></li> <li><a href="http://webjx.com" class="b6 z" target="_blank" title="照片6"><span><img src="/UploadPic/2007-7/200777205430312.jpg" alt="照片6" /><br /> 这是照片6<br /> webjx.com</span></a></li> <li><a href="http://webjx.com" class="b1 z" target="_blank" title="照片1"><span><img src="/UploadPic/2007-7/200777205430312.jpg" alt="照片1" /><br /> 这是照片1<br /> webjx.com</span></a></li> <li><a href="http://webjx.com" class="b2 z" target="_blank" title="照片2"><span><img src="/UploadPic/2007-7/200777205430562.jpg" alt="照片2" /><br /> 这是照片2<br /> webjx.com</span></a></li> </ul> </div></div></body></html>

    [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

这些代码不是最优的，我正在想更好的。

CODE:<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(/articleimg/2006/07/3784/b1.jpg)}
.b2{ background:url(/articleimg/2006/07/3784/b2.jpg)}
.b3{ background:url(/articleimg/2006/07/3784/b3.jpg)}
.b4{ background:url(/articleimg/2006/07/3784/b4.jpg)}
.b5{ background:url(/articleimg/2006/07/3784/b5.jpg)}
.b6{ background:url(/articleimg/2006/07/3784/b6.jpg)}
</style>

CODE:

<div id="info">
  <h3>子鼠的CSS相册</h3>
  <div id="zs">
    <ul>
      <li><a href="http://www.blueidea.com" class="b1 z" target="_blank" title="照片1"><span><img src="http://www.webjx.com/articleimg/2006/07/3784/a1.jpg" alt="照片1" /><br />
        这是照片1<br />
        www.blueidea.com</span></a></li>
      <li><a href="http://www.blueidea.com" class="b2 z" target="_blank" title="照片2"><span><img src="http://www.webjx.com/articleimg/2006/07/3784/a2.jpg" alt="照片2" /><br />
        这是照片2<br />
        www.blueidea.com</span></a></li>
      <li><a href="http://www.blueidea.com" class="b3 z" target="_blank" title="照片3"><span><img src="http://www.webjx.com/articleimg/2006/07/3784/a3.jpg" alt="照片3" /><br />
        这是照片3<br />
        www.blueidea.com</span></a></li>
      <li><a href="http://www.blueidea.com" class="b4 z" target="_blank" title="照片4"><span><img src="http://www.webjx.com/articleimg/2006/07/3784/a4.jpg" alt="照片4" /><br />
        这是照片4<br />
        www.blueidea.com</span></a></li>
      <li><a href="http://www.blueidea.com" class="b5 z" target="_blank" title="照片5"><span><img src="http://www.webjx.com/articleimg/2006/07/3784/a5.jpg" alt="照片5" /><br />
        这是照片5<br />
        www.blueidea.com</span></a></li>
      <li><a href="http://www.blueidea.com" class="b6 z" target="_blank" title="照片6"><span><img src="http://www.webjx.com/articleimg/2006/07/3784/a6.jpg" alt="照片6" /><br />
        这是照片6<br />
        www.blueidea.com</span></a></li>
      <li><a href="http://www.blueidea.com" class="b1 z" target="_blank" title="照片1"><span><img src="http://www.webjx.com/articleimg/2006/07/3784/a1.jpg" alt="照片1" /><br />
        这是照片1<br />
        www.blueidea.com</span></a></li>
      <li><a href="http://www.blueidea.com" class="b2 z" target="_blank" title="照片2"><span><img src="http://www.webjx.com/articleimg/2006/07/3784/a2.jpg" alt="照片2" /><br />
        这是照片2<br />
        www.blueidea.com</span></a></li>
    </ul>
  </div>
</div>

时间： 2024-12-27 17:03:16

DIV+CSS 相册效果实例源代码的相关文章

jQuery实现的Div窗口震动效果实例_jquery

本文实例讲述了jQuery实现的Div窗口震动效果.分享给大家供大家参考.具体如下: 这是一款jQuery窗口震动效果代码,在Div边框内点击一下鼠标,它就开始震动了,适用浏览器:IE8.360.FireFox.Chrome.Opera.傲游.搜狗.世界之窗等. 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/D

jQuery实现div拖拽效果实例分析_jquery

本文实例分析了jQuery实现div拖拽效果.分享给大家供大家参考,具体如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> New Document </title> <script type=&q

DIV CSS布局网页实例：简单表单form标准化实例

css|标准|网页 form无论是在网站的制作中,还是在网站的重构中,我们都会频繁地"碰面",当"碰面"的次数多了,反而觉得他更让人迷茫,有种熟悉的"陌生",越来越把握不了他. 下面我们将带大家走进form的世界,一起来熟悉.探讨.掌握他的"脾性". 对于简单form的设计图(如图一,yahoo注册页面的一部分),我们如何来做整体的布局呢?大体我们可以选用以下3种方式来做布局: 1.使用table来布局 这是大家最常用的方法,

DIV CSS网页布局实例：自定义标签布局页面

css|网页|页面 我们可以自定义标记来布局页面. 有的朋友可能有这样的疑问,自己随便定义的标记浏览器怎么能正确的认识呢? 这里我们就要用到文档的命名空间,那么命名空间又是指什么? 大家知道XML有一个很大的特点就是他的可扩展性.你可以创建你自己的标记或使用别人创建的标记,这里就存在了一个问题,即你所定义的标记和别人定义的标识有可能相同,但他们各自所表示的意义却不同. 打一个形象的比喻,比如有两个人名字都叫webjx_com,一个人在中国,一个人在外国,如果你要找他们就可以说,中国的,外国的,这

DIV CSS网页布局实例解析：实现表格形式

css|网页 本教程是利用DIV+CSS的UL LI实现表格的形式的一种方法,也就是说在标准前提下可以实现表格的形式的. 表格的数据,就应该使用表格来组织,不是说制作符合WEB标准的网站,表格就一无是处.彻底下岗了.表格类的数据,它有着得天独厚的条件,也非常方便组织.这类数据内容直接使用表格就可以了. 或许你认为你的数据并不是表格式的数据,还有着其它的用法或你自己的见解,我们也可以用ul.li来实现表格形式的布局. 我们首先分析一下如何制作:li是固定的宽度与高度(单元格),设置li在ul中浮动

Javascript实现div的toggle效果实例分析

 本文实例讲述了Javascript实现div的toggle效果.分享给大家供大家参考.具体分析如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69

Javascript实现div的toggle效果实例分析_javascript技巧

本文实例讲述了Javascript实现div的toggle效果.分享给大家供大家参考.具体分析如下: <script type="text/javascript" language="javascript"> function $(obj) { return document.getElementById(obj); } function ToggleDiv() { this.ToggleId='silder'; //被伸缩的对象ID this.Pare

HTML DIV+CSS制作通栏实例

通栏在网页中的概念想必大家都有所了解吧,下面本文通过HTML DIV+CSS简单实现下,喜欢的朋友可以参考下哦   HTML DIV+CSS制作通栏 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-

DIV CSS网页布局实例：十步学会用CSS建站

css|网页 Update:本篇已得到原作者Steve Dennis的翻译准予,在此Jorux表示感谢! 本教程主要参考Creating a CSS Layout from scratch,由Jorux翻译,以意译为主,其间加入了不少Jorux的个人观点,省略了一些多余的说明,请读者明鉴. 目录: 第一步:规划网站,本教程将以图示为例构建网站: 第二步:创建html模板及文件目录等: 第三步:将网站分为五个div,网页基本布局的基础: 第四步:网页布局与div浮动等: 第五步:网页主要框架之外的