如何使用HTML和CSS实现带有搜索框的导航栏？

翻滚的胖子
2023-07-26 11:28:02
前端技术
CSS JavaScript

在本文中，我们将学习如何使用HTML和CSS来创建一个带有搜索框的导航栏。

首先，我们需要创建一个HTML文件，并使用<nav>标签来定义导航栏的容器。

<nav>
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">服务</a></li>
    <li><a href="#">联系我们</a></li>
    <li><input type="text" placeholder="搜索"/></li>
  </ul>
</nav>

在上述代码中，我们使用了<ul>和<li>标签来创建导航栏的列表项，并使用<a>标签来添加链接。此外，我们还在导航栏中添加了一个输入框，用于搜索功能。

接下来，我们可以使用CSS来为导航栏添加样式。以下是一个简单的CSS示例：

nav {
  background-color: #333;
  height: 50px;
}
 
ul {
  list-style-type: none;
  display: flex;
}
 
li {
  margin-right: 10px;
}
 
a {
  color: #fff;
  text-decoration: none;
  padding: 10px;
}
 
input[type="text"] {
  padding: 5px;
}