web学习-grid

Posted 2021-01-14 meteorll

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了web学习-grid相关的知识，希望对你有一定的参考价值。

  1 <!DOCTYPE html>
  2  <!DOCTYPE html>
  3 <html>
  4  <head>
  5     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  6      <title>
  7          网格布局
  8      </title>
  9     <style type="text/css">
 10      wrapper{
 11     display: grid;
 12   grid-template-columns: repeat(4,100px);
 13    /* grid-gap: 10px;*/
 14   grid-auto-rows: 100px;
 15 }
 16 
 17 
 18 .one{
 19   display: inline-block;
 20     width: 400px;
 21     height: 300px;
 22     background: green;
 23     color:black;
 24      grid-column: 1 / span 4;
 25      grid-row: 1 / 2;   
 26 }
 27 .two{
 28   display: inline-block;
 29     width: 100px;
 30     height: 500px;
 31     background: black;
 32     color:black;
 33      grid-column: 1 / 2;
 34      grid-row: 2 / 3;   
 35 }
 36 
 37 .three{
 38   display: inline-block;
 39     width: 500px;
 40     height: 200px;
 41     background: red;
 42     color:black;
 43      grid-column: 2 / 3;
 44      grid-row: 2 / 3;   
 45 }
 46 .four{
 47   display: inline-block;
 48     width: 200px;
 49     height: 100px;
 50     background: red;
 51     color:black;
 52      grid-column: 3 / 4;
 53      grid-row: 2 / 3;   
 54 }
 55 .five{
 56   display: inline-block;
 57     width: 300px;
 58     height: 200px;
 59     background: pink;
 60     color:black;
 61      grid-column: 4 / 5;
 62      grid-row: 2 / 3;   
 63 }
 64 .six{
 65   display: inline-block;
 66     width: 100px;
 67     height: 200px;
 68     background: lime;
 69     color:yellow;
 70      grid-column: 5 / 6;
 71      grid-row: 2 / 3;   
 72 }
 73 .seven{
 74   display: inline-block;
 75     width: 200px;
 76     height: 100px;
 77     background: blue;
 78     color:black;
 79      grid-column: 2 / 3;
 80      grid-row: 3 / 4;   
 81 }
 82 .eight{
 83   display: inline-block;
 84     width: 200px;
 85     height: 100px;
 86     background: purple;
 87     color:black;
 88      grid-column: 3 / 4;
 89      grid-row: 3 / 4;   
 90 }
 91 .nine{
 92   display: inline-block;
 93     width: 100px;
 94     height: 100px;
 95     background: seagreen;
 96     color:black;
 97      grid-column: 4 / 5;
 98      grid-row: 3 / 4;   
 99 }
100  </style>
101  
102  </head>
103   <body>
104    <div class="one">One</div>
105    <div class="two">Two</div>
106    <div class="three">Three</div>
107    <div class="four">four</div>
108    <div class="five">Five</div>
109    <div class="six">Six</div>
110    <div class="seven">Seven</div>
111    <div class="eight">Eight</div>
112    <div class="nine">Nine</div>
113     </div> 
114 </body> </html>
115 
116 .

技术分享图片

以上是关于web学习-grid的主要内容，如果未能解决你的问题，请参考以下文章

web前端开发JQuery常用实例代码片段(50个)

[原创]java WEB学习笔记61：Struts2学习之路--通用标签 property，uri，param,set,push,if-else,itertor,sort,date,a标签等(代码片段