zoukankan      html  css  js  c++  java
  • Grid网格布局

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>网格布局</title>
    <style>
        .container {
            display: grid;
            grid-template-columns: 100px 100px 100px 100px 100px;
            grid-template-rows: 100px 100px 100px 100px 100px;
        }
        .item {
            background-color: #0fc;
            color: #fff;
            font-size: 150%;
            padding: 20px;
            margin: 10px;
        }
         
        .item-1 {
            grid-column-start: 1;
            grid-column-end: 5;
            grid-row-start: 1;
            grid-row-end: 2;
        }
        .item-2 {
            grid-column-start: 1;
            grid-column-end: 2;
            grid-row-start: 2;
            grid-row-end: 5;
        }
        .item-3 {
            grid-column-start: 2;
            grid-column-end: 4;
            grid-row-start: 2;
            grid-row-end: 3;
        }
        .item-4 {
            grid-column-start: 2;
            grid-column-end: 4;
            grid-row-start: 3;
            grid-row-end: 4;
        }
        .item-5 {
            grid-column-start: 2;
            grid-column-end: 4;
            grid-row-start: 4;
            grid-row-end: 5;
        }
        .item-6 {
            grid-column-start: 4;
            grid-column-end: 5;
            grid-row-start: 2;
            grid-row-end: 5;
        }
    </style>
     
    </head>
    <body>
    <h1>Grid布局</h1>
    <div class="container">
        <div class="item item-1">1</div>
        <div class="item item-2">2</div>
        <div class="item item-3">3</div>
        <div class="item item-4">4</div>
        <div class="item item-5">5</div>
        <div class="item item-6">6</div>
     
     
    </body>
    </html>
  • 相关阅读:
    MySQL版本详解
    数据库安全[一]
    python itertools模块学习
    两列布局实例
    Linux 原始套接字抓包实例
    [转]Linux终端快捷键
    SQL中的LEFT JOIN 和 RIGHT JOIN 以及INNER JOIN
    twisted框架入门笔记(1)
    一个关于lambda的题目
    找出数组中仅仅一个出现两次的数
  • 原文地址:https://www.cnblogs.com/ly52990/p/9944205.html
Copyright © 2011-2022 走看看