Ask and Learn

隔行换色(CSS)

目录

隔行变色(CSS)

在css中定义两种样式 .odd{...}.even{...} 分别用于奇数行和偶数行的不同背景颜色。

在html标签中设置

<ul id="list">
    <li class="odd">Item 1</li>
    <li class="even">Item 2</li>
    <li class="odd">Item 3</li>
    <li class="even">Item 4</li>
    <li class="odd">Item 5</li>
    <li class="even">Item 6</li>
    <li class="odd">Item 7</li>
    <li class="even">Item 8</li>
    <li class="odd">Item 9</li>
    <li class="even">Item 10</li>
    <li class="odd">Item 11</li>
</ul>

可以在 jsp 中利用循环,设置不同的 class,实现不同行的不同颜色,不过这样会把前端的逻辑放在后端处理,并不是一个好的处理 方案。

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6
  • Item 7
  • Item 8
  • Item 9
  • Item 10
  • Item 11