写一份网页嵌套循环:咖啡 茶 红茶 绿茶 牛奶
时间: 2024-09-11 17:10:23 浏览: 18
当你想要在网页上显示一种饮料选择列表,可以使用HTML和CSS来创建嵌套循环结构。这里是一个简单的例子,假设你有一个JavaScript数组来存储这些饮料:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<style>
.drink-list {
list-style-type: none;
padding: 0;
}
.drink-item {
margin-bottom: 10px;
}
</style>
</head>
<body>
<ul class="drink-list">
<script>
var drinks = ["咖啡", "茶", "红茶", "绿茶", "牛奶"];
for (var i = 0; i < drinks.length; i++) {
if (i % 2 == 0) {
document.write('<li class="hot-drinks">');
} else {
document.write('<li class="cold-drinks">');
}
document.write(drinks[i]);
if (i !== drinks.length - 1) {
document.write('</li><li>');
} else {
document.write('</li>');
}
}
</script>
</ul>
</body>
</html>
```
在这个例子中,我们首先创建了一个无序列表`<ul>`,然后使用JavaScript遍历饮料数组。如果索引是偶数,我们将它标记为“热饮”;如果是奇数,标记为“冷饮”。每个饮料项都会添加到相应的`<li>`标签中,并通过条件判断在最后一个项目后关闭列表。