为了账号安全,请及时绑定邮箱和手机立即绑定

导航条菜单的制作

江老实 Web前端工程师
难度初级
时长23分
学习人数
综合评分9.53
1004人评价 查看评价
9.8 内容实用
9.4 简洁易懂
9.4 逻辑清晰
  • text-indent 是文本缩进

    查看全部
  • onmouseover , 鼠标移过 ; <br>
    onmouseout , 鼠标离开 ;<br>
    setIntervel , 不停地调用函数 ; <br>
    clearInterval , 取消 setInterval 函数的运行 ; <br>


    查看全部
  • 答案是 B 无序列表,<ul> 来制作“菜单导航条”,也就是无序列表

    答案是 B 无序列表,<ul> 来制作“菜单导航条”,也就是无序列表


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

    2018-05-17

  • <!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{ 【任务1】}
    .nav li a{ display:block; text-indent:20px; 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-05-17

  • <!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>
    查看全部
    0 采集 收起 来源:编程练习

    2018-05-17

  • 用图片制作圆角菜单是在原来CSS3不流行的时候,为了IE系列,不得不用图片。
    查看全部
  • 圆角菜单的制作: 通过设置背景,改变外观样式,通过a:hover,可以为菜单增加交互效果

    查看全部
  • 圆角css代码:border-radius:4px 4px 3px 3px

    查看全部
  • 横向菜单与圆角菜单的却别是:为ul增加一个 装饰线 border-bottom、为a标签添加圆角背景,宽与高相适应、有一个默认的选中状态,所以要为a标签加上一个class"on" 在为它的样式添加上一个on,最后一动它的位置(y,x)
    查看全部
  • 圆角菜单的制作,通过设置背景,改变外观样式。<br>
    通过a:hover,可以为菜单增加交互效果。<br>


    查看全部
  • float:left可以将竖直菜单变成水平

    text-indent:30px//缩进

    text-align:center//居中


    查看全部
  • <style>
    body{margin:0;padding:0;}//内容清除
    </style>


    查看全部
  • 基本的样式清除:  *{margin:0;padding:0}
    无序列表圆点去除: ul{list-style:none}
    下划线去除:   a{text-decoration:none}
    文本缩进标签 text-indent 不会影响总体宽度(padding会)
    需要将a标签设置为块元素,才能设高宽、hover效果   代码:a{display:block}
    hover格式   a:hover{}

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

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

    2018-05-08

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

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

    2018-05-07

举报

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

微信扫码,参与3人拼团

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

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