頁(yè)面元素之引用房轿、字段集等

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>

效果圖:

image.png

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>

效果圖:


image.png

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">

效果圖:

image.png

image.png

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>

image.png

結(jié)語(yǔ):少年辛苦終身事,莫向光陰惰寸功不恭。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末叶雹,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子换吧,更是在濱河造成了極大的恐慌折晦,老刑警劉巖,帶你破解...
    沈念sama閱讀 217,277評(píng)論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件式散,死亡現(xiàn)場(chǎng)離奇詭異筋遭,居然都是意外死亡打颤,警方通過查閱死者的電腦和手機(jī)暴拄,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,689評(píng)論 3 393
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)编饺,“玉大人乖篷,你說(shuō)我怎么就攤上這事⊥盖遥” “怎么了撕蔼?”我有些...
    開封第一講書人閱讀 163,624評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)秽誊。 經(jīng)常有香客問我鲸沮,道長(zhǎng),這世上最難降的妖魔是什么锅论? 我笑而不...
    開封第一講書人閱讀 58,356評(píng)論 1 293
  • 正文 為了忘掉前任讼溺,我火速辦了婚禮,結(jié)果婚禮上最易,老公的妹妹穿的比我還像新娘怒坯。我一直安慰自己炫狱,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,402評(píng)論 6 392
  • 文/花漫 我一把揭開白布剔猿。 她就那樣靜靜地躺著视译,像睡著了一般。 火紅的嫁衣襯著肌膚如雪归敬。 梳的紋絲不亂的頭發(fā)上酷含,一...
    開封第一講書人閱讀 51,292評(píng)論 1 301
  • 那天,我揣著相機(jī)與錄音汪茧,去河邊找鬼第美。 笑死,一個(gè)胖子當(dāng)著我的面吹牛陆爽,可吹牛的內(nèi)容都是我干的什往。 我是一名探鬼主播,決...
    沈念sama閱讀 40,135評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼慌闭,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼别威!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起驴剔,我...
    開封第一講書人閱讀 38,992評(píng)論 0 275
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤省古,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后丧失,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體豺妓,經(jīng)...
    沈念sama閱讀 45,429評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,636評(píng)論 3 334
  • 正文 我和宋清朗相戀三年布讹,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了琳拭。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,785評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡描验,死狀恐怖白嘁,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情膘流,我是刑警寧澤絮缅,帶...
    沈念sama閱讀 35,492評(píng)論 5 345
  • 正文 年R本政府宣布,位于F島的核電站呼股,受9級(jí)特大地震影響耕魄,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜彭谁,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,092評(píng)論 3 328
  • 文/蒙蒙 一吸奴、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦奄抽、人聲如沸蔼两。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,723評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)额划。三九已至,卻和暖如春档泽,著一層夾襖步出監(jiān)牢的瞬間俊戳,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,858評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工馆匿, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留抑胎,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 47,891評(píng)論 2 370
  • 正文 我出身青樓渐北,卻偏偏與公主長(zhǎng)得像阿逃,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子赃蛛,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,713評(píng)論 2 354

推薦閱讀更多精彩內(nèi)容

  • 1恃锉、簡(jiǎn)介 面板通常指一個(gè)獨(dú)立的容器,里面可以放你喜歡的東西(文字呕臂、圖片破托、表單、表格等等)結(jié)合柵格可以做類似購(gòu)物網(wǎng)站...
    小疏林er閱讀 2,320評(píng)論 0 2
  • 1歧蒋、基本使用 徽章通常作為修飾性元素土砂,與其他元素、模塊組合使用(導(dǎo)航谜洽、選項(xiàng)卡等等)萝映,起到新消息提醒、計(jì)數(shù)等作用褥琐。l...
    小疏林er閱讀 1,292評(píng)論 0 2
  • 1锌俱、導(dǎo)航欄(菜單) 導(dǎo)航一般指頁(yè)面引導(dǎo)性頻道集合晤郑,多以菜單的形式呈現(xiàn)敌呈,可應(yīng)用于頭部和側(cè)邊,是整個(gè)網(wǎng)頁(yè)畫龍點(diǎn)晴般的存...
    小疏林er閱讀 481評(píng)論 0 2
  • 1造寝、使用 默認(rèn)樣式(1). 首先要進(jìn)行模塊加載 layui.use(['element'],f...
    小疏林er閱讀 1,391評(píng)論 0 2
  • 1磕洪、表格簡(jiǎn)介 表格是十分常用的頁(yè)面元素,尤其是做后臺(tái)管理系統(tǒng)的時(shí)候诫龙,需要顯示出管理員需要的信息析显,以表格形式顯示時(shí),...
    小疏林er閱讀 870評(píng)論 0 6