zoukankan      html  css  js  c++  java
  • CSS Grid

    效果图如上所示

    <!DOCTYPE html>
    <html>
    <head>
        <title>练习</title>
    
    </head>
    <body>
    <link rel="stylesheet" type="text/css" href="file:///D:/Sublime%20Text%203/Sublime%20Text%203/%E4%BB%A3%E7%A0%81/Css%E5%AE%9E%E9%AA%8C">
    <div class="container">
      <div class="one">One</div>
      <div class="two">Two</div>
      <div class="three">Three</div>
      <div class="four">Four</div>
      <div class="five">Five</div>
      <div class="six">Six</div>
    </div>
    </body>
    </html>
    .container{
       display: grid;
      grid-template-columns: 60px 60px 60px;
      grid-auto-rows: 60px 60px 60px 60px;
      background: pink;
      color: purple;
    }
    .one{
      grid-column-start: 1;
      grid-row-start: 1;
      grid-row-end: 2;
      grid-column-end: 4;
      background: orange;
    }
    .two{
      grid-column-start: 1;
      grid-row-start: 2;
      grid-column-end: 2;
      grid-row-end: 5;
      background: green;
    }
    .three{
      grid-column-start: 2;
      grid-row-start: 2;
      grid-column-end: 3;
      grid-row-end: 3;
      background: black;
    }
    .four{
      grid-column-start: 2;
      grid-row-start: 3;
      grid-row-end: 4;
      grid-column-end: 3;
      background: yellow;
      }
    .five{
      grid-column-start: 2;
      grid-row-start: 4;
      grid-column-end: 3;
      grid-row-end: 5;
      background: red;
      }
    .six{
      grid-column-start: 3;
      grid-row-start: 2;
      grid-column-end: 4;
      grid-row-end: 5;
      background:blue;
      }
  • 相关阅读:
    Mysql任务调度
    使用 IntraWeb (18)
    使用 IntraWeb (17)
    替盛大代发的招聘启示
    使用 IntraWeb (16)
    使用 IntraWeb (15)
    使用 IntraWeb (14)
    使用 IntraWeb (13)
    使用 IntraWeb (12)
    使用 IntraWeb (11)
  • 原文地址:https://www.cnblogs.com/taogao3364/p/9721627.html
Copyright © 2011-2022 走看看