用css+js实现自动伸缩导航栏
需要达到的效果:
- 默认首页选中样式
- 设置鼠标滑过效果:颜色变化(#f60),宽度变化,字体变化
所涉及的知识点:
- 布局:float
- css: 元素状态切换(display),盒模型(margin,padding),圆角边框(border-radius),可见宽度(offsetWidth);
- 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;}
设置骨架
- 通过将/设置成块状标签,即可达到给/设置宽高的目的;
- 通过float:left使导航栏从纵向排列变成横向排列;
- 通过将line-height属性设置的跟height一样,实现导航栏文字垂直居中;
- 通过text-aligin将导航栏文本水平居中。