用CSS打造漂亮文章列表含标号、时间显示

weiledream 2011-05-15

展开全文

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www./1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS文章列表</title>
<style type="text/css">
* {margin:0;padding:0;}
ol,ul {list-style:none;}
a:link,a:visited {text-decoration:none;}
a:hover,a:focus,a:active {text-decoration:underline;}
.clearfix,.clear {display:inline-block;}
.clearfix,.clear {display:block;}/* www. */
.clearfix:after,.clear:after {content:'';display:block;clear:both;height:0px;}

body {
font: 12px/1.5 Arial, Helvetica, sans-serif;
color: #666;
background: white;
}
#dv_demo {
margin: 0 auto;
margin-top: 20px;
width: 318px;
line-height: 20px;
border: 1px solid #fc9;
}
#dv_demo ol {
padding-left: 23px;
width: 14em;
background: url(http://www./images/20090909/bg.png) no-repeat 2px 4px;
}
#dv_demo li {
clear: both;
}
#dv_demo li a {
float: left; _display: inline;
max-width: 14em;
white-space: nowrap;
_white-space: normal; /*
超长就换行，第二行被裁掉 @ IE6
*/
_height: 20px;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
color: #333;
_background: transparent; /*
解决莫名占据高度bug @ IE6
*/
}
#dv_demo li span {
_position: relative; /*
父容器hasLayout裁切bug @ IE6
*/
float: left; _display: inline;
margin-right: -99px;
padding-left: 10px;
font-size: 10px;
color: #999;
}

#dv_note,
#dv_back {
clear: both;
margin: 0 auto;
padding-top: 20px;
width: 600px;
}
h2 {
font-size: 100%;
}
#dv_note ul {
margin-left: 1em;
padding-left: 2em;
padding-bottom: 1em;
list-style: disc;
}
#dv_note li {
padding-top: 3px;
text-align: justify; text-justify: distribute;
}
#dv_note code {
padding: 0 3px;
font-family: 'Courier New',monospace;
background: #eee;
}
#dv_back a {
color: black;
}

</style>
</head>

<body>
<div id="dv_demo">
<ol class="clearfix">
<li><a href="/">杂技团美女演员的训练</a><span>2008-03-14</span></li>
<li><a href="/">最昂贵内衣惊艳出炉</a><span>2008-03-14</span></li>
<li><a href="/">【组图】让人喷饭的日常用品大收罗</a><span>2008-03-14</span></li>
<li><a href="/">世界上头发最长的美女令人叹为止</a><span>2008-03-14</span></li>
<li><a href="/">世界八大最喜欢吃人的恐怖生物大全</a><span>2008-03-14</span></li>
<li><a href="/">体育比赛中让人惊奇的奇妙瞬间</a><span>2008-03-14</span></li>
<li><a href="/">独家新闻：虹虹顺利产下龙凤胎</a><span>2008-03-14</span></li>
<li><a href="/">亿万富翁们的超级奢侈</a><span>2008-03-14</span></li>
<li><a href="/">“日本小姐”选美</a><span>2008-03-14</span></li>
<li><a href="/">素面朝天吓坏人，化妆前后大对比</a><span>2008-03-14</span></li>
</ol>
</div>
<div id="dv_note">
<h2>需求说明：</h2>
<ul>
  <li>时间日期紧跟标题其后，距离标题 10px。当标题过长时，超长部分截断，但是时间必须显示完整。</li>
  <li>合理的结构方便程序输出。</li>
  <li>纯 CSS 布局，兼容主流浏览器平台。</li>
</ul>
<h2>解题说明：</h2>
<ul>
  <li>这道题有多种解法，能解决问题就好。</li>
  <li>为增加解题难度，本方案无 CSS Expression，避免可能存在的资源大量消耗的情况。</li>
  <li>为增加解题难度，本方案无定位操作，节省资源。（不过在 IE6 下需要相对定位来应付某个 bug。）</li>
  <li>为增加解题难度，本方案实现了对超长标题进行省略号截断。（不过 IE6 和 FF3- 除外。这两个活宝，一个不支持 <code>max-width</code>，一个不支持省略号截断。）</li>
</ul>
</div>
</body>
</html>
<a href="http://www.">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码！