首页创建一个HTML文件，包含至少5个列表项，每个列表项都应该是一个超链接。列表项的字体应该有不同的颜色，并且一行一行排序，每一行的颜色均不同，当鼠标悬停时颜色应该变化

创建一个HTML文件，包含至少5个列表项，每个列表项都应该是一个超链接。列表项的字体应该有不同的颜色，并且一行一行排序，每一行的颜色均不同，当鼠标悬停时颜色应该变化

时间: 2024-10-11 08:13:49 浏览: 38

创建一个HTML文件，包含一个有序列表（`<ol>`），其中包含五个列表项（`<li>`），每个都是超链接（`<a>`）。我们将使用CSS来控制字体颜色、行间排列以及鼠标悬浮时的颜色改变。以下是示例代码： ```html <!DOCTYPE html> <html lang="zh"> <head> <style> ol li { display: inline-block; padding: 8px; margin-bottom: 4px; } .color1 { color: #ff0000; } /* 红色 */ .color2 { color: #00ff00; } /* 绿色 */ .color3 { color: #0000ff; } /* 蓝色 */ .color4 { color: #ffff00; } /* 黄色 */ .color5 { color: #ff00ff; } /* 紫色 */ li:hover { background-color: rgba(0, 0, 0, 0.05); /* 鼠标悬停时背景变浅 */ cursor: pointer; } </style> </head> <body> <h2>五种颜色的超链接列表</h2> <ol> <li class="color1"><a href="#">红色链接1</a></li> <li class="color2"><a href="#">绿色链接2</a></li> <li class="color3"><a href="#">蓝色链接3</a></li> <li class="color4"><a href="#">黄色链接4</a></li> <li class="color5"><a href="#">紫色链接5</a></li> </ol> </body> </html> ``` 在这个例子中，我们使用了`.color1`, `.color2`, ... 类别来设置字体颜色，并通过`:hover`伪类来改变鼠标悬停时的颜色。列表项按行排列是因为它们都在同一个`<ol>`元素中，`inline-block`布局会保证它们在同一行显示。

阅读全文