今天制作了一个响应式导航条，能够自动随着不同的屏幕分辨率或浏览器窗口大小的不同而改变导航条的样式，这里主要用到的就是CSS3的Media Query。具体可以查看浅谈响应式布局这篇文章，这里就不花费大量的篇幅介绍了，主要看一下这个导航条该怎么做。

另外需要提到的是，ie6-ie8是不支持CSS3的Media Query的，因此对于ie6-ie8我们需要特殊处理，就让他们保持默认样式，这对于布局及样式上都要考虑到这一点。

首先看一下布局这一块，html代码如下：

• 首页


• 电影


• 电视剧


• 动漫


• 综艺


• 纪录片


• 公开课

钢铁侠3
中国合伙人
盛夏晚晴天
陆贞传奇

风驰网

html部分另外还要有一个条件注释,当浏览器是ie6-8时给html标签挂载个类"ie6-8"，这样方便样式表里的处理：

...

下面就是样式控制了，先对整体样式及ie6-ie8进行处理

* {margin: 0; padding: 0;}
body {font: 14px/22px "宋体", arial, serif;}

.navBar {margin-top: 80px; width: 100%; height: 38px; background: #333;}

.nav {margin: 0 auto; border: 0px solid #ccc;}
.nav ul {list-style: none; width: auto;}
.nav ul li {height: 38px; text-align: center;}
.nav ul li a {display: block; font-size: 16px; color: #fff; text-decoration: none; line-height: 39px;}

.ie6-8 .nav {width: 1000px; height: 38px;}
.ie6-8 .nav ul li {float: left;}
.ie6-8 .nav ul li a {padding: 0 30px 0 30px;}
.ie6-8 .nav ul li.current {background: #f60;}
.ie6-8 .nav ul li:hover a {color: #f60;}
.ie6-8 .nav ul li a:hover {_color: #f60;}/*IE6 Hack*/
.ie6-8 .nav ul li.current:hover a {color: #fff;}

.ie6-8 .nav .hot {float: left; margin-left: 20px; padding-top: 8px;}
.ie6-8 .nav .hot a {padding: 0 5px 0 5px; font-size: 12px; color: #fff; text-decoration: none;}
.ie6-8 .nav .hot a:hover {color: #f60; text-decoration: underline;}

.ie6-8 .nav .title {display: none;}

ok，下面就用到Media Query了。

当屏幕宽度大于1000px时：

@media screen and (min-width: 1000px) {
.nav {width: 1000px; height: 38px;}

.nav ul li {float: left; width: auto;}
.nav ul li a {padding: 0 30px 0 30px;}
.nav ul li.current {background: #f60;}
.nav ul li:hover a {color: #f60;}
.nav ul li.current:hover a {color: #fff;}

.nav .hot {margin-left: 20px; padding-top: 8px;}
.nav .hot a {padding: 0 5px 0 5px; font-size: 12px; color: #fff; text-decoration: none;}
.nav .hot a:hover {color: #f60; text-decoration: underline;}

.nav .title {display: none;}
}

当屏幕宽度在640px到1000px之间时：

@media screen and (min-width: 640px) and (max-width: 1000px) {
.nav {width: auto; height: 38px;}

.nav ul li {float: left; width: 14%; min-width: 50px;}

.nav ul li.current {background: #f60;}
.nav ul li:hover a {color: #f60;}
.nav ul li.current:hover a {color: #fff;}

.nav .hot {display:none;}
.nav .title {display: none;}
}

当屏幕宽度小于640px时：

@media screen and (max-width: 640px) {
.navBar {margin-top: 0; height: auto; background: #444;}
.nav {width: auto; height: auto;}

.nav ul li {margin-top: 1px; width: 100%; min-width: 100px;background: #333;}

.nav ul li a:active {background: #f60;}

.nav .hot {display:none;}

.nav .title {position: relative; width: 100%; height: 38px; border-top: 1px solid #444; background: #333; text-align: center; font:normal 20px/35px "Microsoft YaHei", arial, serif; letter-spacing: 2px;}
.nav .title a {color: #f60; text-decoration: none;}
.nav .title .btn {position: absolute; right: 10px; top: 0; width: 34px; height: 34px; padding: 2px; background: url(btn.png) center center no-repeat; cursor: pointer;}
}

ok，对于布局及样式控制就完成了，效果也有了，3中不同状态下的效果如下图：

ok，这个响应式导航条基本就这样了，附上源码 css html vb 写下你的评论吧 ! 吐个槽吧,看都看了 会员登录 | 用户注册 推荐阅读 vb asp.net微信公众平台开发目录汇总陆续更新的相关内容 本文内容为asp.net微信公众平台开发的目录汇总，包括数据库设计、多层架构框架搭建和入口实现、微信消息封装及反射赋值、关注事件、用户记录、回复文本消息、图文消息、服务搭建（接入）、自定义菜单等。同时提供了示例代码和相关的后台管理功能。内容涵盖了多个方面，适合综合运用。 ... [详细] 蜡笔小新   2023-12-14 22:40:22 python lua语言闭包、模式匹配、日期、编译、模块的特性及应用 本文介绍了lua语言中闭包的特性及其在模式匹配、日期处理、编译和模块化等方面的应用。lua中的闭包是严格遵循词法定界的第一类值，函数可以作为变量自由传递，也可以作为参数传递给其他函数。这些特性使得lua语言具有极大的灵活性，为程序开发带来了便利。 ... [详细] 蜡笔小新   2023-12-14 18:18:21 python VScode格式化文档换行或不换行的设置方法 本文介绍了在VScode中设置格式化文档换行或不换行的方法，包括使用插件和修改settings.json文件的内容。详细步骤为：找到settings.json文件，将其中的代码替换为指定的代码。 ... [详细] 蜡笔小新   2023-12-14 17:15:38 upload 基于layUI的图片上传前预览功能的2种实现方式 本文介绍了基于layUI的图片上传前预览功能的两种实现方式：一种是使用blob+FileReader，另一种是使用layUI自带的参数。通过选择文件后点击文件名，在页面中间弹窗内预览图片。其中，layUI自带的参数实现了图片预览功能。该功能依赖于layUI的上传模块，并使用了blob和FileReader来读取本地文件并获取图像的base64编码。点击文件名时会执行See()函数。摘要长度为169字。 ... [详细] 蜡笔小新   2023-12-14 17:06:58 mvc Java实战之电影在线观看系统的实现 本文介绍了Java实战之电影在线观看系统的实现过程。首先对项目进行了简述，然后展示了系统的效果图。接着介绍了系统的核心代码，包括后台用户管理控制器、电影管理控制器和前台电影控制器。最后对项目的环境配置和使用的技术进行了说明，包括JSP、Spring、SpringMVC、MyBatis、html、css、JavaScript、JQuery、Ajax、layui和maven等。 ... [详细] 蜡笔小新   2023-12-14 15:52:03 mvc Java实现大数乘法（分治算法） 本文介绍了使用Java实现大数乘法的分治算法，包括输入数据的处理、普通大数乘法的结果和Karatsuba大数乘法的结果。通过改变long类型可以适应不同范围的大数乘法计算。 ... [详细] 蜡笔小新   2023-12-14 15:43:50 mvc Webpack5内置处理图片资源的配置方法 本文介绍了在Webpack5中处理图片资源的配置方法。在Webpack4中，我们需要使用file-loader和url-loader来处理图片资源，但是在Webpack5中，这两个Loader的功能已经被内置到Webpack中，我们只需要简单配置即可实现图片资源的处理。本文还介绍了一些常用的配置方法，如匹配不同类型的图片文件、设置输出路径等。通过本文的学习，读者可以快速掌握Webpack5处理图片资源的方法。 ... [详细] 蜡笔小新   2023-12-14 15:39:51 mvc HDU 2372 El Dorado（DP）的最长上升子序列长度求解方法 本文介绍了解决HDU 2372 El Dorado问题的一种动态规划方法，通过循环k的方式求解最长上升子序列的长度。具体实现过程包括初始化dp数组、读取数列、计算最长上升子序列长度等步骤。 ... [详细] 蜡笔小新   2023-12-14 15:08:18 mvc Java验证码——kaptcha的使用配置及样式 本文介绍了如何使用kaptcha库来实现Java验证码的配置和样式设置，包括pom.xml的依赖配置和web.xml中servlet的配置。 ... [详细] 蜡笔小新   2023-12-13 13:58:25 mvc 高质量SQL书写的30条建议 本文提供了30条关于优化SQL的建议，包括避免使用select *，使用具体字段，以及使用limit 1等。这些建议是基于实际开发经验总结出来的，旨在帮助读者优化SQL查询。 ... [详细] 蜡笔小新   2023-12-13 13:24:33 mvc 指针的引用以及在什么情况下使用指针的引用 本文介绍了指针的概念以及在函数调用时使用指针作为参数的情况。指针存放的是变量的地址，通过指针可以修改指针所指的变量的值。然而，如果想要修改指针的指向，就需要使用指针的引用。文章还通过一个简单的示例代码解释了指针的引用的使用方法，并思考了在修改指针的指向后，取指针的输出结果。 ... [详细] 蜡笔小新   2023-12-13 12:54:29 mvc 工程中添加Android Dependencies 在project.properties添加#Projecttarget.targetandroid-19android.library.reference.1..Sliding ... [详细] 蜡笔小新   2023-12-13 12:08:09 mvc 猜字母游戏 猜字母游戏猜字母游戏——设计数据结构猜字母游戏——设计程序结构猜字母游戏——实现字母生成方法猜字母游戏——实现字母检测方法猜字母游戏——实现主方法1猜字母游戏——设计数据结构1.1 ... [详细] 蜡笔小新   2023-12-13 12:04:03 mvc 解决IE678伪类不兼容问题的方法 本文介绍了解决IE678伪类不兼容问题的方法，包括少用CSS3和HTML5独有的属性，使用CSS hacker，使用last-child清除浮动、批量添加标签、去掉list item最后一个的border-right等技巧。同时还介绍了使用after清除浮动时加上IE独有属性zoom:1的处理方法。另外，本文还提到可以使用jQuery代替批量添加标签的功能，以及使用负边距和CSS2选择器element+element去掉list item最后一个的border-right的方法。 ... [详细] 蜡笔小新   2023-12-13 10:50:43 mvc CSS标签、类名和ID选择器的使用区别 本文讲解了CSS中标签选择器、类名选择器和ID选择器的使用区别，主要包括加空格和不加空格的区别。通过示例代码，说明了加空格表示选择当前节点的后代节点，而不加空格表示一个元素的多个类名不能加空格的规则。 ... [详细] 蜡笔小新   2023-12-13 09:13:35 手机用户2602915241 这个家伙很懒，什么也没留下！ Tags | 热门标签 rabbitmq mq http2 nodejs log4j service mqtt grpc vb python mvc cSharp nlp 队列 server sftp uuid cache cookie makefile 缓存 pdo php绘图 pip redis 分布式 upload 注入 interface cPlusPlus RankList | 热门文章 1C和指针读书笔记9 2fread()快读 3使用正则表达式从句子中找到[a-zA-Z]的单词 - finding words with [a-zA-Z] from a sentence using Regex 4Redis 3 – 集群 5Android 单击图片切换效果 6科研，办公几款强大又实用的软件（含安装包） 7Android NDK开发之旅23 C++ 继承、多态与接口 8知识普及之：CSS: body{font-size: 62.5%;}这种写法为什么？？？ 9Swift语言基础 10Linux常用命令——常用网络命令 11php – 如何从Mysql中选择逗号分隔变量 12asp.net连接上mysql之后如何调用？比如下面的登录验证功能怎么实现 13Errors on replication page of master (Warning in ./libraries/dbi/DBIMysqli.class.php#298) 14vue element插件this.$confirm用法及说明(取消也可以发请求) 15weex里其他的vue页面引用本地图片就显示不出来吗？ PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具 Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有