Pro024-从零开始HTML[#024]——5分钟- Navigation 导航

标签

#024_Lay_Navigation

    接着昨天的布局内容，今天这里会教大家如何在自己的网页里面创建一个漂亮（比白板漂亮一点的）、好用的（比白板好用一点点）的导航栏。

---

内容部分

    原来的 Nav 一栏写得十分简略而且代码不规范，这次我们重新将其补充完整。

导航列表

    使用一个 ul 元素，将4个导航部分构建完整。

---

样式部分

    剩下的内容需要在 css 部分进行加工。

样式加工

    在这一部分，我们新增了以下样式设置——

1、 font-family : sans-serif

    设置了在 body 元素下，所有文字内容的字体。

2、 ul a {}

    在这个部分，我们用 text-decoration： none 对 ul 元素下的 a 元素进行了样式进行了装饰，去掉了链接的下划线，并且用 color 属性对其重新定义了字体颜色为 #233333 色号。

3、 ul a:hover {}

    hover 是我们之前没学过的，它的用处正如其名，当浏览者将鼠标悬停在这个 ul 元素下的 a 元素之上时，就会触发另外一种样式，这里我们给这个 hover 悬停状态的 ul 元素下的 a 元素设置一个带下划线，而且同时还要改变颜色，达到一种闷骚的效果。

---

最终效果

效果图

    在导航栏里有四个链接，原本是黑色的、且不带下划线，当鼠标移上去之后，链接就会浮现出下划线，而且本身颜色变成灰蓝色。（截图软件原因鼠标凭空消失了）

    是不是很简单呢？那么请大家现在马上上手在上一节课的基础上进行加工咯！