zoukankan      html  css  js  c++  java
  • 一个简单的grid布局基础例子注释及相关分析

    HTML:

    <!DOCTYPE html>
     <!--全称为Document Type HyperText Mark-up Language即为文档种类为超文本标记性语言或超文本链接标示语言,放在html前面,用来声明文档的解析类型-->
    <html lang="en"> <!--向搜索引擎表示该页面是html语言,并且语言为英文网站,其"lang"的意思就是“language”,语言的意思,而“en”即表示english-->
    <head> <!--头部标签-->
        <meta charset="UTF-8"><!--meta标签通常出现在头部, 定义HTML 文档的字符编码为"UTF-8"-->
        <meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 定义名称为视口,可视区域的宽度,值可为数字或关键词device-width,页面首次被显示是可视区域的缩放级别,取值1.0则页面按实际尺寸显示,无任何缩放-->
        <meta http-equiv="X-UA-Compatible" content="ie=edge"><!--以上代码IE = edge告诉IE使用最新的引擎渲染网页,chrome = 1则可以激活Chrome Frame .-->
        <title>Document</title><!--标题为Document-->
        <link rel="stylesheet" href="css/style.css"><!--告诉浏览器采用样式表,连接该css文件-->
    </head>
    <body>
        <div class="wrapper">
            <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>
    

    CSS:

    .wrapper {
      display: grid;/*属性规定元素应该生成的框的类型为网格。*/
      grid-template-columns: repeat(3, 1fr);/*网格模板列为3列自动填充的列*/
      grid-gap: 10px;/*网格差距为10px的距离*/
      grid-auto-rows: minmax(100px, auto);/*网格自动行最小为100px的高度最大至自动的范围*/
    }
    .one {
      grid-column: 1 / 3;/*one块列起始位置为1末位置为3*/
      grid-row: 1; /*one块行位置位于第一行*/
    }
    .two { 
      grid-column: 2 / 4; /*two块的列起始位置为2末位置为4*/
      grid-row: 1 / 3;  /*two块的行起始位置为1末位置为3*/
    }
    .three {
      grid-column: 1;/*three块的列位于第一列*/
      grid-row: 2 / 5;/*three块的行起始位置为2末位置为5*/
    }
    .four {
      grid-column: 3;/*four块的列位于第三列*/
      grid-row: 3;/*four块的行位于第三行*/
    }
    .five {
      grid-column: 2;/*five块的列位于第二列*/
      grid-row: 4;/*five块的行位于第四行*/
    }
    .six {
      grid-column: 3;/*six块的列位于第三列*/
      grid-row: 4;/*six块的行位于第四行*/

      

  • 相关阅读:
    操作串口通信类(IO.Ports)SerialPort
    TreeView的数据源绑定—采用sqlite作为数据源,实现对treeview控件进行增删改查
    (Easy)打开指定的文件
    TreeView的数据源绑定—采用XML作为数据源,实现对treeview进行增删改查,之后回写XML文档
    linux sort,uniq,cut,wc命令详解
    轻快的VIM(六):恢复
    Python 常用模块大全(整理)
    定位oracle实例的当前跟踪文件名及路径
    查看session io
    查看pga使用
  • 原文地址:https://www.cnblogs.com/ceneasy/p/9757381.html
Copyright © 2011-2022 走看看