现在网页上的导航菜单的样式是来自 Bootstrap 架构里的设计 ，如果想把我们的设计加到这个导航菜单上，我们需要覆盖原有的设计的样式。如果你用的是 chrome 浏览器打开的这张网页，右键点击想要查看的地方，然后选择审查元素 ...

你会发现，导航菜单上的样式大部分都是 .navbar-inner 这个类定义的 ...

勾选或取消勾选 .navbar-inner 类里的样式，你可以看到应用这行样式之前和之后的样子 ...

回到网页的代码模式 ... 在这里我们去掉带有 .navbar-nner 类的 <div> 标签 ...

同时也要去掉跟它匹配的 </div> 标签 ... 不然页面的布局会出现问题 ...

下面我们再处理一下激活菜单项的样式 ...

右键点击激活菜单，选择 审查元素 ...

.active

当前选中的是 .active 类元素下面的 <a> 标签，在右边你可以看到应用在这个 <a> 标签上的样式，你可以看到是来自 bootstrap.css 这个样式表里的第 3580 行 ....

点击这个样式的出处，可以打开这个样式表，并显示这段样式 ...

下面我们复制一下这段样式 ... 然后打开我们为网页定制的样式表 .... style.css

把复制的样式代码粘贴到这里 ....

下面我们可以重新定义这段样式，我们把 box-shadow 属性的值都设置为 none; ... box-shadow 是为元素添加阴影的样式 ...

再修改一下 background-color ... 这是元素的背景颜色， #e5e5e5 是背景颜色的值，是一种浅灰色。这里我们改成跟背景一样的白色 ...

白色的值，可以使用 #fff ...

根据我们的设计，我们给激活菜单项的下边添加一个绿色的边框 ...

回到我们的设计图样... 先放大激活菜单项这块的设计 ... 然后点击工具栏上的前景色 ... 这样会打开拾色器 ... 用鼠标点击这个绿色线 ... 在拾色器上会显示这个地方的颜色的值 ... 复制一下 # 号后面的这个颜色的值 ...

再回到网页的样式表 ... 在这个激活菜单项的样式块里，输入 border-bottom: 3px solid #009571 ...

border-bottom 表示我们要为元素添加下边的边线，3px 是边线的高度 ... solid 表示是实线 ，后面的 #009571 是边线的颜色值 ...

#navigation

下面我们要为导航菜单的下面添加一条贯穿整个页面的灰色实线 ... 首先我们要选择添加这个样式的元素 ...

回到网页的代码模式 ... 这里我们使用了一个带有 .container 类的 <div> 标签包装了我们的导航菜单... 某部分内容的导航菜单，我们可以使用 <nav> 标签 ... 我们这里的导航菜单是整个页面的导航，，所以可以用一组 <nav> 标签包装导航菜单的内容 ...

在这个 <nav> 标签里，我们再定义一个 id ，输入 id="navigation" ， 这样我们可以使用这个 id 做为样式的选择器，来给导航菜单添加样式 ...

回到网页的样式表 ... 输入 .... 然后输入边线的颜色值 ... 回到网页的图样 ... 用吸管工具，点击边线 ... 这个边线的颜色是 d7d7d7 ...

回到样式表 ... 输入 d7d7d7

#navigation｛
border-bottom:1px solid #d7d7d7
｝

这样我们就完成了导航部分的设计！