基础组件
1.文章
类： weui-article
属性： 上下内边距20px，左右内边距15px，字体大小15px；
后代属性： 最大宽度100%，盒子模型为IE盒子模型，自动换行
（当出现溢出时另起一行，不会在单词内换行）；
指定后代属性：后代为h1标签时，h1的下外边距为0.9em，字体大小为18px，字体粗细为400；
后代为h2标签时，h2的下外边距为0.34em，字体大小为16px，字体粗细为400；
后代为h3标签时，h1的下外边距为0.34em，字体大小为15px，字体粗细为400；
后代为section标签时，section的下外边距为1.5em；
后代为p标签时，p的下外边距为0.8em；
例：
<article class="weui-article">
<h1>大标题</h1>
<section>
<h2 class="title">章标题</h2>
<section>
<h3>1.1 节标题</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<p>
<img src="../weui/dist/example/images/pic_article.png" alt="">
<img src="../weui/dist/example/images/pic_article.png" alt="">
</p>
</section>
<section>
<h3>1.2 节标题</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</section>
</section>
</article>
2.徽章
类： weui-badge
属性： 转为行块级标签，上下内边距0.15em，左右内边距为0.4em，最小宽度为8px，
边框圆角为18px，背景颜色为红色，字体为白色，行高1.2，水平居中，字体大小为12px，垂直居中；
例： <span class="weui-badge">New</span>
3.布局容器
类： 父容器类weui-flex，子容器类weui-flex__item
属性： 转换为弹性盒子；
例：
<div class="weui-flex">
<div class="weui-flex__item">
<div class="placeholder">weui</div>
</div>
<div class="weui-flex__item">
<div class="placeholder">weui</div>
</div>
<div class="weui-flex__item">
<div class="placeholder">weui</div>
</div>
<div class="weui-flex__item">
<div class="placeholder">weui</div>
</div>
</div>
4.页脚
类： weui-footer weui-footer_fixed-bottom
属性： weui-footer类属性：字体颜色为灰色，字体大小14px，文本水平居中；
weui-footer_fixed-bottom类属性：固定定位，距离底部0.52em；
后代属性： 后代为a标签时，字体颜色为淡蓝色；
例： <div class="weui-footer weui-footer_fixed-bottom">
<p class="weui-footer__links">
<a href="javascript:home();" class="weui-footer__link">WeUI首页</a>
</p>
<p class="weui-footer__text">Copyright © 2008-2016 weui.io</p>
</div>
5.九宫格
类： 父容器类weui-grids，子容器类weui-grid
属性： weui-grids类属性：相对定位，溢出隐藏；
weui-grid类属性：相对定位，左浮动，上下内边距20px，左右内边距10px，宽度为33.3%，IE盒子模型；
例： <div class="weui-grids">
<a href="javascript:;" class="weui-grid">
<div class="weui-grid__icon">
<img src="../weui/dist/example/images/icon_tabbar.png" alt="">
</div>
<p class="weui-grid__label">Grid</p>
</a>
<a href="javascript:;" class="weui-grid">
<div class="weui-grid__icon">
<img src="../weui/dist/example/images/icon_tabbar.png" alt="">
</div>
<p class="weui-grid__label">Grid</p>
</a>
<a href="javascript:;" class="weui-grid">
<div class="weui-grid__icon">
<img src="../weui/dist/example/images/icon_tabbar.png" alt="">
</div>
<p class="weui-grid__label">Grid</p>
</a>
<a href="javascript:;" class="weui-grid">
<div class="weui-grid__icon">
<img src="../weui/dist/example/images/icon_tabbar.png" alt="">
</div>
<p class="weui-grid__label">Grid</p>
</a>
<a href="javascript:;" class="weui-grid">
<div class="weui-grid__icon">
<img src="../weui/dist/example/images/icon_tabbar.png" alt="">
</div>
<p class="weui-grid__label">Grid</p>
</a>
<a href="javascript:;" class="weui-grid">
<div class="weui-grid__icon">
<img src="../weui/dist/example/images/icon_tabbar.png" alt="">
</div>
<p class="weui-grid__label">Grid</p>
</a>
<a href="javascript:;" class="weui-grid">
<div class="weui-grid__icon">
<img src="../weui/dist/example/images/icon_tabbar.png" alt="">
</div>
<p class="weui-grid__label">Grid</p>
</a>
<a href="javascript:;" class="weui-grid">
<div class="weui-grid__icon">
<img src="../weui/dist/example/images/icon_tabbar.png" alt="">
</div>
<p class="weui-grid__label">Grid</p>
</a>
<a href="javascript:;" class="weui-grid">
<div class="weui-grid__icon">
<img src="../weui/dist/example/images/icon_tabbar.png" alt="">
</div>
<p class="weui-grid__label">Grid</p>
</a>
</div>
6.图标
成功： weui-icon-success weui-icon_msg
提示： weui-icon-info weui-icon_msg
普通警告： weui-icon-warn weui-icon_msg-primary
强烈警告： weui-icon-warn weui-icon_msg
等待： weui-icon-waiting weui-icon_msg
小图标： weui-icon-success-no-circle
weui-icon-circle
weui-icon-warn
weui-icon-download
weui-icon-info-circle
weui-icon-cancel
weui-icon-search
7.面板
例：
<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="" alt="">
</div>
<div class="weui-media-box__bd">
<h4 class="weui-media-box__title">标题一</h4>
<p class="weui-media-box__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>
</div>
</a>
</div>
<div class="weui-panel__ft">
<a href="javascript:void(0);" class="weui-cell weui-cell_access weui-cell_link">
<div class="weui-cell__bd">查看更多</div>
<span class="weui-cell__ft"></span>
</a>
</div>
</div>
<div class="weui-panel weui-panel_access">
<div class="weui-panel__hd">文字组合列表</div>
<div class="weui-panel__bd">
<div class="weui-media-box weui-media-box_text">
<h4 class="weui-media-box__title">标题一</h4>
<p class="weui-media-box__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>
</div>
</div>
<div class="weui-panel__ft">
<a href="javascript:void(0);" class="weui-cell weui-cell_access weui-cell_link">
<div class="weui-cell__bd">查看更多</div>
<span class="weui-cell__ft"></span>
</a>
</div>
</div>
<div class="weui-panel">
<div class="weui-panel__hd">小图文组合列表</div>
<div class="weui-panel__bd">
<div class="weui-media-box weui-media-box_small-appmsg">
<div class="weui-cells">
<a class="weui-cell weui-cell_access" href="javascript:;">
<div class="weui-cell__hd"><img src="" alt="" style="width:20px;margin-right:5px;display:block"></div>
<div class="weui-cell__bd weui-cell_primary">
<p>文字标题</p>
</div>
<span class="weui-cell__ft"></span>
</a>
</div>
</div>
</div>
</div>
<div class="weui-panel">
<div class="weui-panel__hd">文字列表附来源</div>
<div class="weui-panel__bd">
<div class="weui-media-box weui-media-box_text">
<h4 class="weui-media-box__title">标题一</h4>
<p class="weui-media-box__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>
<ul class="weui-media-box__info">
<li class="weui-media-box__info__meta">文字来源</li>
<li class="weui-media-box__info__meta">时间</li>
<li class="weui-media-box__info__meta weui-media-box__info__meta_extra">其它信息</li>
</ul>
</div>
</div>
</div>
8.表单预览
例：
<div class="weui-form-preview">
<div class="weui-form-preview__hd">
<div class="weui-form-preview__item">
<label class="weui-form-preview__label">付款金额</label>
<em class="weui-form-preview__value">¥2400.00</em>
</div>
</div>
<div class="weui-form-preview__bd">
<div class="weui-form-preview__item">
<label class="weui-form-preview__label">商品</label>
<span class="weui-form-preview__value">电动打蛋机</span>
</div>
<div class="weui-form-preview__item">
<label class="weui-form-preview__label">标题标题</label>
<span class="weui-form-preview__value">名字名字名字</span>
</div>
<div class="weui-form-preview__item">
<label class="weui-form-preview__label">标题标题</label>
<span class="weui-form-preview__value">很长很长的名字很长很长的名字很长很长的名字很长很长的名字很长很长的名字</span>
</div>
</div>
<div class="weui-form-preview__ft">
<a class="weui-form-preview__btn weui-form-preview__btn_primary" href="javascript:">操作</a>
</div>
</div>
<br>
<div class="weui-form-preview">
<div class="weui-form-preview__hd">
<label class="weui-form-preview__label">付款金额</label>
<em class="weui-form-preview__value">¥2400.00</em>
</div>
<div class="weui-form-preview__bd">
<div class="weui-form-preview__item">
<label class="weui-form-preview__label">商品</label>
<span class="weui-form-preview__value">电动打蛋机</span>
</div>
<div class="weui-form-preview__item">
<label class="weui-form-preview__label">标题标题</label>
<span class="weui-form-preview__value">名字名字名字</span>
</div>
<div class="weui-form-preview__item">
<label class="weui-form-preview__label">标题标题</label>
<span class="weui-form-preview__value">很长很长的名字很长很长的名字很长很长的名字很长很长的名字很长很长的名字</span>
</div>
</div>
<div class="weui-form-preview__ft">
<a class="weui-form-preview__btn weui-form-preview__btn_default" href="javascript:">辅助操作</a>
<button type="submit" class="weui-form-preview__btn weui-form-preview__btn_primary" href="javascript:">操作</button>
</div>
</div>
9.进度条
例：
<div class="weui-progress">
<div class="weui-progress__bar">
<div class="weui-progress__inner-bar js_progress" style="width: 0%;"></div>
</div>
<a href="javascript:;" class="weui-progress__opr">
<i class="weui-icon-cancel"></i>
</a>
</div>
<br>
<div class="weui-progress">
<div class="weui-progress__bar">
<div class="weui-progress__inner-bar js_progress" style="width: 50%;"></div>
</div>
<a href="javascript:;" class="weui-progress__opr">
<i class="weui-icon-cancel"></i>
</a>
</div>
<br>
<div class="weui-progress">
<div class="weui-progress__bar">
<div class="weui-progress__inner-bar js_progress" style="width: 80%;"></div>
</div>
<a href="javascript:;" class="weui-progress__opr">
<i class="weui-icon-cancel"></i>
</a>
</div>
<div class="weui-btn-area">
<a href="javascript:;" class="weui-btn weui-btn_primary" id="btnUpload">上传</a>
</div>