"经典导航条制作教程，简单易学，鼠标hover特效，KwooJan带你实现！"

在前三节课中，我们学到了关于“内容块状元素和内联元素”的概念，以及XHTML CSS布局的核心概念“盒子模型”，还学习了一种页面布局中的方法“浮动”。本次课程将利用这三个概念来制作一款经典的导航条。这款导航条虽然看起来平凡无奇，但实际上所有的网上导航条都可以基于它进行修改。只要理解并掌握了本节课的内容，就能轻松应对以后遇到的任何导航条，非常简单！ 首先，我们将要创建一个容器，它的ID为“nav”，宽度为960px，高度为35px，位于页面水平正中，并且与浏览器顶部的距离是30px。这个容器将会放置我们的导航栏。HTML代码如下： ```html <div id="nav"></div> ``` 接下来，我们需要为这个容器添加样式。CSS代码如下： ```css #nav { width: 960px; height: 35px; position: absolute; top: 30px; left: 50%; margin-left: -480px; /* 将容器水平居中 */ background-color: #fff; /* 设置容器背景颜色为白色 */ text-align: center; /* 文字居中 */ } ``` 我们要实现的效果是，当鼠标移动到导航条上时，背景变成黑色，字体颜色变成白色。这个效果也是相当简单的，只需稍作调整即可实现。接下来的步骤将教你如何实现这个效果。 首先，我们需要在HTML中添加导航条上的链接。HTML代码如下： ```html <div id="nav"> <a href="#">首页</a> <a href="#">产品</a> <a href="#">关于我们</a> <a href="#">联系我们</a> </div> ``` 然后，在CSS中为链接设置样式，包括鼠标移动到链接上时的效果。CSS代码如下： ```css #nav a { display: inline-block; line-height: 35px; padding: 0 20px; color: #000; /* 设置链接文字颜色为黑色 */ text-decoration: none; transition: all 0.3s; /* 添加过渡动画效果 */ } #nav a:hover { background-color: #000; /* 设置鼠标移上去时背景颜色为黑色 */ color: #fff; /* 设置鼠标移上去时文字颜色为白色 */ } ``` 现在，我们的导航条就完成了！当鼠标移动到链接上时，背景颜色会变成黑色，并且文字颜色会变成白色。这个效果非常简单，只需要几行HTML和CSS代码就可以实现。希望你能通过本节课的学习，更加熟练地掌握页面布局的方法，并且能够运用这些知识来制作更加复杂和精美的导航条。记住，只要有了扎实的理论基础和不断的实践，再复杂的导航条也不在话下，轻松搞定！