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

导航条菜单的制作

江老实 Web前端工程师
难度初级
时长23分
学习人数
综合评分9.53
1004人评价 查看评价
9.8 内容实用
9.4 简洁易懂
9.4 逻辑清晰
  • $(function(){ $('a').hover( function(){$(this).stop().animate( {"width":"160px"},200 );}, function(){ $(this).stop().animate({"width":"120px"},200);} ) window.onload=function(){ var aA=document.getElementsByTagName("a"); for(var i=0;i<aA.length;i++){ aA[i].onmouseover=function(){ clearInterval(this.time); this.time=setInterval(function(){ this.style.width=this.offsetWidth+8+"px"; if(this.offsetWidth>=160) clearInterval(this.time);},30) } aA[i].onmouseout=function(){ clearInterval(this.time); this.time=setInterval(function(){ this.style.width=this.offsetWidth-8+"px"; if(this.offsetWidth<=120){ this.style.width='120px';} clearInterval(this.time);},30) } }
    查看全部
  • 垂直菜单:height:30px;line-height:30px;text-indent:20px; 水平菜单:height:30px;line-height:30px;text-align:center;
    查看全部
    0 采集 收起 来源:编程练习

    2015-03-12

  • 文字缩进:text-indent:10px; 把对li标签的设置改为对a标签的设置
    查看全部
    0 采集 收起 来源:编程练习

    2015-03-12

  • <li>文字要垂直居中,要在<li>height属性=line-height
    查看全部
  • 编程挑战 小伙伴们,学习完《导航条菜单的制作》的相关内容,接下来练习一下吧!完成下面的任务,看一下你的成果哦! 要求: 1.鼠标经过一级菜单,二级菜单动画下拉显示出来; 2.鼠标离开菜单,二级菜单动画收缩起来。
    查看全部
    0 采集 收起 来源:编程挑战

    2015-03-10

  • 编程挑战 小伙伴们,学习完《导航条菜单的制作》的相关内容,接下来练习一下吧!完成下面的任务,看一下你的成果哦!
    查看全部
    0 采集 收起 来源:编程挑战

    2015-03-10

  • 1、JS实现:动画开始前先清除一下定时器,避免动画累加。 2、jQuery实现:动画打开时,先把上一个动画清理掉(使用stop方法)。 $(function(){ $('a').hover( function(){$(this).stop().animate({"width":"160px"}.200);} function(){$(this).stop().animate({"width":"120px"}.200);} )})
    查看全部
  • margin可以用负值,向相反方向移动
    查看全部
  • text-indent:10px; <文本缩进。不会影响盒子的宽度> padding-left:10px; (文字左移动,但是盒子宽度跟着增加)
    查看全部
  • 背景默认是显示图片的上半部分,利用鼠标放置在位置上面后图片向上提高三十个像素值来获取背景颜色。
    查看全部
    0 采集 收起 来源:编程练习

    2015-03-05

  • display:block 意为生成块级元素 text-indent 意为字母缩进
    查看全部
    0 采集 收起 来源:编程练习

    2015-03-05

  • text-indent:10px; <文本缩进。不会影响盒子的宽度> padding-left:10px; (文字左移动,但是盒子宽度跟着增加)
    查看全部
  • 将a标签设为block,这样就直接对a标签设置样式,而不是间接地通过li设置样式
    查看全部
  • 用text-indent替代padding-left,这样可以避免元素总宽度增加
    查看全部
  • margin的值是相对于父级包含块的哟,切记切记!
    查看全部
    0 采集 收起 来源:编程练习

    2015-03-02

举报

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

微信扫码,参与3人拼团

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

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