html编程开发——网页导航

html编程开发——网页导航。学了很久的前端，但感觉都是模模糊糊，很多东西都是在尝试中或者拼凑中完成，现在想静下心慢慢学些东西，就从最基础的开始吧。
首先是网页的导航，每个网页都会有导航，导航的HTML标签一般用无序列表ul加li书写，在HTML5中用nav标签包含，如下：

<nav>
<ul>
        <li><a href="#">首    页</a></li>
        <li><a href="#">产品介绍</a></li>
        <li><a href="#">详细功能</a></li>
        <li><a href="#">提供服务</a></li>
        <li><a href="#">联系我们</a></li>
    </ul>
</nav>

垂直导航的制作：就仅需要设置nav或者ul的宽，说明整个导航的宽度，对ul设置list-style：none；去除无序列表前面的点，如果想导航居中，对li元素设置text-align=center；然后将a元素设置为块状元素，清除导航下划线，设置行高line-hight和hight的值为相同，可以让a元素上下居中。设置margin让各个元素分开。代码如下：

*{
            padding: 0;
            margin: 0;
            font-size: 14px;
        }
        ul{
            list-style: none;
            width: 100px;

        }
        ul li{
            text-align: center;
        }
        a{
            display: block;
            text-decoration: none;
            width: 100px;
            margin-bottom: 10px; 
            background: #ccc;
            height: 30px;
            line-height: 30px;
        }
        a:hover{
            background-color: #f60;
            color: #fff;
        }

一个简单的垂直导航就做好了，如果想要有边框阴影效果，让导航更美观，可以继续添加属性。
水平导航：在垂直导航的基础之上，将ul元素的width属性去除，对li进行坐浮动，就可以得到水平的导航了。