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

导航条菜单的制作

江老实 Web前端工程师
难度初级
时长23分
学习人数
综合评分9.53
1004人评价 查看评价
9.8 内容实用
9.4 简洁易懂
9.4 逻辑清晰
  • 清除计时器:clearInterval 设定计时器:setInterval a标签的宽度:offsetWidth
    查看全部
    0 采集 收起 来源:编程练习

    2015-08-22

  • 清除计时器:clearInterval 设定计时器:setInterval a标签的宽度:offsetWidth
    查看全部
    0 采集 收起 来源:编程练习

    2015-08-22

  • 1.可以用jQuery或JavaScript产生动画 2.window.onload=function()//在Dom加载完后执行此函数 3. <script> window.onload=function(){ var A = document.getElementsByIagName("a"); for(i in A){ A[i].onmouseiver=function(){ clearInterval(this.time); var This = this; This.time=setInterval(function){//方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。 This.style.width=This.offsetWidth+8+'px'; if(This.offsetWidth>=160){ clearInterval(This.time); } },30} } </script>
    查看全部
  • jQuery实现:动画打开时,先把上一个动画清理掉(使用stop方法)。 $(function(){ $('a').hover( function(){ $(this).stop().animate({"width":"160px"}.200); } function(){ $(this).stop().animate({"width":"120px"}.200); } ) })
    查看全部
  • 清除计时器:clearInterval 设定计时器:setInterval a标签的宽度:offsetWidth
    查看全部
    0 采集 收起 来源:编程练习

    2015-08-22

  • 给li标签加上li{float:left}从而实现横向导航条!
    查看全部
    1 采集 收起 来源:编程练习

    2015-08-22

  • 通过设置<li>中的float属性能将垂直菜单转变成水平菜单!
    查看全部
    2 采集 收起 来源:练习题

    2018-03-22

  • 1.从重向的导航条→横向的导航条,给li标签加上左浮动li{float:left},在把ul上的宽去掉! 2.然后让它居中对齐 a{text-align:center} 3.删除文本缩进!
    查看全部
  • 任务1:把a标签定义成行内块:display:block; 任务2:文字缩进20px:text-indent:20px;
    查看全部
    1 采集 收起 来源:编程练习

    2015-08-22

  • 答案是 B 无序列表,<ul> 来制作“菜单导航条”,也就是无序列表。 <li></li> </ul>
    查看全部
    0 采集 收起 来源:练习题

    2018-03-22

  • 1.用无序列列表构建菜单 <ul> <li><a href="#">首页</a></li> <li><a href="#">新闻</a></li> <ul> ...... 2.在设置样式时,别忘清除默认样式和清除ul的样式ul{list-style:none},去掉a标签的下划线的代码是a{text-decoration:none} 3.如果用为文字前面增加像素,最好用缩进的方式来实现,{text-indent:xx px} 4.因为<a>标签是最里面的元素可以将a标签设置为块级元素,把li上的代码移到a标签上去,代码:{display:block},然后在为a添加样式!a:hover{……}
    查看全部
  • 1、用无序列表构建菜单; 2、垂直菜单转变为水平菜单:float:left; 3、在制作圆角菜单时,背景图片贴在<a>标签上; 4、在制作改变高度的伸缩菜单时,实现高度向上延伸的技巧:margin-top用负值; 5、用JS制作水平伸缩菜单时,“this”代表当前的<a>标签。
    查看全部
    0 采集 收起 来源:总结

    2018-03-22

  • border-bottom: 下边框
    查看全部
  • background:url(#),设置背景图片#为图片地址 background-position,改变背景图片位置,x轴和y轴 改造都是对a标签的改造。背景图也是。底部的线条是对ul进行加border。.on,a:hover是一样的显示状态,就把它们写在一起。应用了雪碧图的知识
    查看全部
  • 1. 为元素创建四个相同的圆角 (1) 这一步可选输入 -webkit-border-radius: r 这里的 r 是圆角的半径大小表示为长度带单位。 (2) 输入 border-radius: r 这里的 r 是圆角的半径大小 使用与第(1)步中相同的值。 这是该属性的标准短形式语法。 2. 为元素创建一个圆角 (1) 这一步可选输入 -webkit-border-top-left-radius: r 这里的 r 是左上方圆角的半径大小表示为长度带单位。 (2) 输 入 border-top-left-radius: r这里的 r 使用与第 (1) 步中相同的值。这是该属性的标准长形式语法。注意这些步骤仅演示了如何创建左上方圆角 此外 还可以单独创建其他方位的圆角 步骤如下。 创建右上方圆角用 top-right 替换第 (1) 步和第 (2) 步中的 top-left 。 创建右下方圆角用 bottom-right 替换第 (1) 步和第 (2) 步中的 top-left 。 创建左下方圆角用 bottom-left 替换第 (1) 步和第 (2) 步中的 top-left 。 3. 创建椭圆形圆角 (1) 这一步可选输入 -webkit-border-radius: x / y 其中 x 是圆角在水平方向上的半径大小 y 是圆角在垂直方向上的半径大小均表示为长度带单位。 (2) 输入 border-radius: x / y 其中 x 和y 跟第 (1) 步中的值相等。 4. 使用 border-radius 创建圆形 (1) 输入 -webkit-border-radius: r 这里的 r 是元素的半径大小带长度单位。要创建圆形可以使用短形式的语法 r 的值应该等于元素高度或宽度的一半。 (2) 输入 border-radius: r 这里的 r 是元素的半径大小带长度单位跟第 (1) 步中的 r 相等这是标准的无前缀语法。
    查看全部

举报

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

微信扫码,参与3人拼团

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

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