在前端開發中,UI組件庫能夠提供一些基礎封裝,使得開發者不必每一個頁面或組件都去花費大量時間進行樣式的編寫。本篇文章將主要介紹weui.css中的文本列表組件:weui_cells。
<div class="weui_cell"> <div class="weui_cell_hd"><label class="weui_label">聯系人</label></div> <div class="weui_cell_bd weui_cell_primary"> <p><i class="icon icon-24 weui_icon_success"></i><span style="margin-left: 10px;">李曉明</span></p> </div> < ...更多使用例子可以參照官方文檔, 務必閱讀官方文檔自行進行調試完善。
weui_cells需要放到weui_cell這樣的容器中,每個weui_cell可以包含weui_cell_hd、weui_cell_bd、weui_cell_ft。其中hd、bd、ft分別為頭部、主體、腳部。hd和ft是可選項,需要時添加即可,而bd則是必須的。
在主體中,通過添加圖標和文字的方式進行擴展。比如在上述例子中,我們可以通過添加class為icon icon-24 weui_icon_success和style為margin-left: 10px的兩個p標簽中的內容,使得頁面的顯示更加優美和直觀。
綜上,weui_cells作為weui.css中文本列表功能重要的組件,它能夠極大地提高前端開發人員的工作效率,大大減輕了樣式的開發壓力。
上一篇css選擇最后一個元素a
下一篇word鏈接css樣式表