h5学习笔记：weui

来源：互联网发布：阿里云app备案编辑：程序博客网时间：2024/04/30 21:51

这段时间一直接触了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><html><head>  <meta charset="utf-8">  <meta name="viewport" content="width=device-width">  <link href="http://cdn.bootcss.com/weui/1.1.1/style/weui.css" rel="stylesheet">   <title>微信案例</title></head><style>.weui-media-box_appmsg .weui-media-box__hd {    margin-right: .8em;    width: 80px;    line-height: 80px;}.weui-media-box {    padding: 10px;}</style><body>        <div class="weui-panel weui-panel_access">            <div class="weui-panel__hd">体育热点</div>            <div class="weui-panel__bd">                <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">                    <div class="weui-media-box__hd">                        <img class="weui-media-box__thumb" src="https://ks.sinaimg.cn/n/sports/transform/20170218/yxCN-fyarrcc7809590.jpg/w120h90z1l50t1657.jpg">                    </div>                    <div class="weui-media-box__bd">                        <p>血帽库班+霸气补篮!吴亦凡3+3+1+1变全能特工</p>                    </div>                </a>                <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">                    <div class="weui-media-box__hd">                        <img class="weui-media-box__thumb" src="https://ks.sinaimg.cn/n/sports/transform/20170218/v0-a-fyarrcf4587195.png/w120h90z1l50t1b1f.jpg"/>                    </div>                    <div class="weui-media-box__bd">                        <p>亚洲步耍传奇!蒋劲夫不怕虎 请叫他中国樱木</p>                    </div>                </a>                 <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">                    <div class="weui-media-box__hd">                        <img class="weui-media-box__thumb" src="https://ks.sinaimg.cn/n/sports/transform/20170218/57KD-fyarrcc7861071.jpg/w120h90z1l50t19c6.jpg"/>                    </div>                    <div class="weui-media-box__bd">                        <p>浙江女排完胜四川时隔3年进决赛 苏浙将演终极PK</p>                    </div>                </a>                 <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">                    <div class="weui-media-box__hd">                        <img class="weui-media-box__thumb" src="https://ks.sinaimg.cn/n/sports/transform/20170218/BI38-fyarzzv3129755.jpg/w120h90z1l50t135b.jpg"/>                    </div>                    <div class="weui-media-box__bd">                        <p>曼联传奇力挺温格 怒怼倒温派阿森纳球迷为白痴</p>                    </div>                </a>                 <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">                    <div class="weui-media-box__hd">                        <img class="weui-media-box__thumb" src="https://ks.sinaimg.cn/n/sports/transform/20170218/BI38-fyarzzv3129755.jpg/w120h90z1l50t135b.jpg"/>                    </div>                    <div class="weui-media-box__bd">                        <p>曝中超3200万镑年薪报价鲁尼 曼联穆帅无奈放人</p>                    </div>                </a>                 <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">                    <div class="weui-media-box__hd">                        <img class="weui-media-box__thumb" src="https://ks.sinaimg.cn/n/sports/transform/20170218/udGB-fyarrcc7866835.jpg/w120h90z1l50t1561.jpg"/>                    </div>                    <div class="weui-media-box__bd">                        <p>团体亚锦赛国羽负日本无缘决赛 张楠取1分难救主</p>                    </div>                </a>            </div> </div></body></html>

生成一个效果如图

这里写图片描述

这种也是基础列表功能。默认的图案图标较小，所以还需要对其进行修改。并不是weui提供的样式都适合。还是需要修改。

0 0