一个CSS控制图片overflow的例子

浏览数：28 / 时间：2015年06月09日

<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>
<style type=‘text/css‘>
img{
    border:none;
    }
    ul#thumbs, ul#thumbs li{
    margin:0;
    padding:0;
    list-style:none;
    }
    ul#thumbs li{
    float:left;
    margin-right:5px;
    border:1px solid #999; 
    padding:2px;
    }
    ul#thumbs a{
  display:block;/*此处使链接变为块状显示，才可以定义宽和高*/
    float:left;
    width:100px;
    height:100px;
    line-height:100px;
  overflow:hidden;/*定义区域外隐藏*/
  position:relative;/*相对对位*/
  z-index:1; /*Z轴处于1的位置，为鼠标悬浮时做铺垫*/
    }
    ul#thumbs a img{
    float:left;
    position:absolute;/*让图像居中显示的定义部分，包括下面top、left的两处定位*/
    top:-20px;/**/
    left:-50px; /**/
    }
    ul#thumbs a:hover{ /*此处最为重要，当鼠标移动到图像上时，让图像显示，Z轴位置为1000置于最上面*/
    overflow:visible;
    z-index:1000;
    border:none; 
    }
	</style>
	</head>
<body>
<title>无标题文档</title>
<ul id="thumbs">
    <li><a href="http://dreamweaver.abang.com"><img src="Penguins.jpg" /></a></li>
    <li><a href="http://dreamweaver.abang.com"><img src="Penguins.jpg" /></a></li>
    <li><a href="http://dreamweaver.abang.com"><img src="Penguins.jpg" /></a></li>
    <li><a href="http://dreamweaver.abang.com"><img src="Penguins.jpg" /></a></li>
    <li><a href="http://dreamweaver.abang.com"><img src="Penguinse.jpg" /></a></li>
    </ul> 

</body></html>

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。