css ul

/* CSS 样式定义 */
ul {
    list-style-type: none; /* 移除默认的列表符号 */
    margin: 0;
    padding: 0;
}

ul li {
    background-color: #f0f0f0; /* 设置每个列表项的背景颜色 */
    margin: 5px 0;
    padding: 10px;
    border: 1px solid #ccc; /* 添加边框 */
    border-radius: 5px; /* 圆角边框 */
}

ul li:nth-child(odd) {
    background-color: #e0e0e0; /* 奇数项的背景颜色 */
}

ul li:hover {
    background-color: #d0d0d0; /* 鼠标悬停时的背景颜色 */
}

<!-- HTML 示例代码 -->
<ul>
    <li>项目 1</li>
    <li>项目 2</li>
    <li>项目 3</li>
    <li>项目 4</li>
    <li>项目 5</li>
</ul>

解释说明：

• ul：移除了默认的外边距和内边距，并且去掉了默认的列表符号。
• ul li：为每个列表项设置了背景颜色、内边距、边框和圆角。
• ul li:nth-child(odd)：为奇数位置的列表项设置了不同的背景颜色，以实现交替的颜色效果。
• ul li:hover：当鼠标悬停在列表项上时，改变背景颜色，提供交互效果。