1、引用區(qū)塊
引用區(qū)塊在使用頻率不高所森,樣子就類似于現(xiàn)在這個(gè)框框囱持,一共有兩種風(fēng)格,一個(gè)是綠色一個(gè)是灰色焕济。
使用非常簡(jiǎn)單纷妆,<blockquote></blockquote>標(biāo)簽上添加相應(yīng)的class即可。
- 綠色:
class="layui-elem-quote "
- 灰色:
class="layui-elem-quote layui-quote-nm"
<blockquote class="layui-elem-quote ">這里頭寫啥都行晴弃!</blockquote> <br /> <blockquote class="layui-elem-quote layui-quote-nm">這個(gè)跟上面的顏色不一樣掩幢,也寫啥都行。</blockquote>
效果圖:
2肝匆、字段集區(qū)塊
字段集區(qū)塊也有兩種風(fēng)格粒蜈,樣式類似于帶標(biāo)題的面板。
- 默認(rèn)風(fēng)格:
class="layui-elem-field"
- 橫線風(fēng)格:
class="layui-elem-field layui-field-title"
旗国,可以當(dāng)帶標(biāo)題的分割線使用枯怖。<fieldset class="layui-elem-field"> <legend>默認(rèn)風(fēng)格,標(biāo)題區(qū)</legend> <div class="layui-field-box"> 樂意寫啥寫啥 </div> </fieldset> <br /> <fieldset class="layui-elem-field layui-field-title"> <legend>橫線風(fēng)格能曾,標(biāo)題區(qū)</legend> <div class="layui-field-box"> 樂意寫啥寫啥 </div> </fieldset>
效果圖:
3度硝、分割線
是默認(rèn)的分割線(灰色)肿轨,無(wú)需添加class,開頭導(dǎo)入layui.css文件即可蕊程。- <hr class="layui-bg-color"> 添加主題色class即可更改顏色椒袍。
- 未引入layui.css文件時(shí),分割線是帶陰影的灰條條藻茂,比較丑驹暑。
默認(rèn)分割線 <hr> 紅色分割線 <hr class="layui-bg-red">
效果圖:
4、頭像
圖片這個(gè)元素在導(dǎo)航欄中有提及到辨赐,但是我感覺他在其他地方也可以當(dāng)作用戶頭像使用优俘,效果是將正常照片、圖片顯示成圓形的圖片(并未裁剪)掀序。
使用:對(duì)<img>標(biāo)簽添加class="layui-nav-img"即可帆焕。
<img src="圖片路徑" class="layui-nav-img">
<a href=""><img src="img/朦朧.jpg" class="layui-nav-img">小疏林er</a>