012-简单辅助元素
生活随笔
收集整理的這篇文章主要介紹了
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-简单辅助元素的全部內容，希望文章能夠幫你解決所遇到的問題。
