很好的CSS相册，IE6有效，火狐有问题。高手解决！(页 1) - 前台制作与脚本专栏 - 经典论坛网页-网站-制作-设计-编程

gdc123 发表于 2008-8-28 11:35

很好的CSS相册，IE6有效，火狐有问题。高手解决！

[html]
<html>
<head>
<title>相册</title>
<meta http-equiv="Content-Type"

content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language"

content="zh-CN" />

<style type="text/css">
* { padding:0; margin:0; }

ul { display:block; position:relative;

width:1008px; height:602px; background:#ccc;

list-style:none; }
li { float:left; border:1px

solid #fff; border-width:1px 0 0 1px;

width:125px; height:85px; z-index:100; }
a {

display:block;cursor:default;

position:relative; z-index:20; float:left;  }
a img { position:relative;

border:0; width:125px; height:85px; z-

index:30; }
li.rgt a img,
li.lft a img { width:124px; }

li.rgt,
li.lft { width:124px; border

-right:1px solid #fff; }

li.lft a img,
li.lft { width:124px; }
li.rgt { float:right;

clear:right;  }
li.lft { float:left;

clear:left; }
li.box { width:1008px;

height:0; border:0; font-size:0; line-

height:0;  }
a:hover { position:absolute;

top:0px; left:0; z-index:200; padding:65px

105px; }
a:hover img {

position:relative; z-index:200; border:1px

solid #fff; width:798px; height:472px; }

</style>

</head>
<body id="" class="">

<ul id="">
<li><a href="#no"><img

src="http://desk.blueidea.com/desk/XP/225/xpb

z0503.jpg" alt="1" /></a></li>
<li><a href="#no"><img

src="http://desk.blueidea.com/desk/XP/225/xpb

z0502.jpg" alt="2" /></a></li>
<li><a href="#no"><img

src="http://desk.blueidea.com/desk/XP/225/xpb

z0504.jpg" alt="3" /></a></li>

<li><a href="#no"><img

src="http://desk.blueidea.com/desk/XP/225/xpb

z0501.jpg" alt="4" /></a></li>
<li><a href="#no"><img

src="http://desk.blueidea.com/desk/XP/225/xpb

z0510.jpg" alt="5" /></a></li>

<li><a href="#no"><img

src="http://desk.blueidea.com/desk/XP/225/xpb

z0503.jpg" alt="6" /></a></li>
<li><a href="#no"><img

src="http://desk.blueidea.com/desk/XP/225/xpb

z0502.jpg" alt="7" /></a></li>
<li class="rgt"><a

href="#no"><img

src="http://desk.blueidea.com/desk/XP/225/xpb

z0503.jpg" alt="8" /></a></li>

<li class="lft"><a

href="#no"><img

src="http://desk.blueidea.com/desk/XP/225/xpb

z0504.jpg" alt="9" /></a></li>
<li class="rgt"><a

href="#no"><img

src="http://desk.blueidea.com/desk/XP/225/xpb

z0501.jpg" alt="10" /></a></li>
<li class="lft"><a

href="#no"><img

src="http://desk.blueidea.com/desk/XP/225/xpb

z0502.jpg" alt="11" /></a></li>
<li class="rgt"><a

href="#no"><img

src="http://desk.blueidea.com/desk/XP/225/xpb

z0503.jpg" alt="12" /></a></li>

<li class="lft"><a

href="#no"><img

src="http://desk.blueidea.com/desk/XP/225/xpb

z0510.jpg" alt="13" /></a></li>
<li class="rgt"><a

href="#no"><img

src="http://desk.blueidea.com/desk/XP/225/xpb

z0503.jpg" alt="14" /></a></li>
<li class="lft"><a

href="#no"><img

src="http://desk.blueidea.com/desk/XP/225/xpb

z0504.jpg" alt="15" /></a></li>
<li class="rgt"><a

href="#no"><img

src="http://desk.blueidea.com/desk/XP/225/xpb

z0502.jpg" alt="16" /></a></li>

<li class="lft"><a href="#no"><img

src="http://desk.blueidea.com/desk/XP/225/xpb

z0503.jpg" alt="17" /></a></li>
<li class="rgt"><a

href="#no"><img

src="http://desk.blueidea.com/desk/XP/225/xpb

z0501.jpg" alt="18" /></a></li>

<li class="box"></li>

<li><a href="#no"><img

src="http://desk.blueidea.com/desk/XP/225/xpb

z0503.jpg" alt="19" /></a></li>
<li><a href="#no"><img

src="http://desk.blueidea.com/desk/XP/225/xpb

z0502.jpg" alt="20" /></a></li>
<li><a href="#no"><img

src="http://desk.blueidea.com/desk/XP/225/xpb

z0501.jpg" alt="21" /></a></li>

<li><a href="#no"><img

src="http://desk.blueidea.com/desk/XP/225/xpb

z0504.jpg" alt="22" /></a></li>
<li><a href="#no"><img

src="http://desk.blueidea.com/desk/XP/225/xpb

z0510.jpg" alt="23" /></a></li>

<li><a href="#no"><img

src="http://desk.blueidea.com/desk/XP/225/xpb

z0503.jpg" alt="24" /></a></li>
<li><a href="#no"><img

src="http://desk.blueidea.com/desk/XP/225/xpb

z0504.jpg" alt="25" /></a></li>

<li class="rgt"><a

href="#no"><img

src="http://desk.blueidea.com/desk/XP/225/xpb

z0502.jpg" alt="26" /></a></li>
</ul>
</body>
</html>
[/html]

[color=Red]在IE6中，很流畅的相册。而在火狐中上、下端的图片，要在鼠标移出图片区，重新移到另一张上，才显示；左、右端的图片几乎不显示。[/color]

[[i] 本帖最后由 gdc123 于 2008-8-28 11:45 编辑 [/i]]

flashghost 发表于 2008-8-28 11:37

看看

gdc123 发表于 2008-8-28 11:41

在IE6中，很流畅的相册。而在火狐中上、下端的图片，要在鼠标移出图片区，重新移到另一张上，才显示；左、右端的图片几乎不显示。

FreeCity 发表于 2008-8-28 13:07

[html]
<html>
<head>
<title>相册</title>
<meta http-equiv="Content-Type"
content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language"
content="zh-CN" />
<style type="text/css">
* { padding:0; margin:0; }

ul { display:block; position:relative;
width:1008px; height:602px; background:#ccc;
list-style:none; }
li { float:left; border:1px
solid #fff; border-width:1px 0 0 1px;
width:125px; height:85px; z-index:100; }
a {
display:block;cursor:default;
position:relative; z-index:20; float:left;  }
a img { position:relative;
border:0; width:125px; height:85px; z-
index:30; }
li.rgt a img,
li.lft a img { width:124px; }

li.rgt,
li.lft { width:124px; border
-right:1px solid #fff; }
li.lft a img,
li.lft { width:124px; }
li.rgt { float:right;
clear:right;  }
li.lft { float:left;
clear:left; }
li.box { width:1008px;
height:0; border:0; font-size:0; line-
height:0;  }
a:hover { position:absolute;
top:0px; left:0; z-index:200; padding:65px
105px; display:block; }
a:hover img {
position:relative; z-index:201; border:1px
solid #fff; width:798px; height:472px; }

li.lft a:hover img,li.rgt a:hover img {
position:relative; z-index:201; border:1px
solid #fff; width:798px; height:472px; }

</style>
</head>
<body id="" class="">
<ul id="">
<li><a href="#no"><img
src="http://desk.blueidea.com/desk/XP/225/xpb
z0503.jpg" alt="1" /></a></li>
<li><a href="#no"><img
src="http://desk.blueidea.com/desk/XP/225/xpb
z0502.jpg" alt="2" /></a></li>
<li><a href="#no"><img
src="http://desk.blueidea.com/desk/XP/225/xpb
z0504.jpg" alt="3" /></a></li>
<li><a href="#no"><img
src="http://desk.blueidea.com/desk/XP/225/xpb
z0501.jpg" alt="4" /></a></li>
<li><a href="#no"><img
src="http://desk.blueidea.com/desk/XP/225/xpb
z0510.jpg" alt="5" /></a></li>
<li><a href="#no"><img
src="http://desk.blueidea.com/desk/XP/225/xpb
z0503.jpg" alt="6" /></a></li>
<li><a href="#no"><img
src="http://desk.blueidea.com/desk/XP/225/xpb
z0502.jpg" alt="7" /></a></li>
<li class="rgt"><a
href="#no"><img
src="http://desk.blueidea.com/desk/XP/225/xpb
z0503.jpg" alt="8" /></a></li>
<li class="lft"><a
href="#no"><img
src="http://desk.blueidea.com/desk/XP/225/xpb
z0504.jpg" alt="9" /></a></li>
<li class="rgt"><a
href="#no"><img
src="http://desk.blueidea.com/desk/XP/225/xpb
z0501.jpg" alt="10" /></a></li>
<li class="lft"><a
href="#no"><img
src="http://desk.blueidea.com/desk/XP/225/xpb
z0502.jpg" alt="11" /></a></li>
<li class="rgt"><a
href="#no"><img
src="http://desk.blueidea.com/desk/XP/225/xpb
z0503.jpg" alt="12" /></a></li>
<li class="lft"><a
href="#no"><img
src="http://desk.blueidea.com/desk/XP/225/xpb
z0510.jpg" alt="13" /></a></li>
<li class="rgt"><a
href="#no"><img
src="http://desk.blueidea.com/desk/XP/225/xpb
z0503.jpg" alt="14" /></a></li>
<li class="lft"><a
href="#no"><img
src="http://desk.blueidea.com/desk/XP/225/xpb
z0504.jpg" alt="15" /></a></li>
<li class="rgt"><a
href="#no"><img
src="http://desk.blueidea.com/desk/XP/225/xpb
z0502.jpg" alt="16" /></a></li>
<li class="lft"><a href="#no"><img
src="http://desk.blueidea.com/desk/XP/225/xpb
z0503.jpg" alt="17" /></a></li>
<li class="rgt"><a
href="#no"><img
src="http://desk.blueidea.com/desk/XP/225/xpb
z0501.jpg" alt="18" /></a></li>
<li class="box"></li>
<li><a href="#no"><img
src="http://desk.blueidea.com/desk/XP/225/xpb
z0503.jpg" alt="19" /></a></li>
<li><a href="#no"><img
src="http://desk.blueidea.com/desk/XP/225/xpb
z0502.jpg" alt="20" /></a></li>
<li><a href="#no"><img
src="http://desk.blueidea.com/desk/XP/225/xpb
z0501.jpg" alt="21" /></a></li>
<li><a href="#no"><img
src="http://desk.blueidea.com/desk/XP/225/xpb
z0504.jpg" alt="22" /></a></li>
<li><a href="#no"><img
src="http://desk.blueidea.com/desk/XP/225/xpb
z0510.jpg" alt="23" /></a></li>
<li><a href="#no"><img
src="http://desk.blueidea.com/desk/XP/225/xpb
z0503.jpg" alt="24" /></a></li>
<li><a href="#no"><img
src="http://desk.blueidea.com/desk/XP/225/xpb
z0504.jpg" alt="25" /></a></li>
<li class="rgt"><a
href="#no"><img
src="http://desk.blueidea.com/desk/XP/225/xpb
z0502.jpg" alt="26" /></a></li>
</ul>
</body>
</html>
[/html]
ff下可以测试:p

563038594 发表于 2008-8-28 13:21

是很流畅，但是图片的效果很差不知道是IE的问题还是你图片设置的大小问题

FreeCity 发表于 2008-8-28 13:59

图片本来就用的小图片

snowfoxly 发表于 2008-8-28 14:17

[code]a:hover { position:absolute;
top:0px; left:0; z-index:200; padding:65px
105px; display:block; }[/code]
貌似你的a:hover把下面的东东全遮住了。。。。

lizhou2526 发表于 2008-8-28 14:44

IE7 中不怎么好太晃眼了啊~~~

gdc123 发表于 2008-8-28 15:05

谢谢4楼的，有改进，但还是没有象在IE6中那么流畅。

在火狐中，如果要想浏览另一张，必须把鼠标移出图片区，重新移到另一张上，才显示。

5楼的，把图片换成你自己的高质量相片，看看效果，包你满意。

gdc123 发表于 2008-8-29 12:04

等待高手

thelucky 发表于 2008-8-29 12:25

[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="Content-Type" content="text/html; charset=utf-8" />
<title>图片展示例子-修改by 朝心（在linxz的基础上修改）</title>
<style>
ul {width:148px;height:540px;float:right;list-style:none;}
li {width:54px;height:54px;float:left;margin:10px;display:inline;overflow:hidden;}
li a {width:50px;height:50px;display:block;overflow:hidden;border:2px solid #ccc;}
li a img{width:50px;height:50px;}
img {display:block;overflow:hidden;border:none;}
/* 主要针对IE6的a:hover的BUG */
li a {position:static;}
li a:hover {border:2px solid #000;}
/* 主要针对IE6的a:hover的BUG end */
li a:hover img {margin:0;position:absolute;top:10px;left:10px;border:2px solid #fff;width:250px;height:250px;}
#photo {width:748px;height:540px;margin:0 auto;position:relative;background:#333;}
/*wolf*/
.big{margin:12px 0 0 12px;width:500px;height:500px;overflow:hidden;}
.big img{width:500px;height:500px;}
</style>
</head>
<body>
<div id="photo">
<ul>
      <li>
         <a href="#p1" title=""><img src="http://www.itroam.com/images/pic_1.jpg" alt="" /></a>
      </li>
      <li>
         <a href="#p2" title=""><img src="http://www.itroam.com/images/pic_2.jpg" alt="" /></a>
      </li>
      <li>
         <a href="#p3" title=""><img src="http://www.itroam.com/images/pic_3.jpg" alt="" /></a>
      </li>
      <li>
         <a href="#p4" title=""><img src="http://www.itroam.com/images/pic_4.jpg" alt="" /></a>
      </li>
      <li>
         <a href="#p5" title=""><img src="http://www.itroam.com/images/pic_5.jpg" alt="" /></a>
      </li>
      <li>
         <a href="#p6" title=""><img src="http://www.itroam.com/images/pic_6.jpg" alt="" /></a>
      </li>
      <li>
         <a href="#p7" title=""><img src="http://www.itroam.com/images/pic_7.jpg" alt="" /></a>
      </li>
      <li>
         <a href="#p8" title=""><img src="http://www.itroam.com/images/pic_8.jpg" alt="" /></a>
      </li>
      <li>
         <a href="#p9" title=""><img src="http://www.itroam.com/images/pic_9.jpg" alt="" /></a>
      </li>
</ul>
<div class="big">
   <img id="p1" src="http://www.itroam.com/images/pic_1.jpg" alt="" />
   <img id="p2" src="http://www.itroam.com/images/pic_2.jpg" alt="" />
   <img id="p3" src="http://www.itroam.com/images/pic_3.jpg" alt="" />
   <img id="p4" src="http://www.itroam.com/images/pic_4.jpg" alt="" />
   <img id="p5" src="http://www.itroam.com/images/pic_5.jpg" alt="" />
   <img id="p6" src="http://www.itroam.com/images/pic_6.jpg" alt="" />
   <img id="p7" src="http://www.itroam.com/images/pic_7.jpg" alt="" />
   <img id="p8" src="http://www.itroam.com/images/pic_8.jpg" alt="" />
   <img id="p9" src="http://www.itroam.com/images/pic_9.jpg" alt="" />
</div>
</div>
</body>
</html>
[/html]

这个是我改自别人的一个像册效果

gdc123 发表于 2008-8-29 17:41

谢谢11楼的兄弟,能不用点击就好了.

gdc123 发表于 2008-9-1 09:47

有高手吗？

页: [1]

经典论坛's Archiver

很好的CSS相册，IE6有效，火狐有问题。高手解决！