纯CSS实现的紫罗兰风格导航条效果代码

接下来我将分享一下“纯CSS实现的紫罗兰风格导航条效果代码”的完整攻略。

理解需求

首先我们需要了解“紫罗兰风格导航条”的具体要求，在这里，我们将它概括为以下几个方面：

1. 导航条呈现紫罗兰色系
2. 导航条显示为一条横线，下面有文字
3. 鼠标hover时，文字高亮并显示下划线
4. 导航条的宽度自适应屏幕大小，对于固定宽度，应有媒体查询适配

基本了解了所需实现的效果后，我们就可以开始了解代码的具体实现了。

确定HTML结构

首先我们需要编写HTML结构，表示导航条的基本框架。在这里我们采用ul/li标签表示导航条的列表内容，代码如下：

<nav>
  <ul>
    <li><a href="#">home</a></li>
    <li><a href="#">about</a></li>
    <li><a href="#">services</a></li>
    <li><a href="#">contact</a></li>
  </ul>
</nav>

注意，这里我们使用了

和

标签来定义导航条的列表内容。

CSS样式的添加

接下来是给导航条添加CSS样式的过程。我们需要在CSS文件中定义导航条的样式，并实现其效果。

导航条呈现紫罗兰色系

这里我们采用线性渐变来实现导航条的紫罗兰色系，代码如下：

nav {
  background: linear-gradient(to right, #C9A0DC, #A16EDF);
}

导航条显示为一条横线，下面有文字

这部分需要定义导航条的li和a标签的样式。我们将所有li设为水平排列，且a标签的字体颜色为白色，其代码如下：

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}

nav li {
  margin: 0;
  padding: 0;
  width: 25%;
  text-align: center;
  display: flex;
  justify-content: center;
}

nav li a {
  text-decoration: none;
  letter-spacing: 3px;
  font-size: 20px;
  color: #fff;
  display: block;
  padding: 20px 0;
  position: relative;
  transition: 0.5s;
}

鼠标hover时，文字高亮并显示下划线

我们可以通过伪类:hover来实现导航条鼠标hover时的效果。下划线可以利用::before伪类来实现。代码如下：

nav li a::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #fff;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s ease;
}

nav li a:hover::before {
  transform: scaleX(1);
}

nav li a:hover {
  color: #F8CDDA;
}

导航条的宽度自适应屏幕大小，对于固定宽度，应有媒体查询适配

对于宽度自适应屏幕大小，我们可以使用相对单位vw来划分li的宽度；对于固定宽度，我们可以采用媒体查询进行适配。代码如下：

@media screen and (max-width: 768px) {
  nav li {
    width: 50%;
  }
}

@media screen and (max-width: 480px) {
  nav li {
    width: 100%;
  }
}

示例说明

下面是两个示例，第一个是用于宽屏幕设备，第二个是用于窄屏幕设备的导航条代码：

用于宽屏屏幕设备的导航条代码

<nav>
  <ul>
    <li><a href="#">home</a></li>
    <li><a href="#">about</a></li>
    <li><a href="#">services</a></li>
    <li><a href="#">contact</a></li>
  </ul>
</nav>

nav {
  background: linear-gradient(to right, #C9A0DC, #A16EDF);
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}

nav li {
  margin: 0;
  padding: 0;
  width: 25%;
  text-align: center;
  display: flex;
  justify-content: center;
}

nav li a {
  text-decoration: none;
  letter-spacing: 3px;
  font-size: 20px;
  color: #fff;
  display: block;
  padding: 20px 0;
  position: relative;
  transition: 0.5s;
}

nav li a::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #fff;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s ease;
}

nav li a:hover::before {
  transform: scaleX(1);
}

nav li a:hover {
  color: #F8CDDA;
}

用于窄屏屏幕设备的导航条代码

<nav>
  <ul>
    <li><a href="#">home</a></li>
    <li><a href="#">about</a></li>
    <li><a href="#">services</a></li>
    <li><a href="#">contact</a></li>
  </ul>
</nav>

nav {
  background: linear-gradient(to right, #C9A0DC, #A16EDF);
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}

nav li {
  margin: 0;
  padding: 0;
  width: 50%;
  text-align: center;
  display: flex;
  justify-content: center;
}

nav li a {
  text-decoration: none;
  letter-spacing: 3px;
  font-size: 20px;
  color: #fff;
  display: block;
  padding: 20px 0;
  position: relative;
  transition: 0.5s;
}

nav li a::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #fff;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s ease;
}

nav li a:hover::before {
  transform: scaleX(1);
}

nav li a:hover {
  color: #F8CDDA;
}

@media screen and (max-width: 768px) {
  nav li {
    width: 50%;
  }
}

@media screen and (max-width: 480px) {
  nav li {
    width: 100%;
  }
}

以上就是对“纯CSS实现的紫罗兰风格导航条效果代码”的完整攻略及示例代码的说明了。