织梦dedecms列表list如何实现隔行变色？

使用 cycle 函数 (最推荐、最灵活)

这是织梦内置的、最标准也是最灵活的方法，它可以在一个循环中交替输出不同的值。

实现步骤：

1. 打开你的列表模板文件 通常位于 /templets/你的模板名称/list_article.htm。

2. 找到文章列表的循环代码 这个循环通常是这样的，找到 {dede:list} 标签包裹的部分。

   <ul class="list">
     {dede:list pagesize='10'}
     <li>
       <a href="[field:arcurl/]">[field:title/]</a>
       <span>[field:pubdate function="MyDate('Y-m-d',@me)"/]</span>
     </li>
     {/dede:list}
   </ul>

3. 修改循环代码，添加 cycle 函数

   
   （图片来源网络，侵删）

   在 <li> 标签中，我们添加一个 class，并使用 cycle 函数来为这个 class 赋值 'odd' 或 'even'。

   <ul class="list">
     {dede:list pagesize='10'}
     <!-- 
       这里的意思是：
       1. 在每次循环开始时，cycle 函数会检查当前是奇数次还是偶数次循环。
       2. 如果是奇数次，它就输出 'odd'。
       3. 如果是偶数次，它就输出 'even'。
       4. 然后它会自动切换，为下一次循环准备下一个值。
     -->
     <li class="[field:global name=autoindex runphp="yes"]
       if(@me % 2==0) @me='even';
       else @me='odd';
       [/field:global]">
       <a href="[field:arcurl/]">[field:title/]</a>
       <span>[field:pubdate function="MyDate('Y-m-d',@me)"/]</span>
     </li>
     {/dede:list}
   </ul>

   或者，更简洁的 cycle 写法（推荐）：

   <ul class="list">
     {dede:list pagesize='10'}
     <li class="{dede:field name='autoindex' runphp='yes'}if(@me % 2 == 0) {@me = 'even';} else {@me = 'odd';}{/dede:field}">
       <a href="[field:arcurl/]">[field:title/]</a>
       <span>[field:pubdate function="MyDate('Y-m-d',@me)"/]</span>
     </li>
     {/dede:list}
   </ul>

4. 在CSS文件中定义样式 你只需要在你的CSS文件（style.css）中为 .odd 和 .even 定义不同的样式即可。

   /* 列表项基础样式 */
   .list li {
     padding: 10px;
     border-bottom: 1px solid #eee;
     /* 其他公共样式... */
   }
   /* 奇数行样式 (白色背景) */
   .list li.odd {
     background-color: #ffffff; 
   }
   /* 偶数行样式 (浅灰色背景) */
   .list li.even {
     background-color: #f9f9f9;
   }

优点：

• 织梦原生：使用官方支持的标签，稳定可靠。
• 逻辑清晰：将样式逻辑与HTML结构分离。
• 高度灵活：不仅可以用于背景色，还可以用于边框、文字颜色等任何CSS属性。

使用 autoindex 变量和PHP判断 (传统方法)

这种方法与方法一类似,也是利用 autoindex 变量，但将判断逻辑直接写在PHP代码块里，很多老教程会使用这种方法。

实现步骤：

1. 打开列表模板文件，找到 {dede:list} 循环。

2. 使用 autoindex 和 runphp 进行判断

   <ul class="list">
     {dede:list pagesize='10'}
     <li>
       <?php
         // $autoindex 是当前的文章序号，从1开始
         if ($GLOBALS['autoindex'] % 2 == 0) {
           echo "<a class='even-link' href='" . $fields['arcurl'] . "'>" . $fields['title'] . "</a>";
         } else {
           echo "<a class='odd-link' href='" . $fields['arcurl'] . "'>" . $fields['title'] . "</a>";
         }
       ?>
       <span>[field:pubdate function="MyDate('Y-m-d',@me)"/]</span>
     </li>
     {/dede:list}
   </ul>

   或者更推荐的方式,还是通过给 li 加 class：

   <ul class="list">
     {dede:list pagesize='10'}
     <li <?php if($GLOBALS['autoindex'] % 2 == 0) echo "class='even'"; else echo "class='odd'"; ?>>
       <a href="[field:arcurl/]">[field:title/]</a>
       <span>[field:pubdate function="MyDate('Y-m-d',@me)"/]</span>
     </li>
     {/dede:list}
   </ul>

3. 在CSS文件中定义样式 (同方法一)

优点：

• 对于熟悉PHP的开发者来说,逻辑直观。

缺点：

• 模板中混杂了PHP代码,不够“纯净”。
• 织梦官方更推荐使用 cycle 函数这类标签化操作。

使用纯CSS nth-child 选择器 (最现代、最简洁)

如果你的列表结构非常规整,可以使用纯CSS来实现，这是最干净的方法，不需要修改任何织梦模板代码。

实现步骤：

1. 确保你的列表HTML结构规整 假设你的列表是这样的，每个 li 都是直接父级 ul 或 ol 的子元素。

   <ul class="list">
     {dede:list pagesize='10'}
     <li>
       <a href="[field:arcurl/]">[field:title/]</a>
       <span>[field:pubdate function="MyDate('Y-m-d',@me)"/]</span>
     </li>
     {/dede:list}
   </ul>

2. 在CSS文件中使用 nth-child 选择器

   /* 选择父级 .list 下的第2、4、6...个子元素 (偶数行) */
   .list li:nth-child(even) {
     background-color: #f9f9f9;
   }
   /* 选择父级 .list 下的第1、3、5...个子元素 (奇数行) */
   /* 注意：因为默认就是白色，所以通常可以不写 :nth-child(odd) */
   .list li:nth-child(odd) {
     background-color: #ffffff;
   }

优点：

• 零改动：完全不需要修改织梦的模板文件，只改CSS即可。
• 代码简洁：CSS非常干净，易于维护。
• 性能高：CSS选择器由浏览器直接解析，性能很好。

缺点：

• 依赖结构：如果列表结构复杂（有多个 ul 嵌套，或者 li 中包含其他元素），可能会选择错误。
• 兼容性：对于非常老的浏览器（如IE8及以下）不支持，但对于现代浏览器完全没有问题。

总结与建议

给您的最终建议：

• 如果你是新手或追求稳定，请使用 方法一 (cycle 函数)，这是最符合织梦设计思想的方法，也是最不容易出错的。
• 如果你的列表结构非常简单，且不考虑兼容老旧浏览器，使用 方法三 (CSS nth-child) 是最省事、最优雅的方案。