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

商城分类导航效果

zongran Web前端工程师
难度初级
时长 1小时18分
学习人数
综合评分9.70
422人评价 查看评价
9.9 内容实用
9.7 简洁易懂
9.5 逻辑清晰
  • <dl>标签
    查看全部
    0 采集 收起 来源:悬浮层制作

    2018-03-22

  • dt和dd
    查看全部
    0 采集 收起 来源:悬浮层制作

    2016-07-22

  • 在li的hover上来做定义,.topmenu下面的li,鼠标移动到上面的时候,改变submenu的样式
    查看全部
    0 采集 收起 来源:鼠标浮动效果

    2016-07-21

  • box-shadow:0 0 8px #DDD; -webkit-box-shadow:0 0 8px #DDD; -moz-box-shadow:0 0 8px #DDD;
    查看全部
    0 采集 收起 来源:编程练习

    2016-07-21

  • 函数的闭包, 函数里面拿不到函数外的变量,可以通过赋值给this或者新变量的方式让函数里面能访问,尤其是循环绑定事件时 去this的索引,可以讲索引赋值给函数调用者
    查看全部
  • 通过给<a>设置边框和padding来实现内容的分割线
    查看全部
    0 采集 收起 来源:悬浮层制作

    2018-03-22

  • 京东分类导航分析
    查看全部
  • 图片溢出效果 .rightPic( position:relative; right:-35px; bottom:-20px; )
    查看全部
  • 细节优化及扩展(一) JS中,循环中的变量值都是最终的那个,所以使用lis[i].i=i; 如何解决内容过少或者过多的问题: 将左侧一级菜单与悬浮层的底部进行高度对比: 首先获取左侧一级菜单所处的高度(一级菜单li的索引*每个高度为30+标题部分的高度):h0=(this.i-1)*30+42; 获取悬浮层的高度(当前活动DIV上部距离顶部的高度+本身DIV的高度)即:h=this.getElementsByTagName('div')[0].style.Top+this.getElementsByTagName('div')[0].offsetHeigth; 内容过少时:if(h<h0){this.getElementsByTagName('div')[0].style.top=h0+"px";} 内容过多时:if(this.getElementsByTagNmae('div')[0].offsetHeigth>550){this.getElementsByTagName('div')[0].style.top='3px';}
    查看全部
  • overflow:hidden去除浮动: 当一个盒子设置overflow:hidden,而盒子内的所有元素都设置为浮动,此盒子不会因为所有元素的浮动而坍塌: 1.如果此盒子设置了宽高值,那么无论盒子内元素的宽高为多少,盒子的宽高值都是我们设定的值; 2.如果此盒子没有设置宽高值,那么盒子内元素将撑开此盒子(盒子将不会因为元素的浮动而坍塌).
    查看全部
    0 采集 收起 来源:悬浮层制作

    2016-07-10

  • 在ie6 下只有a 才支持:hover 伪类,其它标签都不支持,现在可以通过 csshover.htc 可以解决 ie6 的 hover 兼容问题。 它利用 javascript 脚本来给元素的的样式定义,如果检测到 hover 定义,就给元素设置 onmouseover 和 onmouseout 事件,以此来实现 hover 的效果。 <dl>标签在列表中的应用 <dt>定义列表分类 <dd>定义列表项目利用a元素制作竖线“ ▏” display:block;float:left;border-left:1px solid grey;height:14px;line-height:14px;padding:0px 5px;
    查看全部
    0 采集 收起 来源:悬浮层制作

    2018-03-22

  • 有时我们还需要依靠z-index来设定容器的上下关系,数值越大越在最上面,数值范围是自然数。当然有一点要注意,父子关系是无法用z-index来设定上下关系的,一定是子级在上父级在下。
    查看全部
    0 采集 收起 来源:鼠标浮动效果

    2016-07-10

  • 商城类网站导航菜单制作 门户类网站特点:导航在上方平铺展示,一般没有二级菜单 商城类网站特点:采取竖向列表,横向伸缩的导航形式,把数量巨大的类别集中在很小的区域
    查看全部
    0 采集 收起 来源:课程介绍

    2016-07-10

  • hover 标签不仅可以使用在a标签,其他的标签亦可以,IE6不支持; box-shadow: 0 0 8px #DDD; -moz-box-shadow:0 0 8px #DDD; -webkit-box-shadow: 0 0 8px #DDD; IE6兼容CSS样式补丁文件 body{ behavior:url(css/csshover:htc); }
    查看全部
    0 采集 收起 来源:悬浮层制作

    2016-07-07

  • <dl> <dt>定义列表中的项目</dt> <dd>描述列表中的项目</dd> </dl>
    查看全部
    0 采集 收起 来源:悬浮层制作

    2018-03-22

举报

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

微信扫码,参与3人拼团

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

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