CSS实现带有搜索框的导航栏简介
发布时间：2022-04-20 09:03:38 所属栏目：语言 来源：互联网
导读：导航栏是网页设置很重要的一部分，CSS导航栏的样式设计有很多，这篇文章主要给大家分享如何用CSS来实现一个带搜索的导航栏，下面的实例都是响应式的，效果图如下，感兴趣的朋友继续往下看吧。 创建一个搜索栏 div class=topnav a class=active href=#home主
|
导航栏是网页设置很重要的一部分，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; 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; （编辑：南通站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
