• layout


    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

    .wraper{
    display: grid;
    grid-template-columns: 40px 40px 40px 40px 40px 40px 40px 40px;
    grid-template-rows: 40px 40px 40px 40px 40px 40px;
    margin-left:400px ;
    grid-gap: 5px;

    }
    .one{
    grid-column: 5/6;
    grid-row:2/3;
    border: 2px solid pink;
    background-color: pink;
    }
    .two{
    grid-column: 4/5;
    grid-row:1;
    border: 2px solid pink;
    background-color: pink;
    }
    .three{
    grid-column: 3/4;
    grid-row:1;
    border: 2px solid pink;
    background-color: pink;
    }
    .four{
    grid-column: 2/3;
    grid-row:1;
    border: 2px solid pink;
    background-color: pink;
    }
    .five{
    grid-column: 2/3;
    grid-row:2;
    border: 2px solid pink;
    background-color: pink;
    }
    .six{
    grid-column: 2/3;
    grid-row:3;
    border: 2px solid pink;
    background-color: pink;
    }
    .seven{
    grid-column: 3/4;
    grid-row:4;
    border: 2px solid pink;
    background-color: pink; } .eight{ grid-column:4/5; grid-row:5; border: 2px solid pink; background-color: pink; } .nine{ grid-column: 5/6; grid-row:6; border: 2px solid pink; background-color: pink; } .ten{ grid-column: 6/7; grid-row:5; border: 2px solid pink; background-color: pink; } .eleven{ grid-column: 7/8; grid-row:4; border: 2px solid pink; background-color: pink; } .twele{ grid-column: 8/9; grid-row:3; border: 2px solid pink; background-color: pink; } .thirteen{ grid-column: 8/9; grid-row:2; border: 2px solid pink; background-color: pink; } .fourteen{ grid-column: 8/9; grid-row:1; border: 2px solid pink; background-color: pink; } .fifty{ grid-column:7/8; grid-row:1; border: 2px solid pink; background-color: pink; } .sixty{ grid-column: 6/7; grid-row:1; border: 2px solid pink; background-color: pink; } </style></head><body><div class="wraper"><div class="one"></div><div class="two"></div><div class="three"></div><div class="four"></div><div class="five"></div><div class="six"></div><div class="seven"></div><div class="eight"></div><div class="nine"></div><div class="ten"></div><div class="eleven"></div><div class="twele"></div><div class="thirteen"></div><div class="fourteen"></div><div class="fifty"></div><div class="sixty"></div></div></body></html>
  • 相关阅读:
    聊聊LiteOS事件模块的结构体、初始化及常用操作
    有了这个数据强一致“利器”,DBA们轻松修复数据对加班“say no”
    开源一周岁,MindSpore新特性巨量来袭
    90后就敢当扫地僧!不服?4月24号来闯龙门阵!
    你的数仓函数结果不稳定,可能是属性指定错了
    云小课 | 不了解EIP带宽计费规则?看这里!
    腾讯 angel 3.0:高效处理模型
    深度树匹配模型(TDM)
    X-Deep Learning功能模块
    XLearning
  • 原文地址:https://www.cnblogs.com/xiou/p/9711481.html
Copyright © 2020-2023  润新知