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

商城分类导航效果

zongran Web前端工程师
难度初级
时长 1小时18分
学习人数
综合评分9.70
422人评价 查看评价
9.9 内容实用
9.7 简洁易懂
9.5 逻辑清晰
  • 商城导航代码:
    查看全部
    0 采集 收起 来源:编程练习

    2017-01-05

  • 二级菜单内容过少导致和一级菜单分开的问题: 左侧对应一级菜单的顶部和悬浮的底部进行高度对比步骤如下: 先获取一级菜单所处的高度赋值给一个变量 其次获取悬浮层的高度利用判断语句if来进行选择 解决二级菜单内容过多导致显示不全的问题: 先判断二级菜单的高度是否大于可用高度大于则将二级菜单的top设置的小一点
    查看全部
  • 别忘记lis【i】.i = i;
    查看全部
    0 采集 收起 来源:编程练习

    2017-01-05

  • 这节代码有意思。css样式表 在.leftdiv dl dt 加上padding-top:5px;可以实现对齐
    查看全部
    0 采集 收起 来源:编程练习

    2017-01-05

  • 鼠标移上时有外发光,且有边框,右侧无边框,无背景图 border: 1px solid #DDD; /*边框*/ border-right: 0; box-shadow:0 0 8px #DDD; -moz-box-shadow: 0 0 8px #DDD; -webkit-box-shadow: 0 0 8px #DDD; background-image:none;
    查看全部
    0 采集 收起 来源:编程练习

    2017-01-03

  • 2.当鼠标移到大类时,设置背景为空。 设置hover 时背景为空。
    查看全部
    0 采集 收起 来源:编程练习

    2017-01-03

  • 查看全部
    0 采集 收起 来源:编程练习

    2017-01-03

  • box-shadow:0 0 8px #666
    查看全部
    0 采集 收起 来源:鼠标浮动效果

    2016-12-28

  • 鼠标移上时有外发光,且有边框,右侧无边框,无背景图 border: 1px solid #DDD; /*边框*/ border-right: 0; box-shadow:0 0 8px #DDD; -moz-box-shadow: 0 0 8px #DDD; -webkit-box-shadow: 0 0 8px #DDD; background-image:none;
    查看全部
    0 采集 收起 来源:编程练习

    2016-12-27

  • dl dt 定义列表中的项目,大家电 dd 描述列表中的项目,平板、空调、冰箱等
    查看全部
    0 采集 收起 来源:悬浮层制作

    2016-12-27

  • dl dt 定义列表中的项目,大家电 dd 描述列表中的项目,平板、空调、冰箱等
    查看全部
    1 采集 收起 来源:悬浮层制作

    2016-12-26

  • 悬浮层平时隐身看不到,鼠标划入出现 .submenu{display:none;width:715px;left:220px;top:40px;position:absolute;border:1px solid #ddd;z-indx:4;backgroud:white;box-shadow:0 0 8px #ddd;(平时的悬浮层)} .topmenu li:hover .submenu{display:blcok;(鼠标悬停时的悬浮层)} 悬浮层出现后,大类目右边框线无,新加一个span标签,.topmenu li hover span{ background:white;dispaly:inline-block,z-index:20;widhth:20px;height:30px;float:right;position:relative;}
    查看全部
    0 采集 收起 来源:鼠标浮动效果

    2016-12-26

  • 鼠标移入,外右边框没有, .topmenu li:hover{border:1px solid #ddd;border-rigt:0; box-shadow:0 0 8px #ddd;moz-box-shadow(firebox):0 0 8px #ddd;-webkit-box-shadow(google):0 0 8px #ddd;background-image:none;}
    查看全部
    0 采集 收起 来源:鼠标浮动效果

    2016-12-26

  • text-decoration:underline; font-weight:bold; color:#e4393c; border:1px solid #ddd; border-right:0; box-shadow:0 0 8px #ddd; -moz-box-shadow:0 0 8px #ddd; -webkit-box-shadow:0 0 8px #ddd;
    查看全部
    0 采集 收起 来源:鼠标浮动效果

    2016-12-26

  • background-image:url(1.png); background-repeat:no-repeat; background-position:right;
    查看全部

举报

0/150
提交
取消
课程须知
如果您已经掌握了HTML/CSS、JavaScript的基础知识,但又缺乏实践经验或者对案例有兴趣,那么就开启课程的学习吧!
老师告诉你能学到什么?
让您学会开始编程前如何进行分析,让编写代码变的事半功倍;如何运用JavaScipt和CSS制作导航的两种方法,CSS的兼容性问题及修复方法,让您将掌握的基础知识进行综合应用。

微信扫码,参与3人拼团

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

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