ul {
list-style: none; /* 去掉默认的标志符号 */
padding: 0; /* 去掉左侧间距 */
}
ul li {
margin: 10px 0; /* 上下间距为10px */
padding: 5px 10px; /* 左右间距为10px 上下间距为5px */
background-color: #f5f5f5; /* 背景颜色 */
border-radius: 5px; /* 圆角 */
border: 1px dashed #ccc; /* 边框 */
box-shadow: 1px 1px 3px rgba(0,0,0,0.1); /* 阴影 */
}上面的代码是对
- 和
- 标签添加的CSS样式，可以让列表项看起来更加美观。下面大家看一下样式表中应用的效果。
- 列表项1
- 列表项2
- 列表项3
- 列表项4
通过应用上述CSS样式，大家可以看到列表项的外观得到了很大的改变，更加美观、整洁。