layui 响应式布局 grid-demo grid-demo-bg1 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <title>LayUi框架学习</title>
 8     <link href="./layui/css/layui.css" rel="stylesheet">
 9     <style>
10       .bg_green1{
11         background-color: darkgreen;
12       }
13       .bg_green2{
14         background-color: green;
15       }
16       .ht20{
17         height: 50px;
18         text-align: center;
19         line-height: 50px;
20         border: 1px dashed;
21         color: white;
22       }
23       .bt{
24         height: 30px;
25         line-height: 30px;
26         /* text-align: center; */
27         background-color: #d8d8d8;
28       }
29     </style>
30 </head>
31 <body>
32     <script src="./layui/layui.js"></script>
33 
34       <!-- 2st para begin -->
35     <div class="layui-container">
36       <div class="layui-row layui-col-space5">
37         <div class="layui-col-md5">
38           <div class="layui-row grid-demo">
39             <div class="layui-col-md3 bg_green1 ht20">
40               内部列
41             </div>
42             <div class="layui-col-md9 bg_green2 ht20">
43               内部列
44             </div>
45             <div class="layui-col-md12 bg_green1 ht20">
46               内部列
47             </div>
48           </div>
49         </div>
50         <div class="layui-col-md7">
51           <div class="layui-row grid-demo grid-demo-bg1">
52             <div class="layui-col-md12 bg_green1 ht20">
53               内部列
54             </div>
55             <div class="layui-col-md9  bg_green2 ht20">
56               内部列
57             </div>
58             <div class="layui-col-md3  bg_green1 ht20">
59               内部列
60             </div>
61           </div>
62         </div>
63       </div>
64     
65     </div>  
66     <!-- 2st para begin -->
67 </body>
68 </html>

 

posted @ 2022-05-27 17:00  paoPaoLong_liu  阅读(364)  评论(0)    收藏  举报