DIV+CSS 一个相册的效果

css

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

以下就是效果。

 HTML代码<!DOCTYPEhtml 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(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></head><body><div id="info"> <h3>子鼠的CSS相册</h3> <div id="zs"><ul> <li><a href="http://www.zishu.cn" class="b1 z"target="_blank" title="照片1"><span><img src="/UploadPic/2007-4/200741142150405.jpg"alt="照片1" /><br /> 这是照片1<br />www.zishu.cn</span></a></li> <li><ahref="http://www.zishu.cn" class="b2 z" target="_blank"title="照片2"><span><img src="/UploadPic/2007-4/200741142150536.jpg" alt="照片2"/><br /> 这是照片2<br />www.zishu.cn</span></a></li> <li><ahref="http://www.zishu.cn" class="b3 z" target="_blank"title="照片3"><span><img src="/UploadPic/2007-4/200741142150726.jpg" alt="照片3"/><br /> 这是照片3<br />www.zishu.cn</span></a></li> <li><ahref="http://www.zishu.cn" class="b4 z" target="_blank"title="照片4"><span><img src="/UploadPic/2007-4/200741142151628.jpg" alt="照片4"/><br /> 这是照片4<br />www.zishu.cn</span></a></li> <li><ahref="http://www.zishu.cn" class="b5 z" target="_blank"title="照片5"><span><img src="/UploadPic/2007-4/200741142151634.jpg" alt="照片5"/><br /> 这是照片5<br />www.zishu.cn</span></a></li> <li><ahref="http://www.zishu.cn" class="b6 z" target="_blank"title="照片6"><span><img src="/UploadPic/2007-4/200741142151594.jpg" alt="照片6"/><br /> 这是照片6<br />www.zishu.cn</span></a></li> <li><ahref="http://www.zishu.cn" class="b1 z" target="_blank"title="照片1"><span><img src="/UploadPic/2007-4/200741142150405.jpg" alt="照片1"/><br /> 这是照片1<br />www.zishu.cn</span></a></li> <li><ahref="http://www.zishu.cn" class="b2 z" target="_blank"title="照片2"><span><img src="/UploadPic/2007-4/200741142150536.jpg" alt="照片2"/><br /> 这是照片2<br />www.zishu.cn</span></a></li> </ul> </div></div></body></html>

时间: 2024-11-01 05:48:19

DIV+CSS&nbsp;一个相册的效果的相关文章

DIV+CSS的一个隐藏出现效果

css  HTML代码<!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="

请高手指点asp.net中如何加入div+css代码,实现菜单效果

问题描述 问题如下:下面的DIV+CSS代码是一个菜单,想用在asp.net中.大类和小类分别从数据库中循环读取出来,显示在指定位置的aspx页面中,相当于动态添加.便于后期维护.有什么好的方法实现吗?<divclass="wrapper"><divclass="nav-bg"><divclass="nav-list"><ulid="nav"class="nav"&

Jsp+div+css 新建一个iframe(src是一个新的JSP页面)

问题描述 我用JSP+DIV+CSS模拟出一个模态的弹窗(新建了一个iframe,存放新的JSP页面),当我关闭新页面时(按钮在新的Jsp中),如何关闭这个页面和DIV 解决方案 解决方案二:在iframe的页面中,要操作上级页面,用parent.XXX()就可以了,XXX你可以写成个关闭div的函数.

用DIV+CSS如何实现这种表格效果_CSS/HTML

表格效果table                     [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 表格效果div+css xmlns="http://www.w3.org/1999/xhtml"> 1 2 3 4 5 6 7 8 9 10 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

DIV+CSS垂直居中一个浮动元素

 场景:在一个固定高度的div中,有一个浮动的元素,需要将这个浮动元素垂直居中. 原始代码如下: 代码如下: <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> .wrapper{ width: 400px; height: 300px; background-color: #1f8dd6; } button{ float: r

div+css+js模拟tab切换效果 事件绑定 IE,firefox兼容_javascript技巧

框1111 框2222 框3333 框4444 这里是内容撒.111.. 这里是内容撒.111.. 这里是内容撒.111.. 这里是内容撒222.. 这里是内容撒.222.. 这里是内容撒.222.. 这里是内容撒.333.. 这里是内容撒.333.. 这里是内容撒.333.. 这里是内容撒.444.. 这里是内容撒.444.. 这里是内容撒.444..

DIV+CSS布局的好处

1 内容和形式分离,网页前台只需要显示内容就行,形式上的美工交给CSS来处理.生成的HTML文件代码精简,更小打开更快. 2 改版网站更简单容易了,不用重新设计排版网页,甚至于不用动原网站的任何HTML和程序页面,只需要改动CSS文件就完成了所有改版.对于门户网站来说改版就像换件衣服一样简单容易. 3 搜索引擎更友好,排名更容易靠前. 第一 内容和形式分离,网页前台只需要显示内容就行,形式上的美工交给CSS来处理.生成的HTML文件代码精简,更小打开更快. 这个是DIV+CSS技术最现著的特点,

DIV+CSS建设网页简单的6个步骤

网页制作Webjx文章简介:DIV+CSS建设网页简单的6个步骤. 大家都知道用DIV+CSS的布局来设计网站便于优化,容易被收录,比如两个网站同时上线,拥有同样的外链,推广2个月后,保证使用DIV+CSS布局的站点获得的排名比传统的TABLE 要好,用DIV+CSS建设该网站首先是从整体布局入手,构思好网站的整体布局结构,一般我们按以下步骤来建设一个网站的页面: 1.顶部部分,其中包括了LOGO.MENU和一幅Banner图片: 2.页面中间部分,那就是我们的主体了,这里就以我们为一客户做的站

【DIV+CSS入门教程】使用Table布局是不明智的

使用Table布局页面为什么是不明智的? 大家看到标题,不要误解认为在页面中不能使用Table,而是可以使用Table,但是尽量不要用Table去布局页面,为什么这么说呢,因为使用Table布局页面会使页面失去灵活性,怎么个灵活法呢,比如今天你好不容易做出来的页面,第二天老板说我不喜欢登录模块放到右边,还是放到左边,通知板块放到右侧去,页面风格最好一个月换一种,如果遇到这种老板,提出这种要求,并且你的页面是用Table布局的,那么你会崩溃的,工作量那是大大滴~,如果不相信的话,你们自己可以找个页