吴伟贤のBlog

文章列表带有标题、更多链接，标题前带有背景小图标，列表为 [栏目名]文章标题 日期 格式，列表带有背景小图标。

css代码

ul,li,ol,dl,dt,dd{
	padding:0px;
	margin:0px;
	list-style-type: none;
}
a{
	text-decoration: none;
}
.list_dl{
 width:100%;
 height:auto;
 display:block;
 overflow:hidden;
 margin-bottom:8px;
 font-size:10pt;
}
.list_dl dt{
	width:100%;
	height:24px;
	margin-bottom:1px;
	background-color:#003366;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #FF9933;
	background-image: url(images/right_tit.gif);
	background-repeat:repeat-x;
	background-position: right top;
}
.list_dl dt b{
	float:left;
	width:240px;
	height:24px;
	line-height:24px;
	display:block;
	color:#FFFFFF;
	margin-left:12px;
}
.list_dl dt a{
	width:5em;
	height:23px;
	display:block;
	line-height:23px;
	margin-top:1px;
	color:#FFFFFF;
	float:right;
	text-align:right;
	padding-right:10px;
}
.list_dl dt a.more{
	color:#C1CEDB;
}
.list_dl dt a.more:hover{
color:#fff;
}
.list_dl dd{
display:block;
margin-top:4px;
clear:both;}
.list_dl ul li{
	text-align:left;
	text-indent: 1.3em;
	line-height:220%;
	border-bottom-width: 1px;
	border-bottom-style: dashed;
	border-bottom-color: #CCCCCC;
	background-image: url(images/list_ico.gif);
	background-repeat:no-repeat;
	background-position: 4px center;
}
a.link1{
	color:#797979;
}
.list_dl ul li span{
	float:right;
	color:#9B9B9B;
	margin-right:7px;
}

html代码

<dl class="list_dl">
<dt><b>这里是标题</b><a href="#" class="more">>>更多</a></dt>
<dd>
<ul>
<li><span>09-07-07</span><a href="#" class="link1">[栏目标题]</a> <a href="#">关于进一步加强原材料工业管</a></li>
<li><span>09-07-07</span><a href="#" class="link1">[栏目标题]</a> <a href="#">关于进一步加强原材料工业管</a></li>
<li><span>09-07-07</span><a href="#" class="link1">[栏目标题]</a> <a href="#">关于进一步加强原材料工业管</a></li>
<li><span>09-07-07</span><a href="#" class="link1">[栏目标题]</a> <a href="#">关于进一步加强原材料工业管</a></li>
<li><span>09-07-07</span><a href="#" class="link1">[栏目标题]</a> <a href="#">关于进一步加强原材料工业管</a></li>
</ul>
</dd>
</dl>