《Layui宇宙版教程》提供2000人的QQ群进行交流学习，QQ群号：1046961650，或通过手机QQ扫描二维码进入：
1.16 辅助
本篇主要集中罗列页面中的一些简单辅助元素，如：引用块、字段集区块、横线等等，这些元素都无需依赖任何模块。
1.16.1 引用区块
示例代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>layout 后台大布局 - Layui</title>
<link rel="stylesheet" href="layui/css/layui.css">
<script src="js/jquery3.5.1.js"></script>
</head>
<body>
<blockquote class="layui-elem-quote">引用区域的文字</blockquote>
<blockquote class="layui-elem-quote layui-quote-nm">引用区域的文字</blockquote>
<script src="layui/layui.all.js"></script>
</body>
</html>
运行结果如图1-xx所示。
目前内置了上述两种风格。
1.16.2 字段集区块
示例代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>layout 后台大布局 - Layui</title>
<link rel="stylesheet" href="layui/css/layui.css">
<script src="js/jquery3.5.1.js"></script>
</head>
<body>
<fieldset class="layui-elem-field">
<legend>字段集区块 - 默认风格</legend>
<div class="layui-field-box">
内容区域
</div>
</fieldset>
<fieldset class="layui-elem-field layui-field-title">
<legend>字段集区块 - 横线风格</legend>
<div class="layui-field-box">
内容区域
</div>
</fieldset>
你可以把它看作是一个有标题的横线
<script src="layui/layui.all.js"></script>
</body>
</html>
运行结果如图1-xx所示。
1.16.3 横线
示例代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>layout 后台大布局 - Layui</title>
<link rel="stylesheet" href="layui/css/layui.css">
<script src="js/jquery3.5.1.js"></script>
</head>
<body>
默认分割线
<hr>
赤色分割线
<hr class="layui-bg-red">
橙色分割线
<hr class="layui-bg-orange">
墨绿分割线
<hr class="layui-bg-green">
青色分割线
<hr class="layui-bg-cyan">
蓝色分割线
<hr class="layui-bg-blue">
黑色分割线
<hr class="layui-bg-black">
灰色分割线
<hr class="layui-bg-gray">
<script src="layui/layui.all.js"></script>
</body>
</html>
运行结果如图1-xx所示。
433
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
