zoukankan      html  css  js  c++  java
  • css grid 布局


    <!DOCTYPE html>

    <html>
    <head>
    <meta name="viewport" content="width=device-width" />
    <title>TEST</title>
    <style>
    .header {
    grid-area: h;
    background-color:red;
    }

    .menu {
    grid-area: m;
    background-color: blue;
    }

    .content {
    grid-area: c;
    background-color: red;
    }

    .footer {
    grid-area: f;
    background-color: green;
    }
    .wrapper {
    display: grid;
    grid-template-columns: 200px 200px 200px;
    grid-template-rows: 50px 50px;



    }

    .container {
    display: grid;
    grid-gap: 5px;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 50px 800px 50px;
    grid-template-areas: "h h h h h h h h h h h h" "m m c c c c c c c c c c" "f f f f f f f f f f f f";
    }
    </style>
    </head>
    <body>
    @*<div class="wrapper">
    <div style=" background-color: red;">1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    </div>*@

    <div class="container">

    <div class="header">HEADER</div>

    <div class="menu">MENU</div>

    <div class="content">CONTENT</div>

    <div class="footer">FOOTER</div>

    </div>
    </body>
    </html>

  • 相关阅读:
    Python 读写
    测试项目总结之手淘安全中心
    Python 单元测试
    Python __name__变量
    java数据类型取值范围
    java数据类型之间的转换
    Git 常用命令清单
    Linux Distribution
    UNIX&Linux发展图谱
    Linux 软件大全
  • 原文地址:https://www.cnblogs.com/superstar/p/13529016.html
Copyright © 2011-2022 走看看