搜索导航HTML,CSS 带搜索导航栏的示例代码

本文为大家介绍如何使用 CSS 创建一个带搜索的导航栏。

以下实例均是响应式的。

可以先看下效果图：

创建一个搜索栏

主页

关于

联系我们

/* 在顶部导航栏中添加黑色背景颜色 */

.topnav {

overflow: hidden;

background-color: #e9e9e9;

}

/* 设置导航栏的链接样式 */

.topnav a {

float: left;

display: block;

color: black;

text-align: center;

padding: 14px 16px;

text-decoration: none;

font-size: 17px;

}

/* 在悬停时更改链接的颜色 */

.topnav a:hover {

background-color: #ddd;

color: black;

}