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

导航条菜单的制作

江老实 Web前端工程师
难度初级
时长23分
学习人数
综合评分9.53
1004人评价 查看评价
9.8 内容实用
9.4 简洁易懂
9.4 逻辑清晰
  • 一般都使用 “ul\li” 来制作“菜单导航条”,也就是无序列表。
    查看全部
    2 采集 收起 来源:练习题

    2015-08-20

  • eight: 30px;line-height: 30px;可使文字垂直居中 text-indent:文字缩进,可以使文字向右移动 ul的list-style设为none,能去掉前面的默认小圆点 text-decrotion设为none,可以清除文本下划线 ul li a{}因为a标签是最内部的元素 所以对a标签设置就可以了 又因为a为内联元素不方便设置所以要把a设置为块级元素:ul li a{display:block;} text-indent,文本缩进属性 a:hover{background-color ; color文字颜色}
    查看全部
  • 清除计时器:clearInterval 设定计时器:setInterval a标签的宽度:offsetWidth
    查看全部
    0 采集 收起 来源:编程练习

    2015-08-19

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

    2018-03-22

  • <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script> <script type="text/javascript"> $(document).ready(function() { $(".nav li").hover(function() { $(this).children('.subNav').stop().animate({height:'200px'}, 100); }, function() { $(this).children('.subNav').stop().animate({height:'0px'}, 100); }); }); </script>
    查看全部
    0 采集 收起 来源:编程挑战

    2018-03-22

  • margin-top:10px;
    查看全部
    0 采集 收起 来源:编程练习

    2015-08-18

  • a{text-decoration:none;}把链接默认的下划线去掉 ul{list-style:none;}把列表默认的圆点去掉 background-position:0 30px;将背景图片沿y轴向上移动30px显示
    查看全部
    0 采集 收起 来源:编程练习

    2015-08-18

  • 文本水平居中对齐:text-align:center;
    查看全部
    0 采集 收起 来源:编程练习

    2015-08-18

  • 文字缩进:text-indent: px;
    查看全部
    0 采集 收起 来源:编程练习

    2015-08-18

  • 1、用无序列表构建菜单; 2、垂直菜单转变为水平菜单:float:left; 3、在制作圆角菜单时,背景图片贴在<a>标签上; 4、在制作改变高度的伸缩菜单时,实现高度向上延伸的技巧:margin-top用负值; 5、用JS制作水平伸缩菜单时,“this”代表当前的<a>标签。
    查看全部
    0 采集 收起 来源:总结

    2018-03-22

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

    2018-03-22

  • height:30px;line-height:30px;可以使文字垂直居中 text-indent;向右缩进 ul的list-style设为none,能去掉前面的默认小圆点 a的text-decrotion设为none,能去掉链接的下划线,在导航栏中经常用 display:block使A标签变成块级元素 a:hover{background-color ; color文字颜色}
    查看全部
  • background-position:x y; x,y是偏移量: 第一个值(x)是水平位置,第二个值(y)是垂直位置。其值可为正负。 实测y值为30px,或为-30px,都可以达到效果。
    查看全部
    0 采集 收起 来源:编程练习

    2015-08-17

  • li浮动后ul的变化: 对li浮动后,父元素ul会紧抱其浮动的子元素,宽度由li的宽度决定。因此,水平导航的ul就可看作行内元素。此时ul不会独占一行。​
    查看全部
  • 背景颜色在content和padding上显示,所以加上padding-left,所以li的看起来宽度就是110px了。
    查看全部

举报

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

微信扫码,参与3人拼团

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

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