淘先锋技术网

首页 1 2 3 4 5 6 7
在设计网站导航栏的时候,通常需要设置导航栏菜单项之间的分割线。这样能够让菜单更加美观和易读。在CSS中,设置导航分割线有多种方法,下面介绍其中几种方法。 一、使用border属性设置导航分割线 可以通过设置菜单项的右边框来实现导航分割线,这种方法较为简单,代码如下: ``` nav li { border-right: 1px solid #ccc; } ``` 这样,每个菜单项之间都会有一条垂直的分割线。 二、使用伪类设置分割线 可以利用CSS的伪类来为导航栏添加分割线,代码如下: ``` nav li:not(:last-child)::after { content: ""; display: inline-block; border-right: 1px solid #ccc; height: 20px; margin-left: 10px; vertical-align: middle; } ``` 这种方法可以为每个菜单项之间添加一个垂直分割线,并且还可以自定义分割线的宽度、颜色和高度等属性。 三、使用背景图设置分割线 还可以通过设置背景图来实现导航分割线,代码如下: ``` nav li { background: url("nav-separator.png") no-repeat right center; padding-right: 20px; } ``` 这种方法需要准备一张带有分割线的图片,并且需要注意图片的大小和位置等属性,否则会造成不良的视觉效果。 以上是三种常用的CSS导航分割线设置方法,适当地使用可以为菜单增色不少。