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

商城分类导航效果

zongran Web前端工程师
难度初级
时长 1小时18分
学习人数
综合评分9.70
422人评价 查看评价
9.9 内容实用
9.7 简洁易懂
9.5 逻辑清晰
  • z-index 属性巧妙实现遮挡效果
    查看全部
    0 采集 收起 来源:悬浮层制作

    2016-06-19

  • 1.ul是无序列表,也就是说没有排列限制可以随意加li; <ul> <li>可以随意放置</li> <li>可以随意放置</li> <li>可以随意放置</li> </ul> .可以随意放置 .可以随意放置 .可以随意放置 2.ol就序列表,会按照你写的li前后依次排列; <ol> <li>我是第一</li> <li>我是第二</li> <li>我是第三</li> </ol> 1.我是第一 2.我是第二 3.我是第三 3.dl是定义列表,会默认前后层级关系; <dl> <dt>我是头</dt> <dd>我是内容</dd> <dd>我是内容</dd> </dl> 我是头 --我是内容 --我是内容
    查看全部
    0 采集 收起 来源:悬浮层制作

    2018-03-22

  • 边框发光效果是由 边框颜色 加上阴影效果颜色,合在一起实现的。 border:2px solid #DDD; box-shadow:0 0 8px #DDD; -moz-box-shadow:0 0 8px #DDD; -webkit-box-shadow:0 0 8px #DDD; -o-box-shadow:0 0 8px #DDD;
    查看全部
    0 采集 收起 来源:编程练习

    2016-06-19

  • box-shadow:0 0 8px #DDD; 参数1:阴影向右距离(负数为反方向) 参数2:阴影向下距离(负数为反方向) 参数3:阴影模糊度 参数4:阴影颜色
    查看全部
    0 采集 收起 来源:编程练习

    2016-06-19

  • z-index的疑惑解决: 此css属性需要在设置position定位除了(static)外才能使用。 但是父级元素出现realitive相对定位时,子级的z-index受限制,除了父级元素内容可以比较,而父级外部其他元素也设置了z-index的话,外部元素会与其父级比较层级。要解决此问题需要将父级元素设置成absolute绝对定位。
    查看全部
    0 采集 收起 来源:鼠标浮动效果

    2016-06-16

  • 1. 這個css 寫法蠻特別的 參考一下: .topmenu li :hover .submenu {} 如此一來你就可以控制 topmenu類 底下的Li 偽選擇器是hover時 submenu類的樣式了 2. 空標籤使用,加個白色背景,把多餘的給蓋住 3. 用 box-shadow:0 0 8px #ddd;設置邊框發光效果, -moz-box-shadow:0 0 8px #ddd;/*firefox*/ -webkit-box-shadow:0 0 8px #ddd;/*google*/
    查看全部
    0 采集 收起 来源:鼠标浮动效果

    2016-06-16

  • 用到了三個css的屬性 background-image: background-repeat background-position
    查看全部
    0 采集 收起 来源:编程练习

    2016-06-16

  • 如何解决内容过少或者过多的问题:<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),这时一定要小心,不要随便 改变父函数内部变量的值。
    查看全部
  • .topmenu li:hover span { background: #FFF; display: inline-block; z-index: 20; width: 30px; height: 30px; float: right; position: relative; right: -2px; background-color: #FFF; }
    查看全部
    0 采集 收起 来源:编程练习

    2016-06-13

  • 分类菜单结构
    查看全部
  • hover选择器补丁
    查看全部
    0 采集 收起 来源:悬浮层制作

    2016-06-11

  • <dt>用来创建列表中的上层项目(定义),<dd>用来创建列表中最下层项目(描述),<dt>和<dd>都必须放在<dl>< /dl>标志对之间。 <dl> <dt>我们在做列表标题</dt> <dd>我们在做列表</dd>
    查看全部
    0 采集 收起 来源:编程练习

    2018-03-22

  • 老师说:之前的课程里提到使用QQ取色得到的是10进制值,需要用科学型计算器进行计算才得到16进制。其实不用这么麻烦,只要在使用QQ取颜色时按住ctrl,就可以直接看到16进制的值 FSCapture: 很小的一款截图软件,各种花式截图,能动态显示像素大小,推荐试一下
    查看全部
    0 采集 收起 来源:编程练习

    2016-06-07

  • .topmenu li:hover { background-image:none; /* 任务二 */ }
    查看全部
    0 采集 收起 来源:编程练习

    2016-06-07

  • background-image:url(http://img1.sycdn.imooc.com//5411027300014f0200220030.jpg); background-repeat:no-repeat; background-position:right;
    查看全部
    0 采集 收起 来源:编程练习

    2016-06-07

举报

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

微信扫码,参与3人拼团

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

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