1. 去除列表默认样式:
ul, ol {
list-style: none; /* 去除列表的默认样式,包括项目符号或数字 */
padding: 0; /* 去除列表的内边距 */
margin: 0; /* 去除列表的外边距 */
}
2. 设置列表项样式:
li {
margin-bottom: 8px; /* 设置列表项之间的下边距 */
}
3. 自定义列表项标志(无序列表):
ul.custom {
list-style-type: square; /* 设置项目符号为方块 */
}
4. 自定义列表项标志(有序列表):
ol.custom {
list-style-type: upper-roman; /* 设置数字为大写罗马数字 */
}
5. 列表项背景和边框:
li.highlight {
background-color: #ffffcc; /* 设置列表项背景颜色 */
border: 1px solid #e0e0e0; /* 设置列表项边框 */
padding: 8px; /* 设置列表项内边距 */
}
6. 列表项悬停效果:
li:hover {
background-color: #f0f0f0; /* 设置鼠标悬停时的背景颜色 */
}
7. 列表项间隔线:
li:nth-child(even) {
background-color: #f9f9f9; /* 设置偶数位置的列表项背景颜色 */
}
这些样式是常见的列表样式设置,你可以根据具体需求进行调整和修改。
转载请注明出处:http://www.pingtaimeng.com/article/detail/12525/CSS