layui框架学习（13：辅助元素）

  Layui官网教程中页面元素的大部分内容都过了一遍，就剩下表单和辅助元素，由于表单的内容比较多，准备先把辅助元素的内容先学习了，再花几篇文章学习并记录表单样式的设置方式。

  辅助元素主要包括引用块、字段集区块、横线等三类元素的样式设置。

  首先是引用块。blockquote元素定义摘自另一个源的块引用。Layui中支持两种预设类以定义其样式，一种为layui-elem-quote，另一种为layui-elem-quote layui-quote-nm。前面两种预设类及未添加预设类的blockquote的样式差别如下所示：

<div style="width: 400px;">
		<blockquote>
		有一分热，发一分光，就令萤火一般，也可以在黑暗里发一点光，不必等候炬火，此后如竟没有炬火，我便是唯一的光。
		 <br>——鲁迅
		</blockquote>
		<blockquote class="layui-elem-quote">
		有一分热，发一分光，就令萤火一般，也可以在黑暗里发一点光，不必等候炬火，此后如竟没有炬火，我便是唯一的光。
		 <br>——鲁迅
		</blockquote>
		<br />
		<blockquote class="layui-elem-quote layui-quote-nm">
		有一分热，发一分光，就令萤火一般，也可以在黑暗里发一点光，不必等候炬火，此后如竟没有炬火，我便是唯一的光。
		 <br>——鲁迅
		</blockquote>
	</div>
           

  接着是字段集区块。fieldset可以将相关元素分组，并在相关元素周围绘制边框。Layui支持对字段集区块设置两种风格的样式：默认风格和一般风格，前者采用预设类layui-elem-field，后者采用预设类layui-elem-field layui-field-title，同时字段集区块内部包含两部分内容，legend元素保存的内容相当于分组名称，而区块内部的内容包裹在div元素内，且其使用预设类layui-field-box标记为内容区域。前面两种预设类及未添加预设类的fieldset的样式差别如下所示：

<div style="width: 400px;">
		<fieldset style="margin-top: 30px;">
		  <legend>引用区块 - 未添加layui预设类</legend>
		  <div class="layui-field-box">
		      有一分热，发一分光，就令萤火一般，也可以在黑暗里发一点光，不必等候炬火，此后如竟没有炬火，我便是唯一的光。
		  </div>
		</fieldset>	
		<fieldset class="layui-elem-field" style="margin-top: 30px;">
		  <legend>引用区块 - 默认风格</legend>
		  <div class="layui-field-box">
		      有一分热，发一分光，就令萤火一般，也可以在黑暗里发一点光，不必等候炬火，此后如竟没有炬火，我便是唯一的光。
		  </div>
		</fieldset>	
		<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
		  <legend>引用区块 - 一般风格</legend>
		  <div class="layui-field-box">
		      有一分热，发一分光，就令萤火一般，也可以在黑暗里发一点光，不必等候炬火，此后如竟没有炬火，我便是唯一的光。
		  </div>
		</fieldset>
	</div>
           

  最后是横线，使用的是hr元素，通过使用不同的layui边框颜色预设类，可以得到不同颜色的横线，在此不再测试，有兴趣的可以直接看Layui官网教程中的示例。

  

  

  

  

  

  

  

  

  

  

  

参考文献：

[1]B站：layui框架精讲全套视频教程

[2]https://layui.gitee.io/v2/docs/

[3]https://layui.gitee.io/v2/demo/

[4]https://github.com/layui/layui/