简易导航栏

  本节课主要内容是创建一个没有下拉菜单的简易导航栏，复习巩固前面的知识。

创建内容

  在一系列的超链接a标签外面嵌套一层nav标签、一层div标签。a标签是导航栏必须的标签，nav和div标签都是为了辅助布局，nav和div都是块元素没什么大的区别，主要区别在于 nav是HTML5新的标准，可以当成布局常使用的语义化div，标签nav是英文导航navigation的前三个字母缩写，nav可以用来包括一个导航栏，类似前面讲过的article标签，可以替代div 标签包裹一篇文章所有的元素。

<nav>
    <div>
        <a href="http://www.yanhuangxueyuan.com/" target="_blank">首页 </a>
        <a href="http://www.yanhuangxueyuan.com/WebGL_course.html" target="_blank">WebGL教程</a>
        <a href="http://www.yanhuangxueyuan.com/Three.js_course.html" target="_blank">Three.js教程</a>
        <a href="http://www.yanhuangxueyuan.com/work.html" target="_blank">WebGL工作</a>
        <a href="http://www.yanhuangxueyuan.com/links.html" target="_blank">外链资源</a>
    </div>
</nav>

添加样式

  因为元素较少页面简单，style定义的样式全部通过元素名的方式实现，不过实际工程中一般多使用class。 具体的内容可以看代码，只有两点要提醒，一方面是行内元素没有margin属性，另一方面是块元素没有设置宽度，左右方向上的居中是不能实现， 这一点很容易理解，如果你不定义宽度，那么浏览器也不知道一个元素的宽度是多少，仅仅知道浏览器宽度也没有用。下面的div距离左侧的距离可以理解为 窗口距离减去div元素的width属性值然后除以2。

 <style>
    body{
        margin: 0px;/*设置浏览器body的外边距为0，使body占满界面*/
    }
    a{
        text-decoration:none;/*去掉超链接下划线*/
        font-size: 16px;
        color: #cccccc;
        display: inline-block;/*超链接由行内元素更改为行内块元素，才具有margin属性*/
        margin-top: 12px;
        font-family: 宋体;
    }
    a:hover{
        color: #ffffff;/*鼠标移动到超链接位置字体颜色由cccccc变为ffffff*/
    }
    div{
        width: 500px;/*设置宽度，margin的auto居中才能起作用*/
        height: 45px;
        margin: auto;
        background-color: #333333;
    }
    nav{
        background-color: #333333;
    }
</style>