css用列表布置导航 |css spin

/* 水平导航布局 */
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
display: inline-block;
padding: 10px;
}
/* 垂直导航布局 */
ol {
list-style: none;
margin: 0;
padding: 0;
}
li {
padding: 10px;
}
li:hover {
background-color: #ddd;
}

如上所示，大家先对列表进行了一些基本样式的设置，例如去除列表标记样式，以及去除默认的内外边距等。对于水平导航，大家给每个列表项设置了inline-block的display属性来实现横向排列；而对于垂直导航，大家仍然使用了默认的列表项排列方式。注意，对于垂直导航，大家增加了一个hover事件，当鼠标悬停在某个列表项上时，背景色变为灰色。

此外，大家在实际应用中还可以对导航进行一些修饰。例如，大家可以为当前所在页面对应的导航项添加特殊的样式，以便用户更加清晰地知道自己所处的位置。大家还可以为导航项添加下拉菜单等交互式效果。

总之，在CSS中使用列表来布置导航是一种非常常见的方式。掌握这种方式可以让大家更加方便地实现导航的布局和修饰，从而提升用户体验。