layui 响应式布局 grid-demo grid-demo-bg1
最编程
2024-03-18 09:32:25
...
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>