搜索导航HTML,CSS 带搜索导航栏的示例代码
本文为大家介绍如何使用 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;
}
}
CSS 带搜索导航栏 - 带提交按钮
菜鸟教程(runoob.com)
* {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;
}
}
主页
关于
联系我们
提交
响应式搜索菜单
导航栏里面有一个搜索框。
调整浏览器窗口的大小, 查看效果。
CSS 带搜索导航栏 - 带搜索图标
菜鸟教程(runoob.com)
* {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;
}
}
主页
关于
联系我们
响应式搜索菜单
导航栏里面有一个搜索框。
调整浏览器窗口的大小, 查看效果。
到此这篇关于CSS 带搜索导航栏的示例代码的文章就介绍到这了,更多相关CSS 搜索导航栏内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!
搜索导航HTML,CSS 带搜索导航栏的示例代码相关推荐
- html flex自动换行,css flex布局超长自动换行的示例代码
要创建一个 flex 容器,只需要将一个 display: flex 属性添加到一个元素上. 默认情况下,所有的直接子元素都被认为是 flex 项,并从左到右依次排列在一行中. 如果 flex 项的宽 ...
- element表格实现树形全选_vue+element UI实现树形表格带复选框的示例代码
一:在component文件夹下新建如下treeTable文件夹,里面有2个文件: eval.js:将数据转换成树形数据 /** * @Author: jianglei * @Date: 2017-1 ...
- css 竖行进度图_前端学习--汇集了大量 CSS 的使用和学习的示例代码
CSS-Inspiration 这里可以让你寻找到使用或者是学习 CSS 的灵感,以分类的形式,展示不同 CSS 属性或者不同的课题使用 CSS 来解决的各种方法. 目前已有上百种的CSS 实现示例, ...
- c语言图形学画扇形代码,利用CSS绘制任意角度的扇形示例代码
前言 扇形制作原理,底部一个纯色原形,里面2个相同颜色的半圆,可以是白色,内部半圆按一定角度变化,就可以产生出扇形效果 效果图 示例代码: 扇形绘制 } .sx1{ position: absolut ...
- android代码查找快捷键是什么,Android Studio搜索功能(查找功能)及快捷键图文详解(示例代码)...
1.在当前窗口查找文本[Ctrl+F] F3 向下查找关键字出现位置 Shift+F3 向上一个关键字出现位置 2.在当前工程内查找文本[Ctrl+Shift+F] 先会弹出一个对话框,直接点击[fi ...
- css加三角阴影,用CSS画一个带阴影的三角形的示例代码
1. 思路 怎么用CSS3画一个带阴影的三角形呢 ? 有童鞋说, 这还不简单吗 网上有很多解决方案, 但其实大多都是实现不太完美的, 存在一些问题 假设我们做一个向下的三角形箭头 常见的方法大致有两种 ...
- android 3d魔方 代码,css实现3d立体魔方的示例代码
今天来做一个简单的3d魔方 先看效果图吧!把这个看会了,一些网上的3d的相册你就都会了 一.我们先准备好们的html代码 3d立体魔方 好了我们html代码就准备完成了,首先我们要有一个3d的思维,在 ...
- linux修改jdk环境变量6,Linux CentOS 6.5 使用自带jdk修改环境变量(示例代码)
首先声明,默认jdk指我们安装完CentOS后系统自带jdk,自己下载安装的jdk只需要下载,解压即可,之后步骤与此文一致 1.查看我们默认jdk的位置 指令: which java 我们去看一下发现 ...
- HTML和css重要的知识点,html 和 css 基础知识点(一)(示例代码)
伪类选择器: 伪类是直接在元素后面加":",例如a:hover,可直接在css中用而不用在html中像类一样定义,因为是浏览器预先设定好的. a一般顺序是:a:link{} 未访问 ...
最新文章
- 在OpenCV中使用单应性进行姿势估计
- java邮件支持_使用Spring的JAVA Mail支持简化邮件发送功能
- [基础题] 7.第二种(*)按如下要求编写Java程序:
- idea 关于高亮显示与选中字符串相同的内容
- UOJ#191. 【集训队互测2016】Unknown
- 面向对象编程学习5月7日-5月23日 网络直播yii-外企使用最多的PHP框架
- Leetcode016 3Sum Closest
- php 微信分享链接怎么弄,PHP实现 微信--分享朋友链接
- java语言在线编译器的设计与实现,已获万赞
- 极简代码(三)—— 向量加法
- 如何正确的卸载MATLAB7?
- python gephi可视化 金庸人物关系图
- nekohtml资料
- lg g2刷android8.0,lg g2线刷刷机教程(可救砖)
- 最新Vue2.0+组件开源项目库集合
- 根据WSDL文件生成JAVA代码
- Git 分支管理最佳实践
- 参与LABSUniswap IDO送普吉岛酒店公寓
- 远程计算机或许不支持所需的,WIN10远程计算机不支持所需的FIPS安全级别解决
- Android Studio模拟器AndroidWifi连接成功但无法访问网络问题
热门文章
- android 登录注册动画,Android开发(14)——动画实战:炫酷登录
- JAVA SE File下面的方法
- android arcgis定位,arcgis android之定位功能的示例代码
- ThingsBoard中的关系Relation
- 三星 j3 android 8.0,三星J3 Pro官方台湾版安卓8.0固件线刷包:BRI-J330GDXS3BSF5
- Flutter教程之 02 Flutter 桌面程序开发入门教程运行hello world (教程含源码)
- FindBugs,第 1 部分: 提高代码质量
- spring boot bilibili
- python:批量修改文件的访问时间、修改时间、改变时间!
- TB级(小白到大牛之路)技术视频资源福利大放送