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>
  • 相关阅读:
    Yslow-23条规则
    ASP.Net MVC多语言
    Java笔记--反射机制
    Java笔记--常用类
    Java笔记--多线程
    Java--IO流
    Java笔记--枚举&注解
    Java笔记--泛型
    Java笔记--异常
    Java笔记--集合
  • 原文地址:https://www.cnblogs.com/xiou/p/9711481.html
Copyright © 2011-2022 走看看