html导航栏搜索框
时间: 2023-07-20 09:12:49 浏览: 144
您好!要在HTML导航栏中添加搜索框,可以使用HTML和CSS来实现。以下是一些示例代码,可以根据您的需要进行调整:
HTML代码:
```
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">关于我们</a></li>
<li>
<form action="#" method="get">
<input type="text" placeholder="搜索">
<button type="submit">搜索</button>
</form>
</li>
</ul>
</nav>
```
CSS代码:
```
nav {
background-color: #333;
color: #fff;
display: flex;
justify-content: space-between;
padding: 10px;
}
nav ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
margin: 0 10px;
}
nav ul li a {
color: #fff;
text-decoration: none;
}
nav form {
display: flex;
margin: 0;
}
nav form input[type="text"] {
border-radius: 4px;
border: none;
padding: 5px;
}
nav form button[type="submit"] {
background-color: #fff;
border-radius: 4px;
border: none;
color: #333;
font-weight: bold;
margin-left: 5px;
padding: 5px 10px;
}
```
这段代码会创建一个带有搜索框的导航栏,您可以根据您的需要进行调整。希望这能对您有所帮助!