CSS：横向导航栏

要创建一个横向导航栏，您可以使用HTML和CSS来实现。以下是一个简单的例子：

HTML:




<nav>
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#about">About</a></li>
  </ul>
</nav>

CSS:




nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}
 
nav li {
  float: left;
}
 
nav li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
 
nav li a:hover {
  background-color: #111;
}

这段代码创建了一个水平的导航栏，其中每个选项都是浮动的，以便它们横向排列。当鼠标悬停在某个链接上时，背景色会变暗。

CSS：横向导航栏

评论已关闭

推荐阅读