这段时间一直接触了weui,weui的效果样式和微信能够相互融合。但微信这个css库,还比较缺组件,单独这样用。不过好在是github已经开源了十分多的库。weui在1.0的版本后大改过一次,命名方式修改了所以不再兼容。这也是开源的一个坑。用了一段时间发现了一些命名上的规律,用起来对这个样式有点意思。
我们经常在weui样式看到hd ,bd, ft,按我猜测这个方式和网页中头,身体,脚相似。即
hd 是header的缩写
bd 是body的缩写
ft 是footer的缩写
<a href="javascript:void(0);" class="weui_media_box weui_media_appmsg"> <div class="weui_media_hd"> <img class="weui_media_appmsg_thumb" src=" " alt=""> </div> <div class="weui_media_bd"> <h4 class="weui_media_title">标题二</h4> <p class="weui_media_desc">由各种物质组成的巨型球状天体,叫做星球。星球有一定的形状,有自己的运行轨道。</p> </div></a> <a class="weui_panel_ft" href="javascript:void(0);">查看更多</a>
从这个官网案例可以看到,weui_media_hd ,weui_media_bd, weui_panel_ft 这些命名
这里呈现的案例正好是猜测的接近,有头,有身,有脚。按这种记忆方法,写起来会记得起基础 的结构用法。
下面,根据这个样式做一个样式案例。参考新浪的新闻,布局一下效果。
<!DOCTYPE html>&l