在设计网站导航栏的时候,通常需要设置导航栏菜单项之间的分割线。这样能够让菜单更加美观和易读。在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导航分割线设置方法,适当地使用可以为菜单增色不少。