1.<script src=”js/flexible.js”></script>

可以用这个布局来设置网页,好处是会随着网页框的大小变化的。

假如引入了js文件。打开html拉动网页大小有变化就行。

然后写布局大小的时候要把px转换成rem。(用cssrem插件自动转换)

2.简便的快捷方式:

假如要写这个

可以写    .showTime 后回车即可自动生成:

<div class=”showTime”>123333</div>

3记录一个拿到当前时间js:

 <script>
            var t = null;
            t = setTimeout(time, 1000); //開始运行
            function time() {
              clearTimeout(t); //清除定时器
              dt = new Date();
              var y = dt.getFullYear();
              var mt = dt.getMonth() + 1;
              var day = dt.getDate();
              var h = dt.getHours(); //获取时
              var m = dt.getMinutes(); //获取分
              var s = dt.getSeconds(); //获取秒
              document.querySelector(".showTime").innerHTML =
                "当前时间:" +
                y +
                "年" +
                mt +
                "月" +
                day +
                "-" +
                h +
                "时" +
                m +
                "分" +
                s +
                "秒";
              t = setTimeout(time, 1000); //设定定时器,循环运行
            }
          </script>

4.子绝对父相对:

就是当子控件的position设置成了绝对(absolute)的时候,他是依照body来定位的射阳的就会导致定位不准确。

要是我们要让子控件以父亲控件来定位的话就要把父的定位调成相对定位(relative)就会以父亲来做绝对定位了。

注意:要是父亲里面的子元素超过1个以上,调整了自绝父相没有用的话就注意自己的top有没有调整 先用top:0;试试。

5.横向布局的用法:

快速建立section

section.mianbox(自己的类名)。

快速建立几个以上的相同的类名div:

.column*3(“column为类名”)

要想使column横向布局:

 display: flex;

要求的column占比为3:5:3

首先把每个占三分:

.column{

        flex: 3;

    }

然后用nth-child(2)找到第二个设置为5即可。

.column:nth-child(2){

        flex: 5;

    }

最后修改日期:2020年8月18日

作者

留言

撰写回覆或留言

发布留言必须填写的电子邮件地址不会公开。