ul { list-style-type: disc; /* 实心圆点 */ } ol { list-style-type: decimal; /* 数字1,2,3... */ }
除了常见的样式,大家还可以使用图片作为列表符号,如下代码:
ul { list-style-image: url("bullet.png"); /* 使用图片作为符号 */ }
在新闻列表中,大家通常会将不同的新闻用<li>
元素包裹起来,并使用CSS样式来美化列表。下面是一个简单的样式示例:
ul.news { list-style: none; /* 隐藏原有的列表符号 */ padding: 0; margin: 0; } ul.news li { padding: 10px; border-bottom: 1px solid #ccc; } ul.news li:last-child { border-bottom: none; } ul.news li:hover { background-color: #f5f5f5; }
以上样式将新闻列表的样式设置为无标记列表,每条新闻之间有一条灰色下边框,鼠标悬停时会有灰色背景色。