简易实现带搜索框的导航栏

最新推荐文章于 2023-05-19 20:31:44 发布

逗不理你~

最新推荐文章于 2023-05-19 20:31:44 发布

阅读量2.3k

点赞数 3

分类专栏：笔记

本文链接：https://blog.csdn.net/qq_43102934/article/details/107721468

版权

笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>带搜索框及按钮的导航事例</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box;}
body {margin: 0;font-family: Arial, Helvetica, sans-serif;}
.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: #00cb9e;color: white;}
.topnav .search-container {float: right;}
.topnav input[type=text] {padding: 8px;margin-top: 8px;font-size: 17px;border: none;}
.topnav .search-container button {float: right;padding: 6px;margin-top: 8px;margin-right: 16px;background: #ddd;font-size: 17px;border: none;cursor: pointer;}
.topnav .search-container button:hover {background: #ccc;}
@media screen and (max-width: 600px) {
.topnav .search-container {float: none;}
.topnav a, .topnav input[type=text], .topnav .search-container button {float: none;display: block;text-align: left;width: 100%;margin: 0; padding: 14px;}
.topnav input[type=text] {border: 1px solid #ccc;  }
}
</style>
</head>
<body>
<div class="topnav">
  <a class="active" href="#home">主页</a>
  <a href="#about">关于</a>
  <a href="#contact">联系我们</a>
  <div class="search-container">
    <form action="/action_page.php">
      <input type="text" placeholder="搜索.." name="search">
      <button type="submit">提交</button>
    </form>
  </div>
</div>
<div style="padding-left:16px">
   <h2>响应式搜索菜单</h2>
   <p>导航栏里面有一个搜索框。</p>
   <p>调整浏览器窗口的大小, 查看效果。</p>
</div>
</body>
</html>

逗不理你~

关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
2
评论
简易实现带搜索框的导航栏

<!DOCTYPE html><html><head><meta charset="utf-8"><title>带搜索框及按钮的导航事例</title><meta name="viewport" content="width=device-width, initial-scale=1"><style>* {box-sizing: border-box;}body {margin: 0;font-f
复制链接

扫一扫

专栏目录