61,112
社区成员
发帖
与我相关
我的任务
分享◆(中秋快乐)css图片定位问题
以下是一个效果显示及源程序:
http://www.donfor.com/book/book_cklr.asp?lable=6258
但是有一个问题,我想将显示出来的大图片固定在一个位置上.,而不是在每张小图片的下方.
谢谢,请问要怎么修改.
http://www.donfor.com/book/book_cklr.asp?lable=6258
但是有一个问题,我想将显示出来的大图片固定在一个位置上.,而不是在每张小图片的下方.
谢谢,请问要怎么修改.
...全文
请发表友善的回复…
发表回复
cwm545 2007-09-25
- 打赏
- 举报
谢谢.
我一改就错了,CSS这块我真的不熟,还请不吝赐教,谢谢.
<!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=gb2312" />
<title>忆江南CSS实现缩略图显示及隐藏层功能源代码</title>
<style type="text/css">
<!--
.list{position:relative;}
.list span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px; width:500px;
}
.list span{
position: absolute;
padding: 3px;
border: 1px solid gray;
visibility: hidden;
background-color:#FFFFFF;
}
.list:hover{
background-color:transparent;
}
.list:hover span{
visibility: visible;
top:0; left:60px;
}
-->
</style>
</head>
<body>
<p> </p>
<a class=list href=http://www.donfor.com/photo/Upimages/20078885910.jpg>
<div style='Width:156px;Height:80px;OVERFLOW: hidden;'>
<img src=http://www.donfor.com/photo/Upimages/20078885910.jpg Style='Width:156px;' border=0 />
</div>
</a>
<br>
<a class=list href=http://www.donfor.com/photo/Upimages/20078885910.jpg>
<div style='Width:156px;Height:80px;OVERFLOW: hidden;z-index:-1'>
<img src=http://www.donfor.com/photo/Upimages/20078885910.jpg Style='Width:156px;' border=0 />
</div>
</a>
<br>
<a class=list href=http://www.donfor.com/photo/Upimages/20078885910.jpg>
<div style='Width:156px;Height:80px;OVERFLOW: hidden;'>
<img src=http://www.donfor.com/photo/Upimages/20078885910.jpg Style='Width:156px;' border=0 />
</div>
</a>
<div><span><img src=http://www.donfor.com/photo/Upimages/20078885910.jpg alt=big /></span></div>
</body>
</html>
我一改就错了,CSS这块我真的不熟,还请不吝赐教,谢谢.
<!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=gb2312" />
<title>忆江南CSS实现缩略图显示及隐藏层功能源代码</title>
<style type="text/css">
<!--
.list{position:relative;}
.list span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px; width:500px;
}
.list span{
position: absolute;
padding: 3px;
border: 1px solid gray;
visibility: hidden;
background-color:#FFFFFF;
}
.list:hover{
background-color:transparent;
}
.list:hover span{
visibility: visible;
top:0; left:60px;
}
-->
</style>
</head>
<body>
<p> </p>
<a class=list href=http://www.donfor.com/photo/Upimages/20078885910.jpg>
<div style='Width:156px;Height:80px;OVERFLOW: hidden;'>
<img src=http://www.donfor.com/photo/Upimages/20078885910.jpg Style='Width:156px;' border=0 />
</div>
</a>
<br>
<a class=list href=http://www.donfor.com/photo/Upimages/20078885910.jpg>
<div style='Width:156px;Height:80px;OVERFLOW: hidden;z-index:-1'>
<img src=http://www.donfor.com/photo/Upimages/20078885910.jpg Style='Width:156px;' border=0 />
</div>
</a>
<br>
<a class=list href=http://www.donfor.com/photo/Upimages/20078885910.jpg>
<div style='Width:156px;Height:80px;OVERFLOW: hidden;'>
<img src=http://www.donfor.com/photo/Upimages/20078885910.jpg Style='Width:156px;' border=0 />
</div>
</a>
<div><span><img src=http://www.donfor.com/photo/Upimages/20078885910.jpg alt=big /></span></div>
</body>
</html>
wx红杉树 2007-09-25
- 打赏
- 举报
把<span><img src=http://www.donfor.com/photo/Upimages/20078885910.jpg alt=big /></span>写在你要固定的地方就可以了
<!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=gb2312" />
<title>忆江南CSS实现缩略图显示及隐藏层功能源代码</title>
<style type="text/css">
<!--
.list{position:relative;}
.list span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px; width:500px;
}
.list span{
position: absolute;
padding: 3px;
border: 1px solid gray;
visibility: hidden;
background-color:#FFFFFF;
}
.list:hover{
background-color:transparent;
}
.list:hover span{
visibility: visible;
top:0; left:60px;
}
-->
</style>
</head>
<body>
<p> </p>
<a class=list href=http://www.donfor.com/photo/Upimages/20078885910.jpg>
<div style='Width:156px;Height:80px;OVERFLOW: hidden;'>
<img src=http://www.donfor.com/photo/Upimages/20078885910.jpg Style='Width:156px;' border=0 />
</div>
<span ><img src=http://www.donfor.com/photo/Upimages/20078885910.jpg alt=big /></span>
</a>
<br>
<a class=list href=http://www.donfor.com/photo/Upimages/20078885910.jpg>
<div style='Width:156px;Height:80px;OVERFLOW: hidden;z-index:-1'>
<img src=http://www.donfor.com/photo/Upimages/20078885910.jpg Style='Width:156px;' border=0 />
</div>
<Div><span><img src=http://www.donfor.com/photo/Upimages/20078885910.jpg alt=big /></span></Div>
</a>
<br>
<a class=list href=http://www.donfor.com/photo/Upimages/20078885910.jpg>
<div style='Width:156px;Height:80px;OVERFLOW: hidden;'>
<img src=http://www.donfor.com/photo/Upimages/20078885910.jpg Style='Width:156px;' border=0 />
</div>
<span><img src=http://www.donfor.com/photo/Upimages/20078885910.jpg alt=big /></span>
</a>
</body>
</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=gb2312" />
<title>忆江南CSS实现缩略图显示及隐藏层功能源代码</title>
<style type="text/css">
<!--
.list{position:relative;}
.list span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px; width:500px;
}
.list span{
position: absolute;
padding: 3px;
border: 1px solid gray;
visibility: hidden;
background-color:#FFFFFF;
}
.list:hover{
background-color:transparent;
}
.list:hover span{
visibility: visible;
top:0; left:60px;
}
-->
</style>
</head>
<body>
<p> </p>
<a class=list href=http://www.donfor.com/photo/Upimages/20078885910.jpg>
<div style='Width:156px;Height:80px;OVERFLOW: hidden;'>
<img src=http://www.donfor.com/photo/Upimages/20078885910.jpg Style='Width:156px;' border=0 />
</div>
<span ><img src=http://www.donfor.com/photo/Upimages/20078885910.jpg alt=big /></span>
</a>
<br>
<a class=list href=http://www.donfor.com/photo/Upimages/20078885910.jpg>
<div style='Width:156px;Height:80px;OVERFLOW: hidden;z-index:-1'>
<img src=http://www.donfor.com/photo/Upimages/20078885910.jpg Style='Width:156px;' border=0 />
</div>
<Div><span><img src=http://www.donfor.com/photo/Upimages/20078885910.jpg alt=big /></span></Div>
</a>
<br>
<a class=list href=http://www.donfor.com/photo/Upimages/20078885910.jpg>
<div style='Width:156px;Height:80px;OVERFLOW: hidden;'>
<img src=http://www.donfor.com/photo/Upimages/20078885910.jpg Style='Width:156px;' border=0 />
</div>
<span><img src=http://www.donfor.com/photo/Upimages/20078885910.jpg alt=big /></span>
</a>
</body>
</html>
