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

导航条菜单的制作

江老实 Web前端工程师
难度初级
时长23分
学习人数
综合评分9.53
1004人评价 查看评价
9.8 内容实用
9.4 简洁易懂
9.4 逻辑清晰
  • background-position:x,y;右边跟下边是正方向
    查看全部
    0 采集 收起 来源:编程练习

    2015-07-05

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

    2018-03-22

  • <style> *{margin:0;padding:0;font-size:14px;} ul { list-style: none; border-bottom: 5px solid #F60; padding-left: 30px; height: 50px; overflow: auto; } li{float:left;margin-top:20px;} a { text-decoration: none; display: block; height: 30px; line-height: 30px; width: 100px; background-color: #eee; text-align: center; margin-bottom: 1px; border-radius: 5px 5px 0 0; } .on,a:hover{color:#fff;background-position:0 -30px;background:#F60;} </style> <ul> <li><a href="#" class="on">首 页</a></li> <li><a href="#">新闻快讯</a></li> <li><a href="#">产品展示</a></li> <li><a href="#">售后服务</a></li> <li><a href="#">联系我们</a></li> </ul>
    查看全部
  • <style> *{margin:0;padding:0;font-size:14px;} ul{list-style:none;} li{float:left;} a { text-decoration: none; display: block; height: 30px; line-height: 30px; width: 100px; background-color: #eee; text-align: center; margin-bottom: 1px; } a:hover{ background:yellow; } </style> <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>
    查看全部
  • <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> <style> *{margin:0;padding:0;font-size:14px;} ul{list-style:none;width:100px;} a { text-decoration: none; display: block; height: 30px; line-height: 30px; width: 100px; background-color: #eee; text-align: center; margin-bottom: 1px; padding-left: 10px; } a:hover{ background:yellow; } </style>
    查看全部
  • 哈哈!不会看上面改一个地方就好了!
    查看全部
    0 采集 收起 来源:编程挑战

    2015-07-04

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

    2018-03-22

  • text-indent//缩进 用text-indent替换padding-left是为了防止菜单长度增加。
    查看全部
  • 通过设置节点的高度来实现下拉收缩
    查看全部
    0 采集 收起 来源:编程挑战

    2015-07-03

  • 1.margin 为负值时变动,表现效果为向反方向移动。 2.height 与 line-height 赋值相同的效果表现为垂直居中。
    查看全部
  • js动画效果伸缩导航菜单 清除计时器:clearInterval 设定计时器:setInterval a标签的宽度:offsetWidth
    查看全部
    0 采集 收起 来源:编程练习

    2015-07-02

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

    2018-03-22

  • background-position:x y; x,y是偏移量。 背景图片沿y轴向上移动30px(水平方向不动) backkground-position:0 -30px;
    查看全部
    0 采集 收起 来源:编程练习

    2015-07-02

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

    2018-03-22

  • float:left
    查看全部
    0 采集 收起 来源:编程练习

    2015-07-02

举报

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

微信扫码,参与3人拼团

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

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