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

商城分类导航效果

zongran Web前端工程师
难度初级
时长 1小时18分
学习人数
综合评分9.70
422人评价 查看评价
9.9 内容实用
9.7 简洁易懂
9.5 逻辑清晰
  • text-decoration:underline;//a 标签的下划线

    font-weight:bold;//字体加粗

    box-shadow : 0 0 8px #DDD; // li 的外阴影

        Firefox浏览器:-moz-box-shadow : 0 0 8px #DDD; 

        Chrome浏览器:-webkit-box-shadow : 0 0 8px #DDD; 

    display:block 显示 none 隐藏

    position:absolute; 绝对定位

    z-index:num  ; 数值大的悬浮在上面

     


    查看全部
    0 采集 收起 来源:鼠标浮动效果

    2018-07-18

  • background-position:right; //设置背景在li右边

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

    2018-07-18

  • list-style-type:none; //去掉里标签前面的黑点

    text-decoration:none;//去掉a标签的下划线

    background-image:url(。。。jpg/png)//li标签的背景图片

    background-repeat:no-repeat;//背景图像不重复只出现一个(不定义的话会默认repeat,将在水平方向和垂直方向都重复)


    查看全部
  • https://img1.sycdn.imooc.com//5ac9c3e30001435304430121.jpg

    查看全部
  • https://img1.sycdn.imooc.com//5ac9bdc30001411f03680117.jpg

    解决IE6兼容性问题

    查看全部
    0 采集 收起 来源:JS实现特效

    2018-04-08

  • https://img1.sycdn.imooc.com//5ac9b7ae00010cf802720087.jpg

    设置边框阴影(以上三个分别兼容不同的浏览器)

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

    2018-04-08

  • https://img1.sycdn.imooc.com//5ac9b5540001bbfa03350079.jpg

    当鼠标移动到 li 上时,class 为 submenu 的 div 显示(display改为block)

    查看全部
    0 采集 收起 来源:鼠标浮动效果

    2018-04-08

  • <dl>标签在列表中的应用 <dt>定义列表分类 <dd>定义列表项目利用a元素制作竖线“ ▏” display:block;float:left;border-left:1px solid grey;height:14px;line-height:14px;padding:0px 5px;

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

    2018-03-24

  • relative的有两个属性①是以自身为参照基准进行定位,也就是相对于<自身原有位置>进行偏移 。并不是相对于其他元素进行定位,这个要理解好。②一旦设置了relative,那么随即就会产生z-index属性,就是空间层堆叠,由于二级菜单的包裹层的z-index默认是小于10的,那么span标签设置了z-index:10 那么就是从顶层往下面遮盖住了二级菜单border。就是这个原理,理解清楚relative的两个属性是关键!

    查看全部
    0 采集 收起 来源:鼠标浮动效果

    2018-03-24

  • 文字跟左边的距离用padding可能会影响父元素的宽度,如果用text—indent:**px;就不会有什么隐患;

    查看全部
  • height,line-height(同一个元素设置,使内容垂直居中

    查看全部
  • dt用来定义列表中的项目,dd用来描述列表中的项目,常用于网站分类菜单,对搜索引擎友好,可以分别设置样式,而ul和li列表做不到,a标签对搜索引擎不友好
    查看全部
    0 采集 收起 来源:悬浮层制作

    2018-02-26

  • 用background设置一系列属性的时候,不同属性之间不能加逗号!!!可以用空格隔开,否则无效
    查看全部
    0 采集 收起 来源:编程练习

    2018-02-26

举报

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

微信扫码,参与3人拼团

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

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