从WeUI学习到的知识点

WeUI是微信Web服务开发的UI套件, 目前包含12个模块 (Button, Cell, Toast, Dialog, Progress, Msg, Article, ActionSheet, Icons, Panel, Tab, SearchBar).

Demo页面: https://weui.io

Github页面: https://github.com/weui/weui

举例几个简单的模块例子：

一：Cell列表项

带图标，说明的列表项效果图如下：

代码如下：

<div class="weui-cells__title">带图标、说明的列表项</div>
<div class="weui-cells">
   <div class="weui-cell">
        <div class="weui-cell__hd"><img src="img/220.png" alt="" style="width:20px;margin-right:5px;display:block"></div>
	<div class="weui-cell__bd">
	     <p>标题文字</p>
	</div>
             <div class="weui-cell__ft">说明文字</div>
	</div>
   <div class="weui-cell">
        <div class="weui-cell__hd"><img src="img/220.png" alt="" style="width:20px;margin-right:5px;display:block"></div>
	<div class="weui-cell__bd">
	     <p>标题文字</p>
	 </div>
	     <div class="weui-cell__ft">说明文字</div>
	</div>
</div>

二：Button按钮

格式按钮效果图如下：

代码如下：

                <a href="javascript:;" class="weui-btn weui-btn_primary">页面主操作 Normal</a>
		<a href="javascript:;" class="weui-btn weui-btn_disabled weui-btn_primary">页面主操作 Disabled</a>
		<a href="javascript:;" class="weui-btn weui-btn_default">页面次要操作 Normal</a>
		<a href="javascript:;" class="weui-btn weui-btn_disabled weui-btn_default">页面次要操作 Disabled</a>
		<a href="javascript:;" class="weui-btn weui-btn_warn">警告类操作 Normal</a>
		<a href="javascript:;" class="weui-btn weui-btn_disabled weui-btn_warn">警告类操作 Disabled</a>
		
		<div class="button-sp-area" style="margin-top: 20px;">
			<!--镂空按钮weui-btn_plain-xxx-->
			<a href="javascript:;" class="weui-btn weui-btn_plain-default" style="width: 220px;">按钮</a>
			<a href="javascript:;" class="weui-btn weui-btn_plain-primary" style="width: 220px;">按钮</a>
			
			<a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_primary" style="float: left;">按钮</a>
			<a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_default" style="float: right;">按钮</a>
		</div>

注：不知道大家有没有注意到, WeUI的实现中, 很多边框都是用:before, :after绘制的.