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

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!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(//ku.shouce.ren/files/images/201601/56a31a05993ba.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代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

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

分类

表格图层

描述

一个设计精美的含标号、时间的CSS文章列表，前端布局标号，后端紧跟时间，标题过长的时候自动截断，以保证整体的美观，这种列表很常用，建议收藏。