∥″可乐〃∥

让我展望未来，网络是我不变的终结者！

« [PS教程]利用Photoshop工具制作超乎想像形状搞笑！联想之麻辣教师 »

新闻排版，图片垂直，自适应高度

2010-3-13 15:55:9

完美新闻列表排版样式

<!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=utf-8" />
<title>无标题文档-SH!</title>
<style type="text/css">
.list{
 margin: 0px 10px 20px;
 text-align: left;
 width: 500px;
 background-color: #000000;
 font-size: 12px;
 color: #FFFFFF;
}
.list dd {
 float: right;
 width: 100px;
 line-height: 24px;
}
.list dt {
 line-height: 24px;
 border-bottom-width: 1px;
 border-bottom-style: dashed;
 border-bottom-color: #999999;
}

.list dt a{
 color: #777777;
 text-decoration: none;
}

.list dt a:hover{
    color: #336699;
}
</style>
</head>

<body>

<dl class="list">
<dd>2008年5月25日 </dd><dt><a href="http://www.d4mt.com">·中国商品展/伊拉克商机/2008第5届中国（..</a></dt>
<dd>2008年5月25日 </dd><dt><a href="http://www.d4mt.com">·中国商品展/伊拉克商机/2008第5届中国（..</a></dt>
<dd>2008年5月25日 </dd><dt><a href="http://www.d4mt.com">·中国商品展/伊拉克商机/2008第5届中国（..</a></dt>
<dd>2008年5月25日 </dd><dt><a href="http://www.d4mt.com">·中国商品展/伊拉克商机/2008第5届中国（..</a></dt>
<dd>2008年5月25日 </dd><dt><a href="http://www.d4mt.com">·中国商品展/伊拉克商机/2008第5届中国（..</a></dt>
<dd>2008年5月25日 </dd><dt><a href="http://www.d4mt.com">·中国商品展/伊拉克商机/2008第5届中国（..</a></dt>
<dd>2008年5月25日 </dd><dt><a href="http://www.d4mt.com">·中国商品展/伊拉克商机/2008第5届中国（..</a></dt>
<dd>2008年5月25日 </dd><dt><a href="http://www.d4mt.com">·中国商品展/伊拉克商机/2008第5届中国（..</a></dt>
</dl>

</body>
</html>

在DIV中图片垂直、水平居中(最简单方法)

<!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">
.lanrentuku { 
  float: left; 
  text-align: center; 
  width: 150px; 
  height: 150px; 
  margin: 5px; 
  border: 1px solid #ccc; 
  font-size: 1em; 
  line-height: 148px; 
  } 

.lanrentuku img { 
  margin-top: e&shy;xpression(( 150 - this.height ) / 2);  
  }
</style>
</head>

<body>


<div class="lanrentuku"> <img src="http://www.lanrentuku.com/images/uppic/200807160819430.gif" width="70" height="120" /> </div> 
<div class="lanrentuku"> <img src="http://www.lanrentuku.com/images/uppic/200807160819430.gif" width="90" height="80"  /> </div> 
<div class="lanrentuku"> <img src="http://www.lanrentuku.com/images/uppic/200807160819430.gif" width="70" height="120" /> </div>


<p></p>
</body>
</html>
 

判断图片大小：

* html .feed_content img {
width: expression( this.width > 70 && this.width /

this.height > 0.7 ? 70:true);

height:
expression( this.height > 100 && this.width /

this.height < 0.7 ? 100:true);
}

拥有最小高度能自适应高度，IE、FF全兼容的div设置

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">
<head profile="http://www.w3.org/2000/08/w3c-synd/#">
<meta http-equiv="content-language" content="zh-cn" />
<meta http-equiv="content-type" content="text/html;charset=gb2312" />
<title>http://justinyoung.cnblogs.com/</title>
<style type="text/css">
/*<![CDATA[*/
div {
    width:200px;
    height:auto!important;
    height:200px;
    min-height:200px;
    border:1px solid green;
    }
/*]]>*/
</style>
</head>
<body>
<div>Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! </div>
</body>
</html>

新闻列表  
分类:CSS+XHTML | 评论:0 | 浏览:
  • Similar.
Comments.

◎ welcome to participate in the discussion

日历

Comments.

Previous.

ADMIN. | EMAIL. | ABOUT.

Powered By Z-Blog 1.8 Spirit Build 80722Copyright © 2006-2011 可乐Blog Kele520.Com All Rights Reserved.[皖ICP备 06001314号]