以下实例均是相应式的。

可以先看下效果图：

创建一个搜索栏HTML 代码

<div class=\公众topnav\公众>

html导航栏CSS 带搜刮导航栏 Bootstrap

<a class=\"大众active\"大众 href=\"大众#home\公众>主页</a>

<a href=\"大众#about\"大众>关于</a>

<a href=\"大众#contact\"大众>联系我们</a>

<input type=\"大众text\公众 placeholder=\公众搜索..\公众>

</div>

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;

}

/ 突出显示当前选中的元素 /

.topnav a.active {

background-color: #2196F3;

color: white;

}

/ 设置导航栏的搜索框样式 /

.topnav input[type=text] {

float: right;

padding: 6px;

border: none;

margin-top: 8px;

margin-right: 16px;

font-size: 17px;

}

/ 当屏幕宽度小于 600px 时，垂直堆叠显示菜单选项和搜索框 /

@media screen and (max-width: 600px) {

.topnav a, .topnav input[type=text] {

float: none;

display: block;

text-align: left;

width: 100%;

margin: 0;

padding: 14px;

}

.topnav input[type=text] {

border: 1px solid #ccc;

}

}