Demo1-简单测试:
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 <style type="text/css"> 7 html,body{ 8 width:100%; 9 height:100%; 10 padding:0; 11 margin:0; 12 } 13 .container { 14 width:100%; 15 height:100%; 16 display: grid; 17 grid-template-columns: 25% 25% 25% 25%; 18 grid-template-rows: 25% 25% 25%; 19 grid-template-areas: 20 ". . . ." 21 ". c c ." 22 ". . . ."; 23 } 24 .cs{ 25 grid-area: c; 26 background-color: pink; 27 } 28 </style> 29 </head> 30 <body> 31 <div class="container"> 32 <div class="cs">cs</div> 33 </div> 34 </body> 35 </html>
Demo2-页面布局练习:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style type="text/css"> html,body{ width:100%; height:100%; padding:0; margin:0; } .container { width:100%; height:100%; display: grid; /*grid-gap: 5px;*/ grid-template-columns: repeat(12, 1fr); grid-template-rows: 1fr 8fr 1fr; 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"; } .header { grid-area: h; background-color: #0F0; } .menu { grid-area: m; background-color: blue; } .content{ grid-area: c; background-color: pink; } .footer { grid-area: f; background-color: #666; } </style> </head> <body> <div class="container"> <div class="header">HEADER</div> <div class="leftmenu">MENU</div> <div class="content">CONTENT</div> <div class="footer">FOOTER</div> </div> </body> </html>
Demo3-选手分值信息展示布局:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style type="text/css"> html, body { width: 100%; height: 100%; padding: 0; margin: 0; } .container { width: 100%; height: 100%; display: grid; /*grid-gap: 5px;*/ /* grid-template-columns: 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5%;*/ grid-template-columns:repeat(22,1fr); grid-template-rows: repeat(22,1fr); grid-template-areas: ". . . . . . . . . . . . . . . . . . . . . ." ". l l l l l l l l l l l l l l l l l l l l ." ". l l l l l l l l l l l l l l l l l l l l ." ". . . . . . . . . . . . . . . . . . . . . ." ". . . . . . xx xx xx xx . . yy yy yy yy . . . . . . " ". . . . . . xx xx xx xx . . yy yy yy yy . . . . . . " ". . . . . . xx xx xx xx . . yy yy yy yy . . . . . . " ". . . . . . xx xx xx xx . . yy yy yy yy . . . . . . " ". . . . . . xx xx xx xx . . yy yy yy yy . . . . . . " ". . . . . . xx xx xx xx . . yy yy yy yy . . . . . . " ". . . . . . . . . . . . . . . . . . . . . ." ". rs rs rs rs rs rs rs rs rs rs rs rs rs rs rs rs rs rs rs rs ." ". rs rs rs rs rs rs rs rs rs rs rs rs rs rs rs rs rs rs rs rs ." ". rs rs rs rs rs rs rs rs rs rs rs rs rs rs rs rs rs rs rs rs ." ". rs rs rs rs rs rs rs rs rs rs rs rs rs rs rs rs rs rs rs rs ." ". rs rs rs rs rs rs rs rs rs rs rs rs rs rs rs rs rs rs rs rs ." ". re re re re re re re re re re re re re re re re re re re re ." ". re re re re re re re re re re re re re re re re re re re re ." ". re re re re re re re re re re re re re re re re re re re re ." ". at at at at at at at at at at at at at at at at at at at at ." ". at at at at at at at at at at at at at at at at at at at at ." ". . . . . . . . . . . . . . . . . . . . . ." ; } .banner { grid-area: l; background-color: red; } .playerphoto { grid-area: xx; background-color: blue; } .playerinfo { grid-area: yy; background-color: yellow; } .raters { grid-area: rs; background-color: green; } .result { grid-area: re; background-color: pink; } .admtip { grid-area: at; background-color: #9C6; } </style> </head> <body> <div class="container"> <div class="banner">banner</div> <div class="playerphoto">playerphoto</div> <div class="playerinfo">playerinfo</div> <div class="raters">raters</div> <div class="result">result</div> <div class="admtip">admtip</div> </div> </body> </html>
