當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

012-简单辅助元素

發(fā)布時間：2025/4/17 编程问答 31 豆豆

生活随笔收集整理的這篇文章主要介紹了 012-简单辅助元素小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

1. 本篇主要集中羅列頁面中的一些簡單輔助元素, 如: 引用塊、字段集區(qū)塊、橫線等等, 這些元素都無需依賴任何模塊。

2. 引用區(qū)塊

2.1. layui目前內(nèi)置了上述兩種風(fēng)格引用區(qū)塊:

3. 字段集區(qū)塊

3.1. 字段集區(qū)塊同樣內(nèi)置了兩種風(fēng)格, 默認(rèn)風(fēng)格和橫線風(fēng)格:

<fieldset class="layui-elem-field"><legend>字段集區(qū)塊 - 默認(rèn)風(fēng)格</legend><div class="layui-field-box">內(nèi)容區(qū)域</div> </fieldset><fieldset class="layui-elem-field layui-field-title"><legend>字段集區(qū)塊 - 橫線風(fēng)格</legend><div class="layui-field-box">內(nèi)容區(qū)域<br />你可以把它看作是一個有標(biāo)題的橫線</div> </fieldset>

4. 橫線

默認(rèn)分割線 <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>引用區(qū)塊</h2><blockquote class="layui-elem-quote">引用區(qū)域的文字</blockquote><blockquote class="layui-elem-quote layui-quote-nm">引用區(qū)域的文字</blockquote><h2>字段集區(qū)塊</h2><fieldset class="layui-elem-field"><legend>字段集區(qū)塊 - 默認(rèn)風(fēng)格</legend><div class="layui-field-box">內(nèi)容區(qū)域</div></fieldset><fieldset class="layui-elem-field layui-field-title"><legend>字段集區(qū)塊 - 橫線風(fēng)格</legend><div class="layui-field-box">內(nèi)容區(qū)域<br />你可以把它看作是一個有標(biāo)題的橫線</div></fieldset><h2>橫線</h2>默認(rèn)分割線<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. 效果圖

總結(jié)

以上是生活随笔為你收集整理的012-简单辅助元素的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。