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

商城分类导航效果

zongran Web前端工程师
难度初级
时长 1小时18分
学习人数
综合评分9.70
422人评价 查看评价
9.9 内容实用
9.7 简洁易懂
9.5 逻辑清晰
看到评论好多用QQ取色的评论,我想说,用chrome浏览器的开发者工具就可以很轻松地获得各种样式值,而且是精确值,还可以进行颜色值类型转换。这不是web开发必备神器么?
一级菜单的a标签后所带的span标签,可以用::after伪元素来实现,尽量减少html的无用标签,
小丑鲜花网那位,第一个li item的二级菜单层位置就不合理,鼠标移出一级菜单条目的时候,对应的二级菜单就消失了,反人类的位置定位。建议在一级菜单的第一位置插入个小图片占位,起码,一级菜单跟二级菜单还是要在起始位置水平对齐
浏览器的开发者工具审查元素就可以看到尺寸参数等啊~
那个闭包还是不太明白
background:#f8f8f8 url('http://img1.sycdn.imooc.com//5411027300014f0200220030.jpg') no-repeat right center;
应该在hover里面再加上一条:height:28px,这样就不会因为边框问题而整个高度增加2px了。
为li加上1px的border之后,鼠标移入整个li的高度增加了1px,而京东的高度没有增加。

最新回答 / singerow
首先,你要先明白margin和padding属性作用地方,obj相当于一个盒子,margin是相当于在obj外清理一条隔离带,不让别的元素靠近obj;而padding是从盒子内部放置一条隔离带,把盒子撑大。  虽然两者都可以设置边距,但是有border属性时,就完全看的出区别了。所以不改变盒子大小的前提还是用margin比较多
觉得一些小技巧老师说出来,大家在互相讨论一下 收益很多
background:url("http://img1.sycdn.imooc.com//5411027300014f0200220030.jpg") no-repeat right;
讲得蛮好的
js效果不显示的同学,一定要注意getElementsByTagName里面element后面是否有s
background: #f8f8f8 url(http://img1.sycdn.imooc.com//5411027300014f0200220030.jpg) no-repeat right;

不加上#f8f8f8 你们就不觉得别扭吗?
没有眼尖的朋友发现背景不对吗?
课程须知
如果您已经掌握了HTML/CSS、JavaScript的基础知识,但又缺乏实践经验或者对案例有兴趣,那么就开启课程的学习吧!
老师告诉你能学到什么?
让您学会开始编程前如何进行分析,让编写代码变的事半功倍;如何运用JavaScipt和CSS制作导航的两种方法,CSS的兼容性问题及修复方法,让您将掌握的基础知识进行综合应用。

微信扫码,参与3人拼团

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

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

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

举报

0/150
提交
取消