您的位置：首页 > 数码常识数码常识
CSS导航栏（带搜索框的网页导航栏）
2025-05-14人已围观
CSS导航栏（带搜索框的网页导航栏）
本文为大家介绍如何使用 CSS 创建一个带搜索的导航栏。
带搜索框的网页导航栏
以下实例均是响应式的。
可以先看下效果图：
创建一个搜索栏HTML 代码
<div >
<a href="http://sjzlt.cn/shuma/154743#home">主页</a>
<a href="http://sjzlt.cn/shuma/154743#about">关于</a>
<a href="http://sjzlt.cn/shuma/154743#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;
}
@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;
}
}
上面就是小居数码小编今天给大家介绍的关于（带搜索框的网页导航栏）的全部内容，希望可以帮助到你，想了解更多关于数码知识的问题，欢迎关注我们，并收藏，转发，分享。
94%的朋友还想知道的：
这个方法帮你轻松解决（斑斓石浏览器网页打不开）
网页显示找不到dns（浏览器找不到服务器或dns错误怎么办）
360浏览器打不开了怎么办（360浏览器网页打不开怎么回事）
什么是css的选择器（七种基本的css选择器）
154743
本文为大家介绍如何使用 CSS 创建一个带搜索的导航栏。
带搜索框的网页导航栏
以下实例均是响应式的。
可以先看下效果图：
创建一个搜索栏HTML 代码
<div >
<a href="http://sjzlt.cn/shuma/154743#home">主页</a>
<a href="http://sjzlt.cn/shuma/154743#about">关于</a>
<a href="http://sjzlt.cn/shuma/154743#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;
}
@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;
}
}
上面就是小居数码小编今天给大家介绍的关于（带搜索框的网页导航栏）的全部内容，希望可以帮助到你，想了解更多关于数码知识的问题，欢迎关注我们，并收藏，转发，分享。
94%的朋友还想知道的：
这个方法帮你轻松解决（斑斓石浏览器网页打不开）
网页显示找不到dns（浏览器找不到服务器或dns错误怎么办）
360浏览器打不开了怎么办（360浏览器网页打不开怎么回事）
什么是css的选择器（七种基本的css选择器）
154743
很赞哦！ ()