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

导航条菜单的制作

江老实 Web前端工程师
难度初级
时长23分
学习人数
综合评分9.53
1004人评价 查看评价
9.8 内容实用
9.4 简洁易懂
9.4 逻辑清晰
  • 菜单<li>浮动后,<li>脱离文档流,导致<ul>将失去高度和宽度;

    如果需要对<ul>进行整体背景设置,首先要给<ul>定义宽、高。

    查看全部
    0 采集 收起 来源:练习题

    2018-03-23

  • 5-1伸缩菜单的制作
    查看全部
  • 1.offsetWidth属性可以返回对象的padding+border+width属性值之和,style.width返回值就是定义的width属性值。 2.offsetWidth属性仅是可读属性,而style.width是可读写的。 3.offsetWidth属性返回值是整数,而style.width的返回值是字符串。 4.style.width仅能返回以style方式定义的内部样式表的width属性值。
    查看全部
    0 采集 收起 来源:编程练习

    2018-03-12

  • 1.如果要给水平菜单增加整体背景,需要对()进行哪些CSS设置?
    查看全部
    0 采集 收起 来源:练习题

    2018-03-06

  • jq部分: $(function(){ $("a").hover(function(){ $(this).stop().animate({"width":"160px"},200); },function(){ $(this).stop().animate({"width":"120px"},200); }) })
    查看全部
  • js实现简单动画
    查看全部
  • height与line-height设置成一样,文字就会垂直居中 鼠标经过时高度比其他菜单高的效果:margin-top:-10px;
    查看全部
  • backgroud-position中的像素值x y,其参照原点是标签的左上角,x为正值向原点右移相应像素单位,y为正值则向下移.
    查看全部
    0 采集 收起 来源:编程练习

    2018-03-03

  • li { float:left } 增加可以纵向改为横向 ul { list-style:none; width:100px } 后面的width需要删除 缩进删除 text-align:center 文本对齐方式(居中)
    查看全部
  • 基本的样式清除: *{margin:0;padding:0} 无序列表圆点去除: ul{list-style:none} 下划线去除: a{text-decoration:none} 文本缩进标签 text-indent 不会影响总体宽度(padding会) 需要将a标签设置为块元素,才能设高宽、hover效果 代码:a{display:block} hover格式 a:hover{}
    查看全部
  • 水平导航需要设置float属性 基本清除样式:*{margin:0;padding:0;} 无序列表圆点清除:ul{list-style:none;} 文字下划线去除:a{text-decoration:none;} 文本缩进标签 text-indent 不会影响总体宽度(padding会) 需要将a标签设置为块元素,才能设高宽、hover效果 代码:a{display:block} hover格式 a:hover{}
    查看全部
    0 采集 收起 来源:编程练习

    2018-02-24

  • 1.有序列表 ol/li 有start属性, 最大序号为999 显示方式是列表前面有序号(序号形式由type属性值决定) 2.无序列表 ul/li 无start属性 显示方式是列表前面没序号,只有圆点(圆点样式由type属性值决定)
    查看全部
    0 采集 收起 来源:练习题

    2018-02-24

  • 基本的样式清除:.body{margin:0;padding:0} 无序列表圆点去除: ul{list-style:none} 下划线去除: a{text-decoration:none} a标签是最内部的元素 变成块:dispay:block 对li的设置写入a中 对块元素进行设置hover a:hover{...}
    查看全部
  • <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{margin: 0; padding:0;font-size: 14px} ul{list-style:none;width: 100px} a{text-decoration:none;display:block;height:30px;line-height:30px;background-color: grey;margin-bottom:1px;text-align:center; } a:hover{background:red;color:#fff;} </style> </head> <body> <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> </body> </html>
    查看全部
  • 圆角贴图水平菜单 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>首页</title> <style> /*list style 表单样式 text-decoration 文本修饰 disply:block 使a标签成为块级元素 margin-bottom:设置 p 元素的下外边距 text-indent:文本缩进值*/ *{margin: 0;padding: 0;font-size: 14px;} ul{list-style: none;height: 50px;padding-left:30px;border-bottom: 5px solid #F60} li{float: left;margin-top: 20px} a{text-decoration: none;display: block;height: 30px;line-height: 30px;width: 120px;background-color: antiquewhite;margin-bottom: 1px;text-align: center; background: url("images/1.png")} .on,a:hover{color: azure;background-position: 0 -30px} </style> </head> <body> <ul> <li><a class="on" href="#">首页</a></li> <li><a href="#">新闻快讯</a></li> <li><a href="#">企业展示</a></li> <li><a href="#">联系我们</a></li> </ul> </body> </html>
    查看全部

举报

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

微信扫码,参与3人拼团

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

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