行易软件技术团队

少谈技术,多谈应用

博客园 首页 新随笔 联系 订阅 管理
  51 Posts :: 2 Stories :: 1 Comments :: 0 Trackbacks

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>

 

posted on 2019-04-08 16:11 行易软件技术团队 阅读(...) 评论(...) 编辑 收藏