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

商城分类导航效果

zongran Web前端工程师
难度初级
时长 1小时18分
学习人数
综合评分9.70
422人评价 查看评价
9.9 内容实用
9.7 简洁易懂
9.5 逻辑清晰
  • 设置LI鼠标移上时有外发光,且有边框,右侧无边框,无背景图片 1. 修改li:hover样式 2.设置边框及外发光效果 3.对chrome和firefox等浏览器设置外发光效果 4.删除背景图片 .topmenu li:hover { /* 任务编写代码处 */ background:none; border: 1px solid #DDD; box-shadow: 0 0 8px #DDD; -moz-box-shadow: 0 0 8px #DDD; -webkit-box-shadow: 0 0 8px #DDD; border-right: none; }
    查看全部
    0 采集 收起 来源:编程练习

    2016-11-05

  • .topmenu li { height: 30px; line-height: 30px; font-size: 11pt; list-style-type: none; text-align: left; padding-left: 8px; z-index: 3; /* 任务一 */ background-image:url(http://img1.sycdn.imooc.com//5411027300014f0200220030.jpg); background-repeat: no-repeat; background-position: right; } .topmenu li:hover { /* 任务二 */ background-image: none; } .topmenu li a { text-decoration: none; color: #313131; } .topmenu li a:hover { text-decoration: underline; font-weight: bold; color: #e4393c; }
    查看全部
    0 采集 收起 来源:编程练习

    2016-11-05

  • 代码如下显示
    查看全部
    0 采集 收起 来源:编程练习

    2016-10-28

  • 代码如下显示
    查看全部
    0 采集 收起 来源:编程练习

    2016-10-28

  • 代码如下显示
    查看全部
    0 采集 收起 来源:编程练习

    2016-10-28

  • 代码如下显示
    查看全部
    0 采集 收起 来源:编程练习

    2016-10-28

  • 代码如下显示
    查看全部
    0 采集 收起 来源:编程练习

    2016-10-28

  • 如何解决内容过少或者过多的问题:<br> 1、内容过少时:将左侧一级菜单与悬浮层的底部进行高度对比;<br> 首先获取左侧一级菜单所处的高度(一级菜单li的索引*每个高度为30+标题部分的高度):h0=[this.i-1]*30+42;<br> 2.获取悬浮层的高度(当前活动DIV上部距离顶部的高度+本身DIV的高度)即:h=this.getElementsByTagName('div')[0].offsetTop+this.getElementsByTagName('div')[0].offsetHeigth;<br> 判断语句:if(h<h0){this.getElementsByTagName('div').style.top=h0;}<br> 内容过多时:if(this.getElementsByTagNmae('div')[0].offsetHeigth>550){this.getElementsByTagName('div')[0].style.top=0+3+'px'} 使用闭包的注意点 1)由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用闭包,否则会造成网页的性能问题,在IE中可能导致内存泄露。解决方法是,在退出函数之前,将不使用的局部变量全部删除。 2)闭包会在父函数外部,改变父函数内部变量的值。所以,如果你把父函数当作对象(object)使用,把闭包当作它的公用方法(Public Method),把内部变量当作它的私有属性(private value),这时一定要小心,不要随便 改变父函数内部变量的值。
    查看全部
  • body { padding:0; font-size:10pt; behavior:url(css/csshover.htc); } 下载css/csshover.htc 兼容ie6
    查看全部
    0 采集 收起 来源:悬浮层制作

    2016-10-18

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

    2018-03-22

  • hover 当鼠标悬停到该处时,为空。
    查看全部
    0 采集 收起 来源:编程练习

    2016-10-18

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

    2016-10-17

  • 下划线:text-decoration:underline font-weight:bold加粗
    查看全部
    0 采集 收起 来源:鼠标浮动效果

    2016-10-16

  • 1、如何解决二级菜单内容过少导致和一级菜单分开的问题 内容过少时:将左侧一级菜单的顶部与悬浮层的底部进行高度对比; 首先获取左侧一级菜单所处的高度(一级菜单li的索引*每个高度为30+标题部分的高度):h0=(this.i-1)*30+42;/*在显示的height=30px时,this.i-1是正确的。在height=60px时就有偏差*/ 其次获取悬浮层的高度(当前活动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';} 2、如何解决二级菜单内容过多导致在当前窗口显示不全的问题 内容过多时:if(this.getElementsByTagNmae('div')[0].offsetHeigth>550) 550是浏览器窗口除去浏览器的标签栏、地址栏、收藏栏等的大概可用高度 将二级菜单top属性设置小一些 {this.getElementsByTagName('div')[0].style.top='3px'} 注意:height是像素值,offsetHeight是数字值。所以用offsetHeight。 如果在for循环下直接使用i是不会产生闭包的。 由于是在function()函数体中使用i所以产生了闭包,这个函数里面根本没有i这个变量,所以函数会从父级函数中去找i,当找到这个i的时候,for循环已经循环完毕了,所以最终会返回i的最后一个值; 要获取正确的i值,可以将i值绑定在调用函数的对象上,然后在函数内部使用this.i来获取。
    查看全部
  • 商城分类导航的布局分析图,竖向列表,横向伸缩
    查看全部

举报

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

微信扫码,参与3人拼团

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

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