首页用html结合js制作一个隔行变色的表单

用html结合js制作一个隔行变色的表单

时间: 2024-11-15 19:23:48 浏览: 10

在HTML中创建一个隔行变色的表单，你可以使用CSS的伪类`:nth-child`来实现这种效果。下面是一个简单的例子： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> /* 首先，设置表单的基本样式 */ form { display: table; /* 将表单元素排列成表格形式 */ width: 100%; } input[type="text"], textarea { border: 1px solid #ccc; padding: 5px; margin-bottom: 5px; width: 100%; box-sizing: border-box; } /* 使用 nth-child 规则给偶数行添加背景颜色 */ input:nth-child(even), textarea:nth-child(even) { background-color: lightgray; } /* 给奇数行添加不同的背景颜色 */ input:nth-child(odd), textarea:nth-child(odd) { background-color: white; } </style> </head> <body> <form> <input type="text" placeholder="输入字段1"> <textarea placeholder="输入文本区域"></textarea>  <input type="text"> <textarea></textarea>  </form> </body> </html> ``` 在这个示例中，所有的`<input>`和`<textarea>`元素都会按照奇数行和偶数行交替改变背景颜色。

阅读全文