012-简单辅助元素

1. 本篇主要集中罗列页面中的一些简单辅助元素, 如: 引用块、字段集区块、横线等等, 这些元素都无需依赖任何模块。

2. 引用区块

2.1. layui目前内置了上述两种风格引用区块:

<blockquote class="layui-elem-quote">引用区域的文字</blockquote>
<blockquote class="layui-elem-quote layui-quote-nm">引用区域的文字</blockquote>

3. 字段集区块

3.1. 字段集区块同样内置了两种风格, 默认风格和横线风格:

<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">
    	内容区域<br />
    	你可以把它看作是一个有标题的横线
  	</div>
</fieldset>

4. 横线

默认分割线
<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" />

5. 例子

5.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>简单辅助元素 - layui</title>

		<link rel="stylesheet" href="layui/css/layui.css">
		<script type="text/javascript" src="layui/layui.js"></script>
	</head>
	<body>
		<h2>引用区块</h2>
		<blockquote class="layui-elem-quote">引用区域的文字</blockquote>
		<blockquote class="layui-elem-quote layui-quote-nm">引用区域的文字</blockquote>
		
		<h2>字段集区块</h2>
		<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">
		    	内容区域<br />
		    	你可以把它看作是一个有标题的横线
		  	</div>
		</fieldset>

		<h2>横线</h2>
		默认分割线
		<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" />
	</body>
</html>

5.2. 效果图

猜你喜欢