CSS实现带有搜索框的导航栏阐述

发布时间：2023-07-19 14:05:20 所属栏目：语言来源：

导读：导航栏是网页设置很重要的一部分，CSS导航栏的样式设计有很多，这篇文章主要给大家分享如何用CSS来实现一个带搜索的导航栏，下面的实例都是响应式的，效果图如下，感兴趣的朋友继续往下看吧。

创建一个搜索栏

导航栏是网页设置很重要的一部分，CSS导航栏的样式设计有很多，这篇文章主要给大家分享如何用CSS来实现一个带搜索的导航栏，下面的实例都是响应式的，效果图如下，感兴趣的朋友继续往下看吧。

创建一个搜索栏

<div class="topnav">

  <a class="active" href="#home">主页</a>

  <a href="#about">关于</a>

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

  <input type="text" placeholder="搜索..">

</div>

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

.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;

    }

}

CSS 带搜索导航栏 - 带提交按钮

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>菜鸟教程(runoob.com)</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: #2196F3;

  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>

CSS 带搜索导航栏 - 带搜索图标

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>菜鸟教程(runoob.com)</title>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<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: #2196F3;

  color: white;

}

.topnav .search-container {

  float: right;

}

.topnav input[type=text] {

  padding: 6px;

  margin-top: 8px;

  font-size: 17px;

  border: none;

}

.topnav .search-container button {

  float: right;

  padding: 6px 10px;

  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"><i class="fa fa-search"></i></button>

    </form>

  </div>

</div>

<div style="padding-left:16px">

  <h2>响应式搜索菜单</h2>

  <p>导航栏里面有一个搜索框。</p>

  <p>调整浏览器窗口的大小, 查看效果。</p>

</div>

</body>

</html>

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!