<dl><dt><dd>でリスト表示

「ニュース」や「最新情報」などで使う頻度が高いタグなのでコピペー用にメモ

CSS

/* CSS Document */
*{padding:0px;margin:0px;}
body{margin-left:5px;margin-top:5px;}
dl:after{content: ".";display: block;visibility: hidden;clear: both;height: 0.1px;font-size: 0.1em;line-height: 0;}
dl {display: inline-block;}
/* Hides from IE-mac \*/
dl {height: 1%;}
dl {display: block;}
/* End hide from IE-mac */
dl{border-bottom:1px dotted #cccccc;padding:2px 0;font-size:12px;line-height:18px;}
dt{color:#CA4D66;text-align:left;font-weight:bold;float:left;width:80px;display:block;}
dd{color:#666666;float:left;display:block;width:410px;}
a{color:#CA4C65;text-decoration:none;}
a:link{color:#CA4C65;text-decoration:none;}
a:hover{color:#CA4C65;text-decoration:underline;	
}

HTML

<dl>
	<dt>2011.12.1</dt>
	<dd><b>歳末大還元セール</b><br />
		（期間2011年12月1日〜12月31日まで）</dd>
</dl>
<dl>
	<dt>2011.10.1</dt>
	<dd><b>乾燥する季節にスペシャルケアキャンペーン</b><br />
		（期間2011年10月1日〜10月31日まで）</dd>
</dl>
<dl>
	<dt>2011.9.1</dt>
	<dd><b>乾燥する季節に向けての基本ケアキャンペーン</b><br />
		（期間2011年9月1日〜9月30日まで）</dd>
</dl>
<dl>
	<dt>2011.7.1</dt>
	<dd><b>ご好評につきキャンペーン延長</b><br />
		（期間2011年7月1日〜7月31日まで）</dd>
</dl>
<dl>
	<dt>2011.6.16</dt>
	<dd><b><a href="http://jsdt56.umin.ne.jp/" target="_blank">出展企画</a></b><br />
		（期間2011年6月16日〜6月19日まで）<br />
		16日〜19日まで出荷業務を休業させて頂きます。<br />
		期間中のご注文の発送は20日より行いますので予めご了承ください。</dd>
</dl>