<!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>
<script language="JavaScript">
<!--
//图片按比例缩放
var flag=false;
function DrawImage(ImgD){
var image=new Image();
var iwidth = 170; //定义允许图片宽度，当宽度大于这个值时等比例缩小
var iheight = 170; //定义允许图片高度，当宽度大于这个值时等比例缩小
image.src=ImgD.src;
if(image.width>0 && image.height>0){ //假如图片长宽都不为零
flag=true;
if(image.height/image.width>= iheight/iwidth){ //通过正弦值判断图片缩放后是否偏高
if(image.height>iheight){ //如果图片比设定的要高
ImgD.height=iheight;
ImgD.width=(image.width*iheight)/image.height;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
ImgD.alt=image.width+"×"+image.height;
}
else{ //如果图片比例 小于 设定的比例
if(image.width>iwidth){
ImgD.width=iwidth;
ImgD.height=(image.height*iwidth)/image.width;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
ImgD.alt=image.width+"×"+image.height;
}
}
}
//调用：<img src="图片" onload="javascript:DrawImage(this)">
//-->
</script>
<style type="text/css">
.pic_list {
width:980px; /* 设置图文列表整体的宽度 */
border:1px solid #D9E5F5; /* 添加图文列表的边框 */
}
.pic_list img{border:0;}
.pic_list ul,.pic_list,li{margin:0;padding:0;}
.pic_list h3 {
margin:0;
padding:0;
height:30px;
line-height:30px;
font-size:14px;
text-indent:12px;
font-weight:bold;
color:#223A6D;
background:#ccc;
} /* 设置图文列表的标题的高度，行高，文字样式和背景图片 */
.pic_list ul{margin:5px 0 0 5px; width:975px; height:450px;}
.pic_list li {
float:left;
margin-right:12px; /* 列表li标签设置浮动后，所有列表将根据盒模型的计算方式计算列表宽度，并且并排显示 */
display:inline;
background:url(images/bj_pic.gif) no-repeat;
width:183px;
height:210px;
/* 设置浮动后并且增加了左右外补丁，IE6会产生双倍间距的bug，利用该属性解决 */
}
.pic_list li a {
display:block; /* 将内联元素a标签转换为块元素使其具备宽高属性 */
height:184px;
text-align:center; /* 文本居中显示 */
text-decoration:none; /* 文本下划线 */
color:#333333; /* 文本的颜色 */
}
.pic_list li a:hover{ background:url(images/bj_pic1.gif) no-repeat; color:#FF3300}
.pic_list li span {display:-moz-inline-box!important;display:inline-block;vertical-align:middle;height:100%;}
.pic_list li img {vertical-align:middle;}
.pic_list li h5 {color:#666;line-height:14px;width:156px;margin:8px auto 0;}
.pic_list li h5 a {color:#666;border:0;display:inline;font-weight:normal; background:#fff;}
.pic_list li h5 a:hover{background:none;}
</style>
</head>
<body>
<div class="pic_list">
<h3>明星人物</h3>
<ul>
<li><a href="images/1.jpg"><span></span><img src="images/1.jpg" alt="" /></a>
<h5><a href="#">英超-切尔西2-0利物</a></h5>
</li>
<li><a href="images/2.jpg"><span></span><img src="images/2.jpg" alt="" /></a>
<h5><a href="#">英超-切尔西2-0利物浦</a></h5>
</li>
<li><a href="images/3.jpg"><span></span><img src="images/3.jpg" alt="" /></a>
<h5><a href="#">英超-切尔西2-0利物浦</a></h5>
</li>
<li><a href="images/4.jpg"><span></span><img src="images/4.jpg" alt="" /></a>
<h5><a href="#">英超-切尔西2-0</a></h5>
</li>
<li><a href="images/5.jpg"><span></span><img src="images/5.jpg" alt="" /></a>
<h5><a href="#">英超-切尔西</a></h5>
</li>
<li><a href="images/01.jpg"><span></span><img src="images/01.jpg" alt="" onload="javascript:DrawImage(this)"//></a>
<h5><a href="#">英超-切尔西2-0利物浦 </a></h5>
</li>
<li><a href="images/02.jpg"><span></span><img src="images/02.jpg" alt="" onload="javascript:DrawImage(this)"/ /></a>
<h5><a href="#">英超-切尔西2-0利物浦 </a></h5>
</li>
<li><a href="images/03.jpg"><span></span><img src="images/03.jpg" alt="" onload="javascript:DrawImage(this)"//></a>
<h5><a href="#">英超-切尔西2-0利物浦 </a></h5>
</li>
<li><a href="images/04.jpg"><span></span><img src="images/04.jpg" alt="" onload="javascript:DrawImage(this)"//></a>
<h5><a href="#">英超-切尔西2-0利物浦</a></h5>
</li>
<li><a href="#"><span></span><img src="images/1.jpg" alt="" /></a>
<h5><a href="#">英超-切尔西2-0利物浦 </a></h5>
</li>
</ul>
</div>
</body>
</html>
(责任编辑：msh8888)
网 址:
www.chinaitweb.com
客服热线:13391795197[可发短信注明来意]
客服热线:13717978877[可发短信注明来意]
qq：802041000