<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>layui的布局，响应式的</title>
<script src="layui-v2.5.6/layui/layui.js"></script>
<link rel="stylesheet" href="layui-v2.5.6/layui/css/layui.css">
</head>
<style>
/* *{
border: 1px dashed red;
} */
</style>
<body>
<!-- 容器 -->
<div class="layui-container" style="border: 1px dashed red;">
<!-- 列 -->
<div class="layui-row" style="height: 200px;border: 1px dashed green;margin-top: 10px;">
<!-- 列分成12等分 -->
<div class="layui-col-md1" style="height: 200px;border: 1px dashed rgb(2, 77, 2);">111</div>
<div class="layui-col-md1" style="height: 200px;border: 1px dashed rgb(166, 224, 5);">222</div>
<div class="layui-col-md1" style="height: 200px;border: 1px dashed rgb(238, 12, 12);">333</div>
<div class="layui-col-md1" style="height: 200px;border: 1px dashed rgb(45, 7, 114);">444</div>
<div class="layui-col-md1" style="height: 200px;border: 1px dashed rgb(2, 77, 2);">555</div>
<div class="layui-col-md1" style="height: 200px;border: 1px dashed rgb(166, 224, 5);">666</div>
<div class="layui-col-md1" style="height: 200px;border: 1px dashed rgb(238, 12, 12);">777</div>
<div class="layui-col-md1" style="height: 200px;border: 1px dashed rgb(45, 7, 114);">888</div>
<div class="layui-col-md1" style="height: 200px;border: 1px dashed rgb(2, 77, 2);">999</div>
<div class="layui-col-md1" style="height: 200px;border: 1px dashed rgb(166, 224, 5);">101010</div>
<div class="layui-col-md1" style="height: 200px;border: 1px dashed rgb(238, 12, 12);">111111</div>
<div class="layui-col-md1" style="height: 200px;border: 1px dashed rgb(45, 7, 114);">121212</div>
<!-- 列分成3 9 等分 -->
<div class="layui-col-lg3" style="height: 200px;border: 1px dashed rgb(238, 12, 12);background-color: hotpink;"></div>
<div class="layui-col-lg9" style="height: 200px;border: 1px dashed rgb(45, 7, 114);background-color: greenyellow;"></div>
</div>
<!-- 行 -->
<div class="layui-row" style="height: 200px;border: 1px dashed rgb(184, 35, 146);margin-top: 10px;"></div>
<div class="layui-row" style="height: 200px;border: 1px dashed rgb(121, 62, 189);margin-top: 10px;"></div>
<div class="layui-row" style="height: 200px;border: 1px dashed rgb(214, 16, 148);margin-top: 10px;"></div>
<div class="layui-row" style="height: 200px;border: 1px dashed rgb(240, 116, 16);margin-top: 10px;"></div>
<div class="layui-row" style="height: 200px;border: 1px dashed rgb(146, 188, 226);margin-top: 10px;"></div>
</div>
</body>
</html>
扫一扫
872
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
