CSS导航栏竖线分割|极客教程

CSS导航栏竖线分割

在网页设计中，导航栏是一个非常重要的部分，它可以让用户方便地浏览和定位网站的内容。而CSS导航栏竖线分割则是一种常见且有时尚感的设计风格，可以给导航栏增添一些视觉上的吸引力。在本文中，我们将介绍如何用CSS实现导航栏竖线分割效果。

实现方法

要实现CSS导航栏竖线分割，我们需要使用一些CSS技巧和属性。下面是一个基本的HTML结构和CSS样式，展示如何添加竖线分割效果到导航栏中：

HTML结构

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vertical Divider Navigation Bar</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="navbar">
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Contact</a>
</div>
</body>
</html>

CSS样式

body {
  font-family: Arial, sans-serif;
}

.navbar {
  display: flex;
  justify-content: space-between;
  background-color: #333;
  color: white;
  padding: 10px;
}

.navbar a {
  color: white;
  text-decoration: none;
  padding: 5px 10px;
  position: relative;
}

.navbar a::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  height: 80%;
  width: 2px;
  background-color: white;
}

.navbar a:last-child::after {
  display: none;
}

在上面的代码中，我们首先定义了一个navbar的容器，然后用flex布局和justify-content: space-between属性来实现导航项之间的平均分布。接着，我们给每个导航项添加了一些基本的样式，比如颜色、内边距和相对定位。最后，我们用::after伪元素来创建竖直的分割线，并设置它的样式为白色、宽度为2px。

为了保持最后一个导航项没有分割线，我们使用了last-child选择器，给它的伪元素设置了display: none属性。