为了账号安全，请及时绑定邮箱和手机立即绑定
首页 免费课 导航条菜单的制作 笔记

导航条菜单的制作

江老实 Web前端工程师
难度初级
时长23分
学习人数
综合评分9.53
1004人评价 查看评价
9.8 内容实用
9.4 简洁易懂
9.4 逻辑清晰
最热 最新
  • qq_花草组合_0 
    一个圆角背景的导航栏菜单制作


    查看全部
    0 采集 收起 来源：圆角菜单的制作

    2018-11-30

  • Ap10043知行合一

    不懂·····

    查看全部
    1 采集 收起 来源：圆角菜单的制作

    2018-11-07

  • 慕妹7474039

    制作伸缩菜单——改变高度

    在鼠标悬停与点击时设定，margin-top: -10px;  line-height: 10px; 可以使菜单（包括文字）向上变高10px。





    查看全部
    0 采集 收起 来源：伸缩菜单的制作——改变高度

    2018-10-31

  • 慕妹7474039

    背景图片沿y轴向上移动30px（水平方向不动）


    background-position:0 -30px

    查看全部
    0 采集 收起 来源：编程练习

    2018-10-31

  • 慕妹7474039

    如果要给水平菜单增加整体背景，需要对（宽高）进行CSS设置？

        菜单<li>浮动后，<li>脱离文档流，导致<ul>将失去高度和宽度；如果需要对<ul>进行整体背景设置，首先要给<ul>定义宽、高。

    查看全部
    0 采集 收起 来源：练习题

    2018-10-31

  • 慕妹7474039

    将垂直导航条菜单改为水平时，用float:left;

    并且删去 文本缩进，使用text-align:center 使文字相对于父容器li居中显示。

    查看全部
    0 采集 收起 来源：编程练习

    2018-10-31

  • 慕妹7474039

          通常用 无序列表<ul><li><a href="#"></a></li></ul>来制作（表单）导航条，将a设置成块级元素display:block;就可以设置宽度、高度和其他了。

          要想导航条里的文字（链接）居中显示，一般不用padding-left: 10px;这样设置会自动增加了盒子宽度；而是使用 文字缩进 text-indent:10px;

    查看全部
    0 采集 收起 来源：编程练习

    2018-10-31

  • 慕斯1123771

    background-position

    背景位置

    查看全部
    0 采集 收起 来源：编程练习

    2018-10-17

  • MuAmi

    css实现多好，现在又不是讲js的课

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>导航菜单</title>

    <style type="text/css">

    *{margin:0; padding:0; font-size:14px;}

    ul{ list-style:none;}

    a{color:#333;text-decoration:none}

    .nav li{ float:left;}

    .nav li a{ display:block; text-align: center; height:30px; line-height:30px; width:100px; background-color:#efefef; margin-bottom:1px;transition: width 1s;}

    .nav li a:hover{ background-color:#F60; color:#fff;width: 140px;transition: width 1s;}

    </style>


    </head>

    <body>


    <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>


    </body>

    </html>


    查看全部
    0 采集 收起 来源：伸缩菜单的制作——水平方向

    2018-09-28

  • 慕移动0269542
    记住第五节，用的是js
    查看全部
    0 采集 收起 来源：伸缩菜单的制作——水平方向

    2018-09-21

  • 大卫同学

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>动画菜单</title>

    <style type="text/css">

    * { margin: 0; padding: 0; font-size: 14px; }

    a { color: #333; text-decoration: none }

    ul{ list-style: none; }

    .nav {height: 30px; border-bottom: 5px solid #F60; margin-left:50px; width:600px;}

    .nav li { float: left; position:relative; height:30px; width:120px }

    .nav li a { display: block; height: 30px; text-align: center; line-height: 30px; width:120px; background: #efefef; margin-left: 1px; }

    .subNav{ position:absolute; top:30px; left:0; width:120px; height:0; overflow:hidden}

    .subNav li a{ background:#ddd }

    .subNav li a:hover{ background:#efefef}

    </style>

    <script>

    window.onload=function(){

        var aLi=document.getElementsByTagName('li');

    for(var i=0; i<aLi.length; i++){

    aLi[i].onmouseover=function(){

                //鼠标经过一级菜单，二级菜单动画下拉显示出来


    var oSubNav=this.getElementsByTagName('ul')[0];


    if(oSubNav){


        var This=oSubNav;


        clearInterval(This.time);


        This.time=setInterval(function(){


            This.style.height=This.offsetHeight+16+"px";


            if(This.offsetHeight>=120)


            {


                clearInterval(This.time);


            }


        },30)


    }}


            //鼠标离开菜单，二级菜单动画收缩起来。


    aLi[i].onmouseout=function(){


    var osubNav=this.getElementsByTagName('ul')[0];


                if(osubNav){


                    var This=osubNav;


                    clearInterval(This.time);


                    This.time=setInterval(function(){


                        This.style.height=This.offsetHeight-16+"px";


                        if(This.offsetHeight<=0){


                            clearInterval(This.time)


                        }},30)


                    }


                }


              


    }


    }


    </script>



    </script>

    </head>

    <body>

    <ul class="nav">

        <li><a href="#">一级菜单</a>

        <ul class="subNav">

            <li><a href="#">二级菜单</a></li>

                <li><a href="#">二级菜单</a></li>

                <li><a href="#">二级菜单</a></li>

                <li><a href="#">二级菜单</a></li>

            </ul>

        </li>

        <li><a href="#">一级菜单</a>

        <ul class="subNav">

            <li><a href="#">二级菜单</a></li>

                <li><a href="#">二级菜单</a></li>

                <li><a href="#">二级菜单</a></li>

                <li><a href="#">二级菜单</a></li>

            </ul>

        </li>

        <li><a href="#">一级菜单</a></li>

        <li><a href="#">一级菜单</a></li>

        <li><a href="#">一级菜单</a></li>

    </ul>

    </body>

    </html>


    查看全部
    0 采集 收起 来源：编程挑战

    2018-09-19

  • 大卫同学

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>导航菜单</title>

    <style type="text/css">

    *{margin:0; padding:0; font-size:14px;}

    a{color:#333;text-decoration:none}

    ul{list-style:none; height:50px; border-bottom:5px solid #F60; padding-left:30px;}

    ul li{float:left; margin-top:20px;}

    a{display:block;height:30px;text-align:center; line-height:30px; width:120px; background-color:#ccc;}

    a.on, a:hover{ color:#fff;background-color:#F60;height:40px; line-height:40px;  margin-top:-10px;}

    </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>


    查看全部
    0 采集 收起 来源：编程练习

    2018-09-19

  • 大卫同学

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>导航菜单</title>

    <style type="text/css">

    *{margin:0; padding:0; font-size:14px;}

    a{color:#333;text-decoration:none}

    .nav{list-style:none; height:30px; border-bottom:10px solid #F60; margin-top:20px; padding-left:50px;}

    .nav li{float:left}

    .nav li a{display:block; height:30px;text-align:center; line-height:30px; width:120px; background:url(http://img1.sycdn.imooc.com//53846438000168f901200060.jpg); margin-left:1px;}

    .nav li a.on, .nav li a:hover{ background-position:0 -30px; color:#fff;}

    </style>


    </head>

    <body>


    <ul class="nav">

        <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>


    查看全部
    0 采集 收起 来源：编程练习

    2018-09-18

  • 大卫同学

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>导航菜单</title>

    <style type="text/css">

    *{margin:0; padding:0; font-size:14px;}

    ul{ list-style:none;}

    a{color:#333;text-decoration:none}

    .nav li{ float:left;}

    .nav li a{ display:block; text-align:center; height:30px; line-height:30px; width:100px; background-color:#efefef; margin-bottom:1px;}

    .nav li a:hover{ background-color:#F60; color:#fff}

    </style>


    </head>

    <body>


    <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>


    </body>

    </html>


    查看全部
    0 采集 收起 来源：编程练习

    2018-09-18

  • Honey汐瑶
    background-position 用法: 1、background-position：0 0；等于background-position:left top；（左上角） 2、background-position：100% 100%；等于background-position:right bottom；（右下角） 3、background-position：-70px -40px；(以左上角为0 0点坐标，向左偏移70px,向上偏移40px) 4、background-position：70px 40px；(以左上角为0 0点坐标，向右偏移70px,向下偏移40px) 5、background-position：0 -30px;（以左上角为0 0点坐标，水平方向不动,向上偏移30px） 6、background-position：50% 50%；等于background-position：center center；（居中显示）
    查看全部
    1 采集 收起 来源：编程练习

    2018-09-12

首页上一页1234567下一页尾页

举报

0/150
提交
取消
该课程已下架
课程须知
1.熟悉html知识，尤其对<ul>和<a>比较熟悉； 2.对css样式比较了解； 3.掌握JavaScript和jQuery基础知识。
老师告诉你能学到什么？
轻松制作出各种形式的网站导航条菜单

微信扫码，参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示：

您好，此课程属于迁移课程，您已购买该课程，无需重复购买，感谢您对慕课网的支持！

查看已购买的课程