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

导航条菜单的制作

江老实 Web前端工程师
难度初级
时长23分
学习人数
综合评分9.53
1004人评价 查看评价
9.8 内容实用
9.4 简洁易懂
9.4 逻辑清晰
  • margin值可以设置为负值,向相反方向运动。
    查看全部
  • *{paddin:0;margin:0;font-size:18px;} ul{list-style:none;}
    查看全部
  • text-indent(文本缩进 不会影响总体宽度)
    查看全部
  • 任务1:请补充完整代码,清除计时器 任务2:请补充完整代码,设定计时器 任务3:请补充完整代码,a标签的宽度 ?不会了怎么办 任务1对应代码:clearInterval 任务2对应代码:setInterval 任务3对应代码:offsetWidth
    查看全部
    0 采集 收起 来源:编程练习

    2016-01-20

  • 2级菜单 <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>
    查看全部
    0 采集 收起 来源:总结

    2018-03-22

  • <script> window.onload=function(){ var aLi=document.getElementsByTagName('li'); for(var i=0; i<aLi.length; i++){ aLi[i].onmouseover=function(){ //鼠标经过一级菜单,二级菜单动画下拉显示出来 var subNav=this.getElementsByTagName("ul")[0]; subNav.className=''; //alert(subNav.innerHTML); } //鼠标离开菜单,二级菜单动画收缩起来。 aLi[i].onmouseout=function(){ var subNav=this.getElementsByTagName("ul")[0]; subNav.className="subNav"; } } } </script>
    查看全部
    0 采集 收起 来源:编程挑战

    2018-03-22

  • 圆角背景导航
    查看全部
    0 采集 收起 来源:编程练习

    2016-01-20

  • 水平导航
    查看全部
    0 采集 收起 来源:编程练习

    2016-01-20

  • hhh1导航
    查看全部
    0 采集 收起 来源:编程练习

    2016-01-20

  • X轴 正右 负左<br> Y轴 正下 负上<br> 坐标原点就是DIV的左上角
    查看全部
    0 采集 收起 来源:编程练习

    2018-03-22

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

    2018-03-22

  • 所有浏览器都支持 background-position 属性。 注释:任何版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。 可能的值 值 描述 top left top center top right center left center center center right bottom left bottom center bottom right 如果您仅规定了一个关键词,那么第二个值将是"center"。 默认值:0% 0%。 x% y% 第一个值是水平位置,第二个值是垂直位置。 左上角是 0% 0%。右下角是 100% 100%。 如果您仅规定了一个值,另一个值将是 50%。 xpos ypos 第一个值是水平位置,第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。 如果您仅规定了一个值,另一个值将是50%。 您可以混合使用 % 和 position 值。
    查看全部
  • list-syle:none; 一般去除列表样式 text-decotation:none;去除下划线 text-indent;缩进 a:hover 伪类元素,用于鼠标移动到a标签时候的样式
    查看全部
  • 要定义a为块级元素。。。。
    查看全部
  • 对a标签进行设置,可以合理设置hover属性。。。
    查看全部

举报

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

微信扫码,参与3人拼团

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

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