CSS實(shí)現(xiàn)菜單欄橫線的方法

在CSS中，我們可以通過添加一條橫線來裝飾菜單欄，使得整個(gè)界面更加美觀，下面是一種簡單的方法來實(shí)現(xiàn)這個(gè)效果。

我們需要在HTML中定義一個(gè)菜單欄的結(jié)構(gòu)，

<div class="menu">
  <ul>
    <li><a href="#">首頁</a></li>
    <li><a href="#">產(chǎn)品</a></li>
    <li><a href="#">服務(wù)</a></li>
    <li><a href="#">聯(lián)系我們</a></li>
  </ul>
</div>

在CSS中定義一些樣式來美化這個(gè)菜單欄，

.menu {
  width: 100%;
  height: 50px;
  background-color: #333;
}
.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
}
.menu li {
  flex: 1;
  line-height: 50px;
  text-align: center;
}
.menu a {
  color: #fff;
  text-decoration: none;
}

我們可以添加一條橫線來裝飾菜單欄，

.menu::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background-color: #fff;
  margin-top: 10px;
}

這條橫線將會顯示在菜單欄的下方，并且會隨著菜單欄的寬度變化而變化，你可以根據(jù)需要調(diào)整橫線的顏色、高度和位置。

記得在HTML中引入CSS樣式表，

<link rel="stylesheet" href="style.css">

這樣，我們就可以在網(wǎng)頁中看到一個(gè)帶有橫線的菜單欄了，希望這篇文章能對你有所幫助！