[分享]css中导航栏怎么做

CSS中的导航栏是网站设计中非常常见的一部分，一般用来展示网站的分类和功能。导航栏一般放在页面的顶端，通常会使用一些特定的样式来使其更加醒目。要在CSS中制作一个导航栏，可以使用HTML的``和``标...

CSS中的导航栏是网站设计中非常常见的一部分，一般用来展示网站的分类和功能。导航栏一般放在页面的顶端，通常会使用一些特定的样式来使其更加醒目。
要在CSS中制作一个导航栏，可以使用HTML的`

`和`
• `标签，再通过CSS样式来设置它们的样式和排列方式。
  下面是一个简单的CSS导航栏的代码示例：
  

  <!-- HTML代码 -->
  <nav>
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#services">Services</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>
  
  <!-- CSS样式 -->
  nav ul {
    display: flex;  /* 使用Flex布局 */
    justify-content: space-between;  /* 左右对齐 */
    list-style-type: none;  /* 去掉列表符号 */
    margin: 0;
    padding: 0;
    background-color: #333;  /* 导航栏背景色 */
  }
  
  nav li {
    flex: 1;  /* 平均分配宽度 */
    text-align: center;  /* 文本居中 */
  }
  
  nav a {
    display: block;  /* 转化为块级元素 */
    color: white;  /* 链接文字颜色 */
    text-decoration: none;  /* 去掉下划线 */
    padding: 16px;  /* 链接内边距 */
  }
  
  nav a:hover {
    background-color: #555;  /* 鼠标悬停时背景色 */
  } 

  
  这段代码中，我们使用了Flex布局使导航栏水平排列，使用了`justify-content: space-between;`样式使导航链接间距平均分配。我们还使用了一些常见的CSS样式来美化导航栏，如去掉列表符号、设置背景色、链接颜色等等。
  以上就是制作CSS导航栏的基本代码和样式了，通过不同的排列方式、样式设置，可以制作出更加美观实用的导航栏。