css导航栏

来源：互联网发布：百度文库json转换器编辑：程序博客网时间：2024/05/07 03:03

几个导航栏也算对学过知识的回顾，总有新的收获，下面是学习过程中敲的代码：

 <!DOCTYPE HTML>  <html>  <head>      <title></title>      <meta charset="utf-8"/>      <style>       ul{        list-style-type: none;        width: 100px;    }    a{        display: block;     /*设为block修改其样式，而不是修改li标签*/        text-decoration:none;        background-color:#ccc;        height: 30px;        line-height: 30px;        width: 100px;        margin-bottom: 1px;        text-indent:20px;    }    li{    }    a:hover{        background-color:#f60;        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>

下面css代码使其水平导航：

ul{        list-style-type: none;            }    a{        display: block;/*设为block修改其样式，而不是修改li标签*/        text-decoration:none;        background-color:#ccc;        height: 30px;        line-height: 30px;        width: 100px;        margin-bottom: 1px;        text-align:center;    }    li{        float:left;    }    a:hover{        background-color:#f60;        color:#fff;     }

下面再次改进为伸缩效果：

ul{        list-style-type: none;        height:30px;        border-bottom:3px solid #f60;        margin:0 auto;        width: 800px;        padding-left: 200px;    }    a{        display: block;/*设为block修改其样式，而不是修改li标签*/        text-decoration:none;        background-color:#ccc;        height: 30px;        line-height: 30px;        width: 100px;        margin-bottom: 1px;        text-align:center;        border-radius:10px 10px 0 0;     }    li{        float:left;       width: 100px;        margin: 0 auto;    }    a:hover{        background-color:#f60;        color:#fff;         height:40px;        margin-top:-10px;        line-height: 40px;    }

改进后效果如下：

下面用js改进，实现鼠标放上去变宽效果：

 <!DOCTYPE HTML>  <html>  <head>      <title></title>      <meta charset="utf-8"/>      <style>       ul{        list-style-type: none;        height:30px;        border-bottom:3px solid #f60;        margin:0 auto;        width: 800px;        padding-left: 200px;    }    a{        display: block;/*设为block修改其样式，而不是修改li标签*/        text-decoration:none;        background-color:#ccc;        height: 30px;        line-height: 30px;        width: 100px;        margin-bottom: 1px;        text-align:center;        border-radius:10px 10px 0 0;     }    li{        float:left;       width: 100px;        margin: 0 auto;    }    a:hover{        background-color:#f60;        color:#fff;         height:40px;        margin-top:-10px;        line-height: 40px;    }    </style>      <script>    window.onload=function(){        var oa=document.getElementsByTagName('a');        for(var i=0;i<oa.length;i++)        {                        oa[i].onmouseover=function(){                var that=this;                that.time=setInterval(function(){                    that.style.width=that.offsetWidth+8+'px';                    if(that.offsetWidth>=120)                    {                        clearInterval(that.time);                    }                },30);            }            oa[i].onmouseout=function(){                var that=this;                that.time=setInterval(function(){                    that.style.width=that.offsetWidth-8+'px';                    if(that.offsetWidth<=120)                    {                        that.style=width='120px';                        clearInterval(that.time);                    }                },30);            }        }    }    </script></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>

效果：

0 0