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>
  • 相关阅读:
    Java 跨系统开发隐患(一)
    SpringBoot邮件推送功能
    基于图灵api的Python机器人
    JSP编码问题解决方法
    记一次数据结构课设
    基于百度语音识别API的Python语音识别小程序
    帝国cms过滤采集内容
    如何批量取消文章审核
    评论时判断会员是否登录
    帝国cms把文章加入到收藏夹代码
  • 原文地址:https://www.cnblogs.com/ly52990/p/9944205.html
Copyright © 2011-2022 走看看