页面导航栏css代码,css导航栏菜鸟教程

　　这篇文章展示了如何使用CSS创建一个带有搜索功能的导航栏。

　　下面的例子都是有求必应。

　　可以先看看效果图：

创建一个搜索栏

　　 div class= top nav a class= active href= # home 主页/a a href=#about 关于/a a href=#contact 联系我们/a输入类型=text placeholder=搜索./div/*在顶部导航栏中添加黑色背景颜色*/.顶部导航{ overflow:hidden；背景色：# e9e9e9} /*设置导航栏的链接样式*/.顶部导航a { float:left；显示：块；颜色：黑色；文本对齐：居中；填充：14px 16px文字-装饰：无；字体大小：17px} /*在悬停时更改链接的颜色*/.顶部导航a:悬停{背景色：# DDD；颜色：黑色；} /* 突出显示当前选中的元素*/.顶部导航a .活动{ background-color:# 2196 F3；颜色：白色；} /* 设置导航栏的搜索框样式*/.顶部导航输入[type=text]{ float:right；填充：6px边框：无；边距-顶部：8px右边距：16px字体大小：17px} /*当屏幕宽度小于600像素时，垂直堆叠显示菜单选项和搜索框*/@媒体屏幕和（最大宽度：600像素){。topnav a，100 .顶部导航输入[type=text]{ float:none；显示：块；文本对齐：左对齐；宽度：100%;边距：0;填充：14px}。顶部导航输入[type=text]{ border:1px solid # CCC；}}

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

　　 !DOCTYPE html html head meta charset= utf-8 title菜鸟教程(运行OOB。com)/title meta name= viewport content= width=device-width，initial-scale=1 style * { box-sizing:border-box；}正文{ margin:0；字体系列：阿里亚，Helvetica，无衬线；}.顶部导航{ overflow:hidden；背景色：# e9e9e9}。顶部导航a { float:left；显示：块；颜色：黑色；文本对齐：居中；填充：14px 16px文字-装饰：无；字体大小：17px}。顶部导航a:悬停{背景色：# DDD；颜色：黑色；}.顶部导航a .活动{ background-color:# 2196 F3；颜色：白色；}.顶级导航。搜索容器{ float:对；}.顶部导航输入[type=text]{ padding:8px；边距-顶部：8px字体大小：17px边框：无；}.顶级导航。搜索容器按钮{ float:对；填充：6px边距-顶部：8px右边距：16px背景：# ddd字体大小：17px边框：无；光标：指针；}.顶级导航搜索-容器按钮：悬停{背景：# CCC} @媒体屏幕和(最大宽度：600像素).顶级导航。搜索容器{ float:无；} .topnav a，100 .顶导航输入。顶级导航。搜索容器按钮{ float:无；显示：块；文本对齐：左对齐；宽度：100%;边距：0;填充：14px}。顶部导航输入[type=text]{ border:1px solid # CCC；} }/style/headbydiv class= top nav 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=搜索.名称=搜索按钮类型=提交提交/button/form/div/div div style= padding-left:16px H2响应式搜索菜单/h2 p导航栏里面有一个搜索框人民警察调整浏览器窗口的大小，查看效果。

　　/p/div/body/html

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

　　！DOCTYPE html html head meta charset= utf-8 title菜鸟教程(运行OOB。/title link rel= style sheet href= https://cdnjs。云层耀斑。com/Ajax/libs/font-awesome/4。7 .0/CSS/font-牛逼。量滴CSS style * { box-sizing:border-box；}正文{ margin:0；字体系列：阿里亚，Helvetica，无衬线；}.顶部导航{ overflow:hidden；背景色：# e9e9e9}。顶部导航a { float:left；显示：块；颜色：黑色；文本对齐：居中；填充：14px 16px文字-装饰：无；字体大小：17px}。顶部导航a:悬停{背景色：# DDD；颜色：黑色；}.顶部导航a .活动{ background-color:# 2196 F3；颜色：白色；}.顶级导航。搜索容器{ float:对；}.顶部导航输入[type=text]{ padding:6px；边距-顶部：8px字体大小：17px边框：无；}.顶级导航。搜索容器按钮{ float:对；填充：6像素10像素边距-顶部：8px右边距：16px背景：# ddd字体大小：17px边框：无；光标：指针；}.顶级导航搜索-容器按钮：悬停{背景：# CCC} @媒体屏幕和(最大宽度：600像素).顶级导航。搜索容器{ float:无；} .topnav a，100 .顶导航输入。顶级导航。搜索容器按钮{ float:无；显示：块；文本对齐：左对齐；宽度：100%;边距：0;填充：14px}。顶部导航输入[type=text]{ border:1px solid # CCC；} }/style/headbydiv class= top nav 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/div/body/html到此这篇关于半铸钢钢性铸铁(铸造半钢)带搜索导航栏的示例代码的文章就介绍到这了，更多相关半铸钢钢性铸铁(铸造半钢)搜索导航栏内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。