html响应式布局手机屏幕导航条,导航菜单的 HTML《 响应式网页设计 》

下面我们先去添加导航菜单需要的 HTML，如果你很熟悉 HTML，可以直接跳过这节 …

打开网页 … 找到要添加导航菜单的位置 ….

先添加一个 nav 标签 … 在上面定义一个 nav Id .. nav 就是 navigation 的简写，就是导航的意思 … 我的编辑器里安装了 Emmet ，所以可以这样来写 nav#nav

然后是

• 无序的列表标签 … 里面是一些
• 标签定义的列表项目 … 这里添加五个
• 标签 … 列表里面是 标签 …

  再上面再添加一个 href 属性 … 值可以使用一个占位符 … 加上一个 # 号 … 再每个项目上再添加点文字 …

  然后按一下 tab 键 ….

  nav#nav>ul>li*5>a[href="#"]{项目 $}

  按钮

  下面我们需要准备两个按钮 … 一个是打开导航用的按钮，一个是关闭导航用的按钮 … 按钮上的图标可以使用 font awsome (http://fontawesome.io/ ) … Get Started …

  直接使用 BootstrapCDN 上的 font-awesome … 复制一下这行代码 ….

  回到网页 … 粘贴到

  标签上 … 这样就可以使用 font awecome 上面的图标了 …

  先处理一下开启导航菜单的小图标 …

  再回到 font awesome … 点击 icons … 在这里你可以找到想要使用的图标 … 搜索一下 reorder … 点击这个小图标 …

  然后复制显示这个小图标的代码 … 回到网页 … 粘贴 …

  页面上会显示一个三条横线的小图标 … 再去给它添加一个

  一个 a 标签… 一会要给它添加样式，所以可以在上面定义一些类 … 添加一个 open 类 … 同时再添加一个 toggle-btn 类 … 然后是 href 属性 … 属性的