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/

layui框架学习（13：辅助元素）相关推荐

layui框架学习（4：导航）
layui官网教程采用html中的无序列表和定义列表来实现导航样式(文章最后还有个关于导航所用元素的补充说明),主要包括水平导航.垂直/侧边导航,同时还支持用span和a元素实现面包屑导航样式.导 ...
layui框架学习（1：布局）
Layui是开源的 Web UI 组件库,虽然目前已不算是最主流的前端框架,但很多开源项目都采用Layui设计页面,为了学习相关的项目,同时也为了掌握Layui的基本用法,特此基于B站的Layui ...
layui框架学习（10：时间线）
时间线,英文timeline,也叫时光轴.时间轴,是指以时间为记录方式的一种网络布局形式,其形式之一为下图所示(示例图来自参考文献5). Layui官网教程中的更新日志页面也用了时间线样式,如 ...
layui框架学习（11：徽章）
应用程序有新增内容.未读消息时,会在按钮或菜单中添加红点或带数字的点状或方状图形,用户看到就知道有新内容,如下图所示QQ邮箱的截图,会通过红色圆点或带NEW的方框提醒用户有新内容可以查看. C ...
layui框架学习（29：滑块模块）
Layui中的滑块模块slider支持用户通过移动滑块从一系列的值中进行选择,比起手输数值,使用滑块的视觉效果更直观.slider滑块模块的基本用法及效果如下所示: <div id=&quo ...
layUi框架入门篇（一）
layUi框架学习笔记(一) 整理人:LF 时间:2017-9-1 表示今天第一次听说了layui的前端框架,上网搜了很多的资料和图示,对比了一下自己辛辛苦苦写了十天的网页样式,最后不得不感叹前端框架 ...
前端学习之LayUi框架基础
今天笔者学习了LayUi框架的一些基础内容,总体来说,LayUi框架比BootStrap框架更倾向于后台的搭建和使用,样式更加多样,说明也对国人更加友好,毕竟是国人开发的框架嘛~废话不多少,开始介绍. ...
jQuery框架学习第四天：使用jQuery操作元素的属性与样式
jQuery框架学习第一天:开始认识jQuery jQuery框架学习第二天:jQuery中万能的选择器 jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQu ...
Layui页面元素之选项卡、进度条、面板、表格、徽章、时间线、辅助元素
Layui页面元素之选项卡.进度条.面板.表格 .徽章.时间线.辅助元素效果 demo 选项卡.面板.时间线很重要效果 demo <!DOCTYPE html> <html> ...

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

layui框架学习（13：辅助元素）相关推荐

最新文章

热门文章