ASP+CSS 实现列表隔行换色
投稿：mdxy-dxy
列表隔行换色是指在新闻和文章列表中,前一行和后一行的背景色交替显示,也可称为斑马线,给网页可增色不少
列表隔行换色是指在新闻和文章列表中，前一行和后一行的背景色交替显示，也可称为斑马线，给网页可增色不少。今看到小毅在BI的贴子“标准下隔行换色的思考”，采用UL的两行背景重复，虽说方法不错，但LI里的高度只能采用背景中的实际高度，不够灵活，所以用ASP+CSS 写了一个，采用自定义列表。
<%
set rs=......
sql="......"
rs.open sql,con,1,1
%>
<dl>
<%
i=0
do while not (rs.eof or err)%>
<dt><a href="http://www.forest53.com/tutorials_show.asp?
sortid=<%=rs("sortid")%>&id=<%=rs("id")%>"><%=rs("biaoti")%>
</a></dt>
<% if i mod 2 = 0 then%>
<dd>
<% else %>
<dd class="two">
<% end if %>
<%=rs("zhaiyao")%>
</dd>
<%
i=i+1
rs.moveNext
loop
%>
</dl>在ASP（Active Server Pages）中实现隔行变色通常涉及到对HTML表格或列表进行样式设置。ASP本身主要用于服务器端脚本处理，而具体的样式（如颜色变化）通常通过HTML和CSS来实现。下面是一些常见的方法来实现这一功能：
方法1：使用CSS和ASP
你可以在ASP页面中嵌入CSS样式，并通过ASP代码控制哪些行应用特定的样式。例如，你可以使用mod运算符来检查行号是否为奇数或偶数，从而应用不同的CSS类。
HTML结构：
<table>
<tr class="row1"><td>行1</td></tr>
<tr class="row2"><td>行2</td></tr>
<tr class="row1"><td>行3</td></tr>
<tr class="row2"><td>行4</td></tr>
<!-- 更多行 -->
</table>CSS样式：
<style>
.row1 { background-color: #f2f2f2; }
.row2 { background-color: #ffffff; }
</style>ASP代码：
如果你需要动态生成这些行，可以使用ASP代码来循环生成它们，并根据行号应用不同的类。例如：
<table>
<%
Dim i, numRows
numRows = 10 ' 假设有10行数据
For i = 1 To numRows
If i Mod 2 = 0 Then
Response.Write("<tr class='row2'><td>行" & i & "</td></tr>")
Else
Response.Write("<tr class='row1'><td>行" & i & "</td></tr>")
End If
Next
%>
</table>方法2：使用内联样式和ASP
如果你不想使用外部或内部的CSS文件，可以直接在<tr>标签中使用内联样式。例如：
<table>
<%
Dim i, numRows, rowColor
numRows = 10 ' 假设有10行数据
For i = 1 To numRows
If i Mod 2 = 0 Then
rowColor = "background-color: #ffffff;"
Else
rowColor = "background-color: #f2f2f2;"
End If
Response.Write("<tr style='" & rowColor & "'><td>行" & i & "</td></tr>")
Next
%>
</table>方法3：使用JavaScript（如果需要在客户端动态更改）
如果你希望在客户端根据用户交互动态更改行颜色，可以使用JavaScript。在ASP页面中嵌入JavaScript代码来实现这一功能：
<table id="myTable">
<% ' ASP代码生成表格行 %>
</table>
<script>
document.addEventListener('DOMContentLoaded', (event) => {
const table = document.getElementById('myTable');
const rows = table.getElementsByTagName('tr');
for (let i = 0; i < rows.length; i++) {
if (i % 2 === 0) {
rows[i].style.backgroundColor = '#f2f2f2'; // 奇数行颜色
} else {
rows[i].style.backgroundColor = '#ffffff'; // 偶数行颜色
}
}
});
</script>以上方法可以根据你的具体需求选择使用。通常，使用CSS和ASP结合的方式是最简单且性能较好的方法。