zoukankan      html  css  js  c++  java
  • 每日总结#1

    [遇到的问题]

    1.position定位与z-index的问题。

      做首页轮播图,发现轮播图片定位之后会覆盖导航栏。

      解决办法:

        >>> : 1.将导航栏的z-index值设置高一些,让它的级别高于轮播图片。

        这样产生了第二个问题:导航栏内部的弹框被覆盖了。

        解决办法:

          >>> : 将弹框与导航栏代码同级,这样就可以解决导航栏设置了z-index较高的值之后覆盖弹框的问题。

          可是又产生了第三个问题:弹框占据了轮播图片部分的位置。

          解决办法:

            >>> : 将弹框绝对定位,这样它们就会从文档流中剔除。不占据任何位置。

    结论:所有定位问题的来源都是父子级关系的原因。要解决定位问题就先从html父子级结构着手。

    [学习新知识]

    1.使用easyui的layout布局。

      layout可以将元素拆分成上(north)、下(south)、左(west)、右(east)、中央(center)五个部分,这样的话就是横排3行,竖排3列。但是假设需要横排4行或者更多、竖排4列或者更多时,就只能将已经拆分的那部分继续拆分,这是easyui多个布局的方式。

    2.jquery里面改变节点顺序的方法:

      在写轮播图代码的时候,实现了另一种通过改变节点顺序来显示图片的方式,这样可以不需要用到定位。

      假设页面上有一个ul,里面有3个li,结构如下:

    <ul id='parent'>
        <li id='node1'></li>
        <li id='node2'></li>
        <li id='node3'></li>
    </ul>

    有两个方法可以改变li的顺序:

      >>>方法1 :$(A).prepend($(B)) 将B放置到A的开头,始终是第一位。

      js代码如下:

    $(function(){
       $('#parent').prepend($('#node3')); //将第3个<li>放到<ul>的第一位
    })

      执行之后的结果:

    <ul id='parent'>
        <li id='node3'></li>
        <li id='node1'></li>
        <li id='node2'></li>
    </ul>

      >>>方法2 :$(A).inserBefore($(B)) 将A放置到B之前。同样的有$(A).inserAfter($(B)) 表示将A放置到B之后。

      js代码如下:

    $(function(){
       $("#node1").insertAfter($("#node2")); //将第1个<li>放置到第2个<li>之后
    })

      执行之后的结果:

    <ul id='parent'>
        <li id='node2'></li>
        <li id='node1'></li>
        <li id='node3'></li>
    </ul>
  • 相关阅读:
    Python
    算法的时间复杂度和空间复杂度-总结
    列表自动滚动
    React 结合ant-mobile 省市区级联
    5G从小就梦想着自己要迎娶:高速率、低时延、大容量三个老婆
    一文读懂GaussDB(for Mongo)的计算存储分离架构
    cpu占用过高排查
    我是如何从零开始自学转行IT并进入世界500强实现薪资翻倍?
    Linux重定向用法详解
    说出来也许你不信,我被 Linux 终端嘲笑了……
  • 原文地址:https://www.cnblogs.com/koto/p/5285741.html
Copyright © 2011-2022 走看看