サンプル
- テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。
- テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。
- テキストテキストテキストテキストテキストテキストテキスト。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。
- テキストテキストテキストテキストテキストテキストテキストテキストテキスト。
- テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。テキストテキストテキストテキストテキストテキストテキスト。
ソース
XHTML
<ul class="list132">
<li class="odd">テキストテキスト......</li>
<li class="even">テキストテキスト......</li>
<li class="odd">テキストテキスト......</li>
<li class="even">テキストテキスト......</li>
<li class="odd">テキストテキスト......</li>
</ul>
CSS
ul.list132 li {
margin: 0 0 1px 15px;
padding: 10px 15px 10px 29px;
list-style: none;
}
ul.list132 li.odd {
background: #CDF2CE url(../img/mk-green-disk.png) no-repeat 15px 11px;
}
ul.list132 li.even {
background: #E5F2E5 url(../img/mk-green-disk.png) no-repeat 15px 11px;
}
使用画像

list のカタログへ このページのトップへ
解説
li要素にclassをあてることによって奇数番目のアイテムと偶数番目のアイテムを振り分けています。backgroundプロパティで背景色とリストマークを入れています。