css+js实现自动伸缩导航栏

用css+js实现自动伸缩导航栏

需要达到的效果：

1. 默认首页选中样式
2. 设置鼠标滑过效果：颜色变化(#f60),宽度变化，字体变化

所涉及的知识点：

1. 布局：float
2. css: 元素状态切换(display),盒模型(margin,padding),圆角边框(border-radius),可见宽度(offsetWidth);
3. JavaScript:匿名类，for循环,通过标签获得元素(getElementsByTagName),方法自动间隔运行(setInterval/clearInterval)

基本架构

无序列表:<ul>，<li>,是与导航栏语义比较贴切的标签，然后将<a>标签放到<li>内部即可实现导航栏html部分。

<ul class="nav" >
    <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>

样式修改

取消默认样式

把浏览器默认的盒模型值，列表样式以及链接样式的默认样式取消，并且把字体颜色改成黑色。

*{margin: 0;padding: 0;
          font-size: 14px;}
    li{list-style: none;}
    a{text-decoration: none;
           color: #000;}

设置骨架

1. 通过将/设置成块状标签，即可达到给/设置宽高的目的；
2. 通过float：left使导航栏从纵向排列变成横向排列；
3. 通过将line-height属性设置的跟height一样，实现导航栏文字垂直居中；
4. 通过text-aligin将导航栏文本水平居中。