各种导航条

来源：互联网发布：大数据时代企业管理编辑：程序博客网时间：2024/05/29 02:49

<!-- 导航菜单---垂直菜单 --><!DOCTYPE html><html><head>    <meta charset="utf-8"></meta>    <title>垂直菜单</title>    <style type="text/css">    body{margin:0; padding: 0;font-size: 14px}    ul{list-style: none;width: 100px}/*把条目前面的点清除掉*/    a{text-decoration: none;display: block;width: 100px;line-height: 30px;height: 30px;background-color: #9C9595;margin-bottom: 1px;text-indent: 10px;}    a:hover{background-color: #EAAB39;color: #fff}    </style></head><body><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>></body></html>![这里写图片描述](http://img.blog.csdn.net/20160713214346858)

<!-- 导航菜单---水平菜单 --><!DOCTYPE html><html><head>    <meta charset="utf-8"></meta>    <title>水平菜单</title>    <style type="text/css">    body{margin:0; padding: 0;font-size: 14px}    ul{list-style: none;}/*把条目前面的点清除掉*/    li{float: left;}    a{text-decoration: none;display: block;width: 100px;line-height: 30px;height: 30px;background-color: #9C9595;margin-bottom: 1px;text-align:center}    a:hover{background-color: #EAAB39;color: #fff}    </style></head><body><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></body></html>![这里写图片描述](http://img.blog.csdn.net/20160713214420155)

<!-- 导航菜单---伸缩菜单(改变高度) --><!DOCTYPE html><html><head>    <meta charset="utf-8"></meta>    <title>伸缩菜单</title>    <style type="text/css">    body{margin:0; padding: 0;font-size: 14px}    ul{list-style: none;height:50px;border-bottom: 5px solid #f60;padding-left: 30px}/*把条目前面的点清除掉*/    li{float: left;margin-top: 20px}    a{text-decoration: none;display: block;width: 120px;line-height: 30px;height: 30px;background-color: #9C9595;margin-bottom: 1px;text-align:center;}    .on,a:hover{color: #fff;background-color: #f60;height: 40px;margin-top: -10px;line-height: 40px}    </style></head><body><ul>    <li><a class="on" href="#">首    页</a></li>    <li><a href="#">新闻快讯</a></li>    <li><a href="#">产品展示</a></li>    <li><a href="#">售后服务</a></li>    <li><a href="#">联系我们</a></li></ul></body></html>![这里写图片描述](http://img.blog.csdn.net/20160713214434625)

<!-- 导航菜单---圆角菜单 --><!DOCTYPE html><html><head>    <meta charset="utf-8"></meta>    <title>圆角菜单</title>    <style type="text/css">    body{margin:0; padding: 0;font-size: 14px}    ul{list-style: none;height:50px;border-bottom: 5px solid #f60;padding-left: 30px}/*把条目前面的点清除掉*/    li{float: left;margin-top: 20px}    a{text-decoration: none;display: block;width: 120px;line-height: 30px;height: 30px;background-color: #9C9595;margin-bottom: 1px;text-align:center;background:url(btnBg.png);}    .on,a:hover{color: #fff;background-position: 0 -30px}    </style></head><body><ul>    <li><a class="on" href="#">首    页</a></li>    <li><a href="#">新闻快讯</a></li>    <li><a href="#">产品展示</a></li>    <li><a href="#">售后服务</a></li>    <li><a href="#">联系我们</a></li></ul></body></html>![这里写图片描述](http://img.blog.csdn.net/20160713214446139)

<!-- 导航菜单---伸缩菜单(水平方向) --><!DOCTYPE html><html><head>    <meta charset="utf-8"></meta>    <title>伸缩菜单</title><style type="text/css">    body{margin:0; padding: 0;font-size: 14px}    ul{list-style: none;height:50px;border-bottom: 5px solid #f60;padding-left: 30px}/*把条目前面的点清除掉*/    li{float: left;margin-top: 20px}    a{text-decoration: none;display: block;width: 120px;line-height: 30px;height: 30px;background-color: #9C9595;margin-bottom: 1px;text-align:center;}    .on,a:hover{color: #fff;background-color: #f60;height: 30px;line-height: 30px}</style><script type="text/javascript">    window.onload=function(){        var aA=document.getElementsByTagName('a');        for (var i=0; i <=aA.length; i++) {            aA[i].onmouseover=function(){                 clearInterval(this.time);                var This=this;                This.time=setInterval(function(){                    This.style.width=This.offsetWidth+8+"px";                    if(This.offsetWidth>=160){                        clearInterval(This.time);                    }                },30);            };            aA[i].onmouseout=function(){                     clearInterval(this.time);                var This=this;                This.time=setInterval(function(){                    This.style.width=This.offsetWidth-8+"px";                    if(This.offsetWidth<=120){                        This.style.width="120px";                        clearInterval(This.time);                    }                },30);            };        }    };</script></head><body><ul>    <li><a class="on" href="#">首    页</a></li>    <li><a href="#">新闻快讯</a></li>    <li><a href="#">产品展示</a></li>    <li><a href="#">售后服务</a></li>    <li><a href="#">联系我们</a></li></ul></body></html>![这里写图片描述](http://img.blog.csdn.net/20160713214500454)

0 0