精美CSS文章列表含標(biāo)號(hào)、時(shí)間顯示_層和布局特效

一個(gè)設(shè)計(jì)精美的含標(biāo)號(hào)、時(shí)間的CSS文章列表，前端布局標(biāo)號(hào)，后端緊跟時(shí)間，標(biāo)題過長的時(shí)候自動(dòng)截?cái)�，以保證整體的美觀，這種列表很常用，建議收藏。

<!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" mrc="text/html; charset=gb2312" />
<title>CSS文章列表-www.hl5o.cn</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.hl5o.cn */
.clearfix:after,.clear:after {mrc:'';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;  /*
 解決莫名占據(jù)高度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="/">雜技團(tuán)美女演員的訓(xùn)練</a><span>2008-03-14</span></li>
	<li><a href="/">最昂貴內(nèi)衣驚艷出爐</a><span>2008-03-14</span></li>
	<li><a href="/">【組圖】讓人噴飯的日常用品大收羅</a><span>2008-03-14</span></li>
	<li><a href="/">世界上頭發(fā)最長的美女令人嘆為止</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="/">獨(dú)家新聞：虹虹順利產(chǎn)下龍鳳胎</a><span>2008-03-14</span></li>
	<li><a href="/">億萬富翁們的超級(jí)奢侈</a><span>2008-03-14</span></li>
	<li><a href="/">“日本小姐”選美</a><span>2008-03-14</span></li>
	<li><a href="/">素面朝天嚇壞人，化妝前后大對(duì)比</a><span>2008-03-14</span></li>
	</ol>
</div>
<div id="dv_note">
	<h2>需求說明：</h2>
	<ul>
		<li>時(shí)間日期緊跟標(biāo)題其后，距離標(biāo)題 10px。當(dāng)標(biāo)題過長時(shí)，超長部分截?cái)�，但是時(shí)間必須顯示完整。</li>
		<li>合理的結(jié)構(gòu)方便程序輸出。</li>
		<li>純 CSS 布局，兼容主流瀏覽器平臺(tái)。</li>
	</ul>
	<h2>解題說明：</h2>
	<ul>
		<li>這道題有多種解法，能解決問題就好。</li>
		<li>為增加解題難度，本方案無 CSS Expression，避免可能存在的資源大量消耗的情況。</li>
		<li>為增加解題難度，本方案無定位操作，節(jié)省資源。（不過在 IE6 下需要相對(duì)定位來應(yīng)付某個(gè) bug。）</li>
		<li>為增加解題難度，本方案實(shí)現(xiàn)了對(duì)超長標(biāo)題進(jìn)行省略號(hào)截?cái)�。（不過 IE6 和 FF3- 除外。這兩個(gè)活寶，一個(gè)不支持 <code>max-width</code>，一個(gè)不支持省略號(hào)截?cái)�。�?lt;/li>
	</ul>
</div>
</body>
</html>

所屬頻道：層和布局特效/更新時(shí)間：2012-11-15

[收藏][報(bào)錯(cuò)][返回列表]

相關(guān)層和布局特效：

層和布局特效Rss訂閱特效代碼搜索

層和布局特效推薦

猜你也喜歡看這些

相關(guān)鏈接：
復(fù)制本頁鏈接| 搜索精美CSS文章列表含標(biāo)號(hào)、時(shí)間顯示
特效說明：
層和布局模板-精美CSS文章列表含標(biāo)號(hào)、時(shí)間顯示。

日韩天天综合网_野战两个奶头被亲到高潮_亚洲日韩欧美精品综合_av女人天堂污污污_视频一区**字幕无弹窗_国产亚洲欧美小视频_国内性爱精品在线免费视频_国产一级电影在线播放_日韩欧美内地福利_亚洲一二三不卡片区

精美CSS文章列表含標(biāo)號(hào)、時(shí)間顯示_層和布局特效

層和布局特效Rss訂閱特效代碼搜索

層和布局特效推薦

猜你也喜歡看這些

精美CSS文章列表含標(biāo)號(hào)、時(shí)間顯示_層和布局特效