图文展示效果

<!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>
<title>一个非常不错的图文内容展示效果丨芯晴网页特效丨CsrCode.Cn</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<!--把下面代码加到<head>与</head>之间-->
<style type="text/css">
*{margin:0; padding:0; font:normal 12px 宋体;}
.wrapper{position:absolute; left:20%; top:20%; width:300px; border:1px solid #fdd78d; background:#ffecc6; padding:5px;}
/*平常的状态*/
dl{clear:both; margin:5px 0;}
 dl dt{display:none;}
 dl dd{}
  dl dd strong{float:left; margin-right:5px;}
  dl dd div{float:left; width:270px; list-style-type:none;}
   dl dd div h4{clear:both; font-weight:normal}
    dl dd div h4 a{float:left; color:#795601; font-size:12px; font-weight:normal; text-decoration:none;}
    dl dd div h4 a:hover{color:#f00; text-decoration:underline;}
    dl dd div h4 span{float:right; width:75px;}
   dl dd div p{display:none;}
   
/*鼠标划过的状态*/   
dl.over{clear:both; height:55px; background:#fdc559; padding:5px;}
 dl.over dt{float:right; display:block;}
  dl.over dt img{border:1px solid #ccc; padding:1px; background:#fff;}
 dl.over dd{float:left;}
  dl.over dd strong{font-size:28px; color:#fa3081; vertical-align:top;}
  dl.over dd div{float:left; width:195px;}
   dl.over dd div h4{clear:both; font-weight:normal}
    dl.over dd div h4 a{color:#b34408;}
    dl.over dd div h4 a:hover{color:#f00; text-decoration:underline;}
    dl.over dd div h4 span{float:right;}
   dl.over dd div p{clear:both; display:block; margin-top:5px;}
</style>
<script language="javascript">
window.onload=function(){
 var dl=document.getElementsByTagName("dl");
 if(dl.length<1) return false;
 for(var i=0;i<dl.length;i++){
  //初始化,让第一个类为over
  if(dl[i].className.indexOf("over")==-1){
   dl[0].className="over";
  }
  //遍历循环,模拟:hover伪类
  dl[i].onmouseover=function(){
   for(var j=0;j<dl.length;j++){
    dl[j].className="";
   }
   this.className="over";
  }
 }
}
</script>
</head>
<body>
<!--把下面代码加到<body>与</body>之间-->
<div class="wrapper">
 <dl>
  <dt><img src="http://www.CsrCode.cn/images/m01.jpg" width=50px height=50px /></dt>
  <dd>
   <strong>01</strong>
   <div>
    <h4><span>人气:19045</span><a href="#">向往成功的一天</a></h4>
    <p>广州白云区.大量房屋商铺笋盘租售.联系电话...</p>
   </div>
  </dd>
 </dl>
 <dl>
  <dt><img src="http://www.CsrCode.cn/images/m01.jpg" width=50px height=50px /></dt>
  <dd>
   <strong>02</strong>
   <div>
    <h4><span>人气:34534</span><a href="#">习惯孤单</a></h4>
    <p>广州白云区.大量房屋商铺笋盘租售.联系电话...</p>
   </div>
  </dd>
 </dl>
 <dl>
  <dt><img src="http://www.CsrCode.cn/images/m01.jpg" width=50px height=50px /></dt>
  <dd>
   <strong>03</strong>
   <div>
    <h4><span>人气:79789</span><a href="#">经济买房</a></h4>
    <p>广州白云区.大量房屋商铺笋盘租售.联系电话...</p>
   </div>
  </dd>
 </dl>
 <dl>
  <dt><img src="http://www.CsrCode.cn/images/m01.jpg" width=50px height=50px /></dt>
  <dd>
   <strong>04</strong>
   <div>
    <h4><span>人气:4323</span><a href="#">经济买房</a></h4>
    <p>广州白云区.大量房屋商铺笋盘租售.联系电话...</p>
   </div>
  </dd>
 </dl>
 <dl>
  <dt><img src="http://www.CsrCode.cn/images/m01.jpg" width=50px height=50px /></dt>
  <dd>
   <strong>05</strong>
   <div>
    <h4><a href="#">经济买房</a><span>人气:6456</span></h4>
    <p>广州白云区.大量房屋商铺笋盘租售.联系电话...</p>
   </div>
  </dd>
 </dl>
 <dl>
  <dt><img src="http://www.CsrCode.cn/images/m01.jpg" width=50px height=50px /></dt>
  <dd>
   <strong>06</strong>
   <div>
    <h4><span>人气:433534</span><a href="#">经济买房</a></h4>
    <p>广州白云区.大量房屋商铺笋盘租售.联系电话...</p>
   </div>
  </dd>
 </dl>
 <dl>
  <dt><img src="http://www.CsrCode.cn/images/m01.jpg" width=50px height=50px /></dt>
  <dd>
   <strong>07</strong>
   <div>
    <h4><span>人气:09808</span><a href="#">经济买房</a></h4>
    <p>广州白云区.大量房屋商铺笋盘租售.联系电话...</p>
   </div>
  </dd>
 </dl>
 <dl>
  <dt><img src="http://www.CsrCode.cn/images/m01.jpg" width=50px height=50px /></dt>
  <dd>
   <strong>08</strong>
   <div>
    <h4><span>人气:3565</span><a href="#">经济买房</a></h4>
    <p>广州白云区.大量房屋商铺笋盘租售.联系电话...</p>
   </div>
  </dd>
 </dl>
 <dl>
  <dt><img src="http://www.CsrCode.cn/images/m01.jpg" width=50px height=50px /></dt>
  <dd>
   <strong>09</strong>
   <div>
    <h4><span>人气:1231</span><a href="#">经济买房</a></h4>
    <p>广州白云区.大量房屋商铺笋盘租售.联系电话...</p>
   </div>
  </dd>
 </dl>
 <dl>
  <dt><img src="http://www.CsrCode.cn/images/m01.jpg" width=50px height=50px /></dt>
  <dd>
   <strong>10</strong>
   <div>
    <h4><span>人气:19045</span><a href="#">经济买房</a></h4>
    <p>广州白云区.大量房屋商铺笋盘租售.联系电话...</p>
   </div>
  </dd>
 </dl>
</div>
</body>
</html>

 

效果在我的相册的我的电脑文件夹下。

文章由 芯晴网页特效|CsrCode.CN 收集(www.CsrCode.cn) 详文参考:http://www.csrcode.cn/html/txdm/tcys/2362.htm

你可能感兴趣的:(XHTML,function,div,float,border,电话)