css导航栏

最新推荐文章于 2023-09-20 08:50:45 发布

我的前端学习笔记

最新推荐文章于 2023-09-20 08:50:45 发布

阅读量431

点赞数

分类专栏：技术文章标签：导航栏

本文链接：https://blog.csdn.net/u012181244/article/details/41314335

版权

技术专栏收录该内容

39 篇文章 0 订阅

订阅专栏

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

 <!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.οnlοad=function(){
        var oa=document.getElementsByTagName('a');
        for(var i=0;i<oa.length;i++)
        {
            
            oa[i].οnmοuseοver=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].οnmοuseοut=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>

效果：