精美CSS文章列表含标号、时间显示

答案：<!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>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;}
.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(/jscss/demoimg/200906/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>
上一个：又一个纯CSS无图片圆角框
下一个：让一个LI列表自动排成两列显示
更多图片编程知识: