トップページのニュースの表示の方法

2015.01.03

コーディング

トップページには、ほぼトピックスやニュースなどありますよね。

そのコードの書き方を書いときたいと思います。

html

<div id="news-box">
<dl>
<dt>2015年01月03日</dt><dd><a href="#">明けましておめでとうございます。</a></dd>
<dt>2015年01月03日</dt><dd><a href="#">明けましておめでとうございます。</a></dd>
<dt>2015年01月03日</dt><dd><a href="#">明けましておめでとうございます。</a></dd>
<dt>2015年01月03日</dt><dd><a href="#">明けましておめでとうございます。</a></dd>
<dt>2015年01月03日</dt><dd><a href="#">明けましておめでとうございます。</a></dd>
</dl>
</div>

<dl>

<dt>2015年01月03日</dt><dd><a href="#">明けましておめでとうございます。</a></dd>

</dl>

</div>

css

#news-box{
	width:920px;
	height:auto;
}

#news-box dl{
	width:920px;
	height:auto;
	margin:0;
	padding:0;
}

#news-box dl dt{
	float:left;
	clear:both;
	font-size:12px;
	margin-right:15px;
	color:#0099cc;
}

#news-box dl dd{
	font-size:12px;
	color:#333;
	padding-left:105px;
}

#news-box dl dd a{
	font-size:12px;
	color:#333;
	text-decoration:none;
}

#news-box dl dd a:hover{
	font-size:12px;
	color:#333;
	text-decoration:underline;
}

#news-box{

width:920px;

height:auto;

}

#news-box dl{

width:920px;

height:auto;

margin:0;

padding:0;

}

#news-box dl dt{

float:left;

clear:both;

font-size:12px;

margin-right:15px;

color:#0099cc;

}

#news-box dl dd{

font-size:12px;

color:#333;

padding-left:105px;

}

#news-box dl dd a{

font-size:12px;

color:#333;

text-decoration:none;

}

#news-box dl dd a:hover{

font-size:12px;

color:#333;

text-decoration:underline;

}

これでOKです。
あとは、上手く、CSSを自分なりに色々書き換えて見て下さい(^^)v

トップページのニュースの表示の方法

関連記事