账号通
    

账号  

密码  

2681

查看

7

回复
主题:[待解决]请问这个效果如何实现?用什么标签? [收藏主题] 转到:  
zzg19830616z 当前离线

222

主题

1

广播

0

粉丝
添加关注
级别:二年级

用户积分:765 分
登录次数:96 次
注册时间:2009/9/15
最后登录:2019/8/26
zzg19830616z 发表于:2010/10/15 17:28:00   | 显示全部帖子 查看该作者主题 楼主 

点击查看原图

吓死你这样?

<!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>无标题文档</title>
<style type="text/css">
.gallerycontainer {
position:absolute;
}
.thumbnail img {
border:1px solid white;
margin:0 5px 5px 0;
}
.thumbnail:hover {
background-color:transparent;
}
.thumbnail:hover img {
border:1px solid blue;
}
.thumbnail span {
/*CSS for enlarged image*/
position:absolute;
background-color:lightyellow;
border:1px solid gray;
visibility:hidden;
color:black;
text-decoration:none;
}
.thumbnail span img {
/*CSS for enlarged image*/
border-width:0;
margin:2px;
}
.thumbnail:hover span {
/*CSS for enlarged image*/
visibility:visible;
top:0;
left:800px;
/*position where enlarged image should offset horizontally */
z-index:50;
}
a {
float:left;
}

</style>
</head>

<body>

<div class="gallerycontainer">
<a class="thumbnail" href="#thumb"><img src="http://imgsrc.baidu.com/forum/pic/item/9391655919b602382934f00d.jpg" width="100px" height="100px" border="0" /><span><table  border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><img src="http://imgsrc.baidu.com/forum/pic/item/9391655919b602382934f00d.jpgg" /></td>
  </tr>
  <tr>
    <td align="center">图片文字说明</td>
  </tr>
</table>
</span></a>
<a class="thumbnail" href="#thumb"><img src="http://img1.qq.com/ent/pics/9946/9946924.jpg" width="100px" height="100px" border="0" /><span><table  border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><img src="http://img1.qq.com/ent/pics/9946/9946924.jpg" /></td>
  </tr>
  <tr>
    <td align="center">图片文字说明</td>
  </tr>
</table>
</span></a><a class="thumbnail" href="#thumb"><img src="http://imgsrc.baidu.com/forum/pic/item/9391655919b602382934f00d.jpg" width="100px" height="100px" border="0" /><span><table  border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><img src="http://imgsrc.baidu.com/forum/pic/item/9391655919b602382934f00d.jpgg" /></td>
  </tr>
  <tr>
    <td align="center">图片文字说明</td>
  </tr>
</table>
</span></a>
<a class="thumbnail" href="#thumb"><img src="http://img1.qq.com/ent/pics/9946/9946924.jpg" width="100px" height="100px" border="0" /><span><table  border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><img src="http://img1.qq.com/ent/pics/9946/9946924.jpg" /></td>
  </tr>
  <tr>
    <td align="center">图片文字说明</td>
  </tr>
</table>
</span></a>
<a class="thumbnail" href="#thumb"><img src="http://imgsrc.baidu.com/forum/pic/item/9391655919b602382934f00d.jpg" width="100px" height="100px" border="0" /><span><table  border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><img src="http://imgsrc.baidu.com/forum/pic/item/9391655919b602382934f00d.jpgg" /></td>
  </tr>
  <tr>
    <td align="center">图片文字说明</td>
  </tr>
</table>
</span></a>
<a class="thumbnail" href="#thumb"><img src="http://img1.qq.com/ent/pics/9946/9946924.jpg" width="100px" height="100px" border="0" /><span><table  border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><img src="http://img1.qq.com/ent/pics/9946/9946924.jpg" /></td>
  </tr>
  <tr>
    <td align="center">图片文字说明</td>
  </tr>
</table>
</span></a>
</div>


</body>
</html>

 
  支持(0) | 反对(0) 回到顶部顶端 回到底部底部
<上一主题 | 下一主题 >
Powered By KesionCMS Version X1
厦门科汛软件有限公司 © 2006-2016 页面执行0.07617秒 powered by KesionCMS 9.0