1、这种效果对用户来说是十分具有视觉冲击力的4CSS3+Js实现响应式导航条 今天制作了一个响应式导航条，能够自动随着不同的屏幕分辨率或浏览器窗口大小的不同而改变导航条的样式，这里主要用到的就是CSS3的Media Query具体；Bootstrap 有一个nav类让我们能够创建各种各样的导航元素，你可以在h1标签之后加入如下的代码 Home Page One Page Two navbar相关的类拥有导航条所有的样式，添加navbar。

2、解释响应式布局，怎么实现的有几种方法实现1原生代码实现在国内目前设计网页的时候，一般会分成PC端和移动端两套页面，但在一定的情况下，必须满足只设计一个页面的情况下，满足不同端口都能正常使用，因此会用用到；在HTML5页面中，经常使用标签来充当导航的结构化标签标签用于定义页面的导航部分，通常包含导航链接或导航菜单它提供了一种语义化的方式来标记页面的导航内容，使得搜索引擎和辅助技术能够更好地理解和处理导航部分的内容；1 响应式导航栏，就是右上角的三道杠，点一下下方出现隐藏的导航栏如果屏幕够大就显示所有的导航选项，如果屏幕小比如手机，就显示部分，剩下的放到三道杠里隐藏2 外面套一个大的div，其实建议用nav标签，语义化；如果要添加更多的菜单，只需要后边继续添加即可 特别提示 写代码过程中一定要记得换行，开头留空，否则过后找东西，连你自己都不知道写的是什么何谈从哪里找起；首先需要在HTML中添加一个按钮元素，当用户点击该按钮时，下拉菜单栏会显示出来接着使用JavaScript来控制下拉菜单栏的显示和隐藏，可以使用jQuery等框架来简化代码响应式设计下的下拉菜单栏在响应式设计中，下拉菜单栏需要适应；代码使用 $documentready 函数确保文档加载完成后才运行代码然后使用 $#x27menu li a#x27each 方法选择菜单中所有列表项内的超链接，并使用 each 方法循环遍历它们之后使用 if $$this。

3、引用样式类 在ul标签内添加 class=#34nav#34，就可以让nav下的li标签引用到设置好的样式类如图查看效果 把html文件保存后，使用浏览器打开即可看到横向导航菜单效果如图所有代码 ！DOCTYPE html html；导航栏标签可以直接在H5使用2然后打开indexhtml文件，输入以下代码3首先第一个方法就是使用displayinlineblock将ul标签设置成行内块级元素然后将li标签设置为左浮动即可4第二种方法就是就是将p设置为displayta。

4、下面先给出一个带有链接的， 而且还支持移动端的例子代码bootstrap导航条的可选页面， 有两种可自己写css定义， 第一种默认的navbardefault， 效果是白色的背景黑色的字， 第二种是navbarinverse， 效果是黑色的；5创建横向导航的样式 在标签里添加一个样式类为navli，然后再navli类中设置样式背景颜色为红色，浮动为左浮动，内边框上下为8px左右为15px，列表属性为，字体颜色为白色样式代码为navlibackgroundcolor；本人亲测下面这些代码是可以实现二级或多级导航菜单的 lt！ margin0pxpadding0px body overflowscrollfontsize12pxfontfamilyArial， Helvetica， sansserifcolor#000 a fontsize12pxfont；DreamWeaver 是用标签行为的功能来制作下拉菜单的具体步骤1在DreamWeaver中绘制层注意是绘制层，不是插入div2绘制一个 宽度130px 高度20px 的层 在层里插入同样大小的表格 这时DreamWeaver会自动命名ID为 Layer1；如图，制作导航条菜单一般是用一个div嵌套ul和li标签，然后li里面有a标签布局做好之后，开始写导航条的样式，如图，先清除导航条的margin和padding然后定位导航条的div，这里我就用绝对定位来居中，如果你有其他导航条居中。