zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    java 14 -7 Date
    java 14 -6 BigInteger和BigDecimal
    java 14 -5 System类
    java14-4 Pattern和Matcher类的使用
    java 14-3 正则表达式的分割
    转:StringBuilder与StringBuffer的区别(转)
    kafka之config/server.properties配置参数说明
    Kafka内核理解:消息的收集/消费机制
    kafka删除topic及其相关数据
    kafka使用问题解决
  • 原文地址:https://www.cnblogs.com/xiou/p/9711481.html
Copyright © 2011-2022 走看看