サンプル

ソース

XHTML
<div class="div030-hpd">
  <h3>見出し部分に背景画像を入れた枠 : div030-hpd</h3>
  <p>h3，pとdlによる説明付きリンクリストを含む</p>
  <p>テキストテキスト......</p>
  <dl>
    <dt><a href="#">リンク</a></dt>
    <dd>リンク先のページについての説明</dd>
    <dt><a href="#">リンク</a></dt>
    <dd>リンク先のページについての説明</dd>
    <dt><a href="#">リンク</a></dt>
    <dd>リンク先のページについての説明</dd>
  </dl>
</div>

CSS
div.div030-hpd {
  margin: 1em 0;
  border: solid 1px #68B36A;
}

div.div030-hpd h3 {
  margin: 0 0 1em;
  border-bottom: solid 1px #68B36A;
  background: #E6FFE6 url(../block/img/bg-green-stripe-header.gif);
  padding: 0.5em 15px;
  color: #363;
}

div.div030-hpd p {
  margin: 0.5em 15px 0.5em 30px;
}

div.div030-hpd dl {
  margin-left: 60px;
  padding-left: 0;
}
	
div.div030-hpd dl dd {
  margin-left: 30px;
}

使用画像