定義リストdl,dt,ddで新着リストを作る

定義リストを使ってCSSで日付とタイトルをリストで表示します。

タイトルと一覧ページにリンクするエレメントもつけています。

HTMl

<div class="mod-news">
<div class="mod-news_title">
<h2><img src="press_release.gif" width="595" height="40" alt="ニュース" /></h2>
<p class="mod-icon_itiran"><a href="#"><img src="ichiran.gif" width="42" height="22" alt="一覧" /></a></p>
<!-- mod-news_title_end --></div>
<div class="mod-news_inner">
<dl>
<dt><strong>2011年02月24日</strong></dt>
<dd><a href="#">記事のタイトルや詳細</a></dd>
</dl>
<dl>
<dt><strong>2010年02月24日</strong></dt>
<dd><a href="#">記事のタイトルや詳細</a></dd>

</dl>
<dl class="last">
<dt><strong>2010年02月24日</strong></dt>
<dd><a href="#">記事のタイトルや詳細</a></dd>
</dl>
<!-- mod-news_inner_end --></div>
<!-- mod-news_end --></div>

CSS

.mod-news{
	width:595px;
	padding:0 0 5px 0;
	background:transparent url(news_bk_bottom.gif) no-repeat left bottom scroll;
}
.mod-news_title{
	position: relative;
}
.mod-icon_itiran{
	padding:0 0 0 5px;
	position: absolute;
	top:11px;
	left:540px;
}
.mod-icon_itiran a:link    {}
.mod-icon_itiran a:visited {}
.mod-icon_itiran a:hover   {opacity:0.7;}
.mod-icon_itiran a:active  {opacity:0.7;}
.mod-icon_itiran a:hover img{filter:alpha(opacity=70);}

.mod-news_inner{
	padding:0 15px 10px 15px;
	border-left: solid 1px #CCC;
	border-right: solid 1px #CCC;
}
.mod-news_inner dl{
	padding:10px 0 10px 0;
	background:transparent url("line.gif") repeat-x left bottom scroll;
}
.mod-news_inner dl.last{
	background:none;
	padding-bottom:0px;
}
.mod-news_inner dd{
	margin: 0 0 0 0px;
	padding:0 0 0 10px;
	background:transparent url('icon-link-a.gif') no-repeat 0px 6px scroll;
}
.mod-news_inner dd a:link    {color:#1e2e53;}
.mod-news_inner dd a:visited {color:#1e2e53;}
.mod-news_inner dd a:hover   {text-decoration:none; color:#FFF; background-color:#1e2e53;}
.mod-news_inner dd a:active  {text-decoration:none; color:#FFF; background-color:#1e2e53;}