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

商城分类导航效果

zongran Web前端工程师
难度初级
时长 1小时18分
学习人数
综合评分9.70
422人评价 查看评价
9.9 内容实用
9.7 简洁易懂
9.5 逻辑清晰
亟需学习啊
/* 任务一 */
background: url(http://img1.sycdn.imooc.com//5411027300014f0200220030.jpg) #f8f8f8 no-repeat right center;

}

.topmenu li:hover
{

/* 任务二 */
background:none;

}
-webkit-box-shadow:0 0 8px #ddd;
-moz-box-shadow:0 0 8px #ddd;
-ms-box-shadow:0 0 8px #ddd;
-o-box-shadow:0 0 8px #ddd;
box-shadow:0 0 8px #ddd;
background-image: url(http://img1.sycdn.imooc.com//5411027300014f0200220030.jpg);
background-repeat:no-repeat;
background-position:right;
ie界面太丑,没用过来上网.还用低版ie?out吗

最新回答 / Bang3416578
document.getElementByTagName("li")返回的是获取到的li元素的数组,用for循环遍历数组中每一个li元素,给每一个li都添加了onmouseover和onmouseout事件。
主要是把子菜单分开写在li里面,和选项卡不一样
我个人觉得这种二级菜单真的没有特别多的特性,没必要用js,用css挺方便的就是html结构看着有点别扭,问题来了,为什么京东非要用js,而且没有使用li标签而是用的div
讲的比较好,都是干货,赞!
早晨来一发!!
可以在大類div后插入一個僞元素box 設置透明其 左和下邊 ,再旋轉45度〈topright〉。
.topMenu li div {
display: inline-block;
width: 4px;
height: 4px;
border: 2px solid #bbb;
border-color: #bbb #bbb transparent transparent;
transform: rotate(45deg);
float: right;
margin-right: 11px;
margin-top: 10px;
}
没有背景图
FSCapture
很小的一款截图软件,各种花式截图,能动态显示像素大小,推荐试一下
说老师声音好听的是man吗?

最赞回答 / 慕粉3247841
上w3school看到说在 CSS 中,width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸,但是会增加元素框的总尺寸。算是弄明白了!
这样写,当鼠标移上去时每个li都加了高度,建议在js里先判断一下哪些li下面有<b>,对该li加高度,其余没有的就不加高度了
课程须知
如果您已经掌握了HTML/CSS、JavaScript的基础知识,但又缺乏实践经验或者对案例有兴趣,那么就开启课程的学习吧!
老师告诉你能学到什么?
让您学会开始编程前如何进行分析,让编写代码变的事半功倍;如何运用JavaScipt和CSS制作导航的两种方法,CSS的兼容性问题及修复方法,让您将掌握的基础知识进行综合应用。

微信扫码,参与3人拼团

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

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

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

举报

0/150
提交
取消