‘壹’ 建设网站中的导航栏在设计时有哪些常见的样式
分享几个常见的导航设计：
1、滑出导航
滑出式导航是现在很流行的一种，当用户打开页面时，第一眼看到的是主要的内容而非菜单，给用户更好的第一印象。响应式全屏滑出导航也可以给人愉悦的体验。
2、全屏导航
全屏导航设计对内容有强调作用，用户可以更加便捷地切换到不同的页面，让内容成为更加触手可及的东西。如果设计的够合理，用户会在无意识间充分运用起它的导航功能。
3、单页滚动导航
对于不含有大量内容的网站而言，单页式的导航的效果非常不错。这样的网站只需要简单的向下滚动操作，内容就会持续不断地到你的眼前。
4、垂直导航
垂直导航最流行的有两种排版方式，一种是隐藏式的导航菜单，需要的时候点击显示。另外一种是固定的侧边栏来展示菜单。它为网站设计提供了一种新的视觉体验。
导航如何使用，还是要结合你的项目的具体特征来决定的。
‘贰’ web前端响应式布局怎么解决'
1、不要优先为桌面版设计
2、导航栏菜单的麻烦
3、不应隐藏内容
4、单独的移动端网站地址
5、糟糕的用户体验
6、不要忽视跨情景的公约
7、不要忽视页面的加载时间
8、不要为触摸屏设备开发
9、不找经验浅的人做前端开发
‘叁’ 什么是响应式是什么
响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。
响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，用“大势所趋”来形容也不为过。随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，还看到了一些成形的模式。
(3)web导航栏响应式扩展阅读：
1、响应式布局的优点： 面对不同分辨率设备灵活性强，能够快捷解决多设备显示适应问题。
2、响应式布局的缺点： 兼容各种设备工作量大，效率低下，代码累赘，会出现隐藏无用的元素，加载时间加长，其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果，一定程度上改变了网站原有的布局结构，会出现用户混淆的情况。
‘肆’ 网页设计中响应式具体怎么实现
眼下，几乎每个新客户都希望他们的网站可以有专门的移动设备版本。最完美的情况呐，就是为iPhone、iPad、黑莓、Kindle……各自打造一款——页面分辨率还必须兼容任何设备。谁知道未来5年内我们还需要为多少新发明的设备设计开发不同版本的页面？这种疯狂什么时候算个头？
在Web设计和开发领域，很快的，我们将会无法跟上设备与分辨率革新的步伐。对于多数网站来说，为每种新设备及分辨率创建其独立的版本根本就是不切实际的；结果就是，我们将会赢得使用某些设备的用户群，而失去那些使用其他设备的用户。不过，或许会有另外一种方式，可以帮助我们避免这种情况的发生。
响应式Web设计(Responsive Web design)的理念是，页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSS media query的使用等。无论用户正在使用笔记本还是iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备；换句话说，页面应该有能力去自动响应用户的设备环境。这样，我们就可以不必为不断到来的新设备做专门的版本设计和开发了。
‘伍’ BootStrap中怎样学习响应式导航条
1. 响应式导航栏，就是右上角的三道杠，点一下下方出现隐藏的导航栏。如果屏幕够大就显示所有的导航选项，如果屏幕小比如手机，就显示部分，剩下的放到三道杠里隐藏。
2. 外面套一个大的div，其实建议用nav标签，语义化一点呗！类名是navbar，说明这是个导航条，如果不带，后面的内容会移上来。navbar-default这是个皮肤，默认的那种，不带难看。
3. 里面分两部分，首先是navbar-header，这个是主页选项专用，里面放个navbar-brand显示字体会大一点。下面呢个button就是右上角的三道杠按钮，里面的类navbar-toggle是给这个button加个样式，让他处于导航条的右边，不加的话是呢个熊样你可以试试。data-toggle="collapse"跟下拉菜单data-toggle="dropdown"一个尿性，表明这个是三条杠导航。data-target="#shownav"指定点击三道杠后弹出啥玩意，跟幻灯片轮播里的指定哪个div里的图片，作用相同。后面的三个span就是画了三道杠。这样这个三道杠button就做好了，真特娘的累！
4. 继续，下面是包含需要隐藏的导航选项的ul，id="shownav"就是给上面的data-target用的，表示点一下三道杠出现这个ul。nav navbarnav是导航条的类，不想解释了。。collapse类是指这个ul是默认隐藏的，在点三道杠之前别特么给我出来！navbar-collapse是屏幕大的时候需要显示这些隐藏的导航选项，如果不加，大屏的时候就不显示了，只能小屏的时候点三道杠才显示。
5. ok，这样整个响应式导航就做完了。
‘陆’ 什么是web响应式网站
响应式Web设计(Responsive Web design)的理念是：
页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSS media query的使用等。无论用户正在使用笔记本还是iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备；换句话说，页面应该有能力去自动响应用户的设备环境。响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。
‘柒’ 什么是响应式web设计
响应式Web设计是在开发和设计网站过程中产生的一种方式，它的目的是让内容布局能随用户使用显示器的不同而变化。再明确点说，这种设计概念，就是让原本1292像素宽，4栏的内容，能够很好地显示在1025像素宽的用户屏幕上，同时还能自动简化成2栏。当然，让它很好的适应智能手机和其他种类电脑的屏幕也就成了水到渠成的事了。这种特殊的设计形式就被成为“响应式Web设计”。
响应式Web设计的优点：可以兼容所有尺寸的屏幕，随着手持设备（手机）屏幕尺寸繁多，也有很好的兼容性；而且开发一次，pc版和触屏版，手机版融合为一；
响应式Web设计的缺点：对前端工程师要求比较高，它的屏幕兼容要求前端工程师对各种浏览器差异性了解比较多，对于大数据展示的门户站点，如果用同一页面，即时浏览器不崩溃，在手机上一个页面，很难滑到最底部，带来操作是十分不方便的，触屏版和手机版对优质信息展示不足。
综合优缺点：响应式Web设计在企业站点，微型或者小站还是可以用的，对于大中型站点不合适（尤其大信息量展示的）。
‘捌’ 如何将web页面改成响应式
第一步：检测网页响应式
浏览器打开调试模式，打开响应式设计模式，在预览区域拖动大小范围，如果页面元素随大小变化而自适应，则页面是响应式页面，反之，页面是固定非响应式页面。如图：
第二步：编辑网页源文件
用Dreamweaver打开页面源文件，查看代码样式及文件结构，（Web页面的视觉效果由CSS样式表文件控制）。如图：
第三步：植入响应式代码
在CSS样式表中插入以下代码：
@media screen and (min-width:200px) and (max-device-width:640px){
/*这里写元素的样式*/
}
代码解释：这句代码是指定了在200像素~640像素之间的终端，显示的效果，在其他终端不显示。
第四步：横屏响应式设计
在CSS中插入以下代码
@media screen and (min-width:200px) and (max-device-width:640px){
.box{ width:100%;height:auto; margin:0 auto; background:#FFFFFF;}
}
控制元素在终端的横向展示（全屏拉伸缩放无滚动条），垂直方向用滚动条展示。如图：
第五步：竖屏响应式设计
在CSS中插入以下代码
@media screen and (min-width:200px) and (max-device-width:640px){
.box{ width:auto;height:100%; margin:0 auto; background:#FFFFFF;}
}
控制元素在终端的横向展示（全屏拉伸缩放无滚动条），垂直方向用滚动条展示。如图：
第六步：全屏响应式设计
在CSS中插入以下代码
@media screen and (min-width:200px) and (max-device-width:640px){
.box{ width:100%;height:100%; margin:0 auto; background:#FFFFFF;}
}
控制元素在终端的横向展示（全屏拉伸缩放无滚动条），垂直方向用滚动条展示。如图：
7
第七步：加工检测
响应式设计完成之后，用不同的终端全部检测一遍，有不合格的地方继续修改，这是程序员必须知道的也不能忽视的。
‘玖’ 如何将web页面改成响应式
1.检测网页响应式 2.编辑网页源文件3植入响应式代码4.横屏响应式设计5.竖屏响应式设计
6.全屏响应式设计7.加工检测，如果嫌麻烦的话，直接用nicebox做
‘拾’ 怎么用css制作一个响应式布局的导航栏
在html5中实现响应式导航栏的方法有很多种，如何利用纯CSS来现实这一功能，在这里小编就通过实例来和大家讲解，纯CSS实现的HTML5响应式导航栏的方法和技巧。
目前响应试web页面已经逐渐开始盛行，除了将页面的内容以及布局结构实现响应试以外，剩下的重点就是实现导航栏的响应试，当然方法有很多，不过最 近我发现了一个新的无需使用Javascript就能轻松实现响应试导航栏的技术，它采用的是简洁的html5标签结构来实现的应式导航栏，导航栏能够被 轻松的控制在左侧，中部，已经右侧。当鼠标经过导航栏时就会平滑拉菜单，不仅如此该响应式导航栏在手机屏幕和ie浏览器中也同样能够正常运行。
这样的你需要使用到css样式
你可以去了解下
Media Queries 响应媒体查询
你可以多去参考一些比较前沿的网站
比如 ipbun.cn 这样网站的响应式做的不错