您的位置：首页 > 产品设计 > UI/UE

h5学习笔记：weui

2017-02-18 21:10 190 查看

这段时间一直接触了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提供的样式都适合。还是需要修改。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航