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. 效果图

012-简单辅助元素相关推荐

layui-简单辅助元素 - 页面元素
本篇主要集中罗列页面中的一些简单辅助元素,如:引用块.字段集区块.横线等等,这些元素都无需依赖任何模块 <!DOCTYPE html> <html><head>&l ...
layui框架学习（13：辅助元素）
Layui官网教程中页面元素的大部分内容都过了一遍,就剩下表单和辅助元素,由于表单的内容比较多,准备先把辅助元素的内容先学习了,再花几篇文章学习并记录表单样式的设置方式. 辅助元素主要包括引用 ...
学习Python必刷的100道经典实战练习真题（第010集怎样对简单列表元素排序-第011集怎样实现学生成绩排序）
学习Python必刷的100道经典实战练习真题(第010集怎样对简单列表元素排序-第011集怎样实现学生成绩排序) 一,第010集怎样对简单列表元素排序二,第011集怎样实现学生成绩排序来 ...
matplotlib绘图3——图标辅助元素的定制
1.图标常用的辅助元素 2.设置坐标轴的标签.刻度范围和刻度标签 3.添加标题和图例 4.显示网格 5.添加参考线和参考区域 6.添加注释文本 1.图标常用的辅助元素 2.设置坐标轴的标签.刻度范围和 ...
day03、图表辅助元素的定制
3.1认识图表常用的辅助元素坐标轴:分为单坐标轴和双坐标轴,单坐标轴按不同的方向又可分为水平坐标轴和垂直坐标轴标题:表示图表的说明性文本图例:用于指出图表中各组图形采用的标识方式网格:从坐标轴 ...
Layui页面元素之选项卡、进度条、面板、表格、徽章、时间线、辅助元素
Layui页面元素之选项卡.进度条.面板.表格 .徽章.时间线.辅助元素效果 demo 选项卡.面板.时间线很重要效果 demo <!DOCTYPE html> <html> ...
升级版NanoDet-Plus来了 | 简单辅助模块加速训练收敛，精度大幅提升
点击上方"迈微AI研习社",选择"星标★"公众号重磅干货,第一时间送达作者丨RangiLyu@知乎(已授权) 来源丨https://zhuanlan.zhi ...
升级版NanoDet-Plus来了！简单辅助模块加速训练收敛，精度大幅提升！
作者 RangiLyu@知乎编辑极市平台来源 https://zhuanlan.zhihu.com/p/449912627 先上性能对比: NanoDet-Plus与其他轻量级检测模型性能对比 ...
前端基础12：递归调用，快速排序和简单DOM元素操作
递归调用递归调用,方法自己调用自己(重复执行方法中的逻辑) 1.在方法内部调用自己的方法写在return 2.设置边界条件,让递归调用停下来 function fn(n) {if(n == 1){r ...

012-简单辅助元素

012-简单辅助元素相关推荐

最新文章

热门文章