导航栏上加搜索条代码
时间: 2023-11-16 18:07:56 浏览: 44
您可以使用HTML和CSS来创建导航栏和搜索条。以下是一个简单的例子:
HTML代码:
```
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">联系我们</a></li>
<li class="search">
<form>
<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;
align-items: center;
padding: 10px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
nav ul li a {
color: #fff;
text-decoration: none;
padding: 10px;
}
nav ul li.search {
display: flex;
align-items: center;
}
nav ul li.search form {
display: flex;
align-items: center;
}
nav ul li.search input[type="text"] {
border: none;
padding: 5px;
margin-right: 10px;
}
nav ul li.search button[type="submit"] {
background-color: #fff;
color: #333;
border: none;
padding: 5px 10px;
}
```
这段代码将创建一个具有搜索条的简单导航栏。您可以根据需要进行修改和定制。