如何使用HTML和CSS实现文件夹标签样式的网站导航栏？

嘿，我来帮你把导航栏改成文件夹标签样式！先给你指出原代码里的几个小问题：一是border-colour拼写错了，应该是border-color；二是只写了border: 5px却没指定边框样式（比如solid），所以边框根本不会显示出来～

下面是修改后的完整代码，完美实现文件夹标签效果：

修改后的CSS代码 #

nav {
  margin: 0;
  /* 给导航栏底部加个边框，强化文件夹的视觉效果 */
  border-bottom: 5px solid royalblue;
}

ul {
  list-style-type: none;
  background-color: royalblue;
  font-family: Helvetica;
  font-size: 180%;
  margin: 0;
  /* 底部内边距和li的边框宽度一致，让激活标签和导航栏无缝衔接 */
  padding: 0 0 5px 10px;
}

li {
  display: inline-block;
  background-color: white;
  /* 标签之间的间距 */
  margin-right: 5px;
  /* 设置边框：宽度、样式、颜色，去掉底部边框模拟标签形状 */
  border: 5px solid red;
  border-bottom: none;
  /* 左上角和右上角圆角，还原文件夹标签的样子 */
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  /* 标签内部的左右内边距，避免文字太挤 */
  padding: 2px 15px;
}

li a {
  display: block;
  color: lightskyblue;
  text-decoration: none;
  /* 上下内边距，扩大点击区域，提升交互体验 */
  padding: 8px 0;
}

/* 鼠标悬停效果 */
li a:hover {
  color: white;
  background-color: lightskyblue;
}

/* 激活状态的标签：和导航栏背景一致，看起来像卡进文件夹里 */
li a.active {
  background-color: royalblue;
  color: white;
}

修改后的HTML代码（基本和你的一致，不需要大改） #

<nav>
  <ul>
    <li>
      <a class="active" href="#">Home</a>
    </li>
    <li>
      <a href="#">Full list of Articles</a>
    </li>
    <li>
      <a href="#">Disciplines</a>
    </li>
    <li>
      <a href="#">More Resources</a>
    </li>
    <li>
      <a class="about" href="#">About Me</a>
    </li>
  </ul>
</nav>

效果说明： #

• 每个标签都有左上角和右上角的圆角，去掉了底部边框，完美模拟文件夹标签的形状
• 激活的标签背景色和导航栏一致，看起来像“嵌入”了文件夹主体
• 标签之间有间距，不会拥挤，鼠标悬停效果也保留了你的原有设计

内容的提问来源于stack exchange，提问作者Diomedes