HTML5 weui使用笔记

2020-04-25 07:44:53易采站长站整理

按钮

这里写图片描述


<a href="javascript:;" class="weui_btn weui_btn_primary">按钮-确定-可用</a>
<a href="javascript:;" class="weui_btn weui_btn_disabled weui_btn_primary">按钮-确定-不可用</a>
<a href="javascript:;" class="weui_btn weui_btn_warn">按钮-警告-可用</a>
<a href="javascript:;" class="weui_btn weui_btn_disabled weui_btn_warn">按钮-警告-不可用</a>
<a href="javascript:;" class="weui_btn weui_btn_default">按钮-取消-可用</a>
<a href="javascript:;" class="weui_btn weui_btn_disabled weui_btn_default">按钮-取消-不可用</a>
<a href="javascript:;" class="weui_btn weui_btn_plain_default">按钮-镂空-取消</a>
<a href="javascript:;" class="weui_btn weui_btn_plain_primary">按钮-镂空-确定</a>
<a href="javascript:;" class="weui_btn weui_btn_mini weui_btn_primary">按钮-迷你-确定</a>
<a href="javascript:;" class="weui_btn weui_btn_mini weui_btn_default">按钮-迷你-取消</a>

列表项

这里写图片描述


<div class="weui_cells">
<div class="weui_cell">
<div class="weui_cell_bd weui_cell_primary">
<p>带说明的列表项</p>
</div>
<div class="weui_cell_ft">说明文字</div>
</div>
</div>
<div class="weui_cells weui_cells_access">
<a class="weui_cell" href="javascript:;">
<div class="weui_cell_hd">
<img src="" alt="icon" style="width:20px;margin-right:5px;display:block">
</div>
<div class="weui_cell_bd weui_cell_primary">
<p>带图标、说明、跳转的列表项</p>
</div>
<div class="weui_cell_ft">说明文字</div>
</a>
<a class="weui_cell" href="javascript:;">
<div class="weui_cell_bd weui_cell_primary">
<p>说明、跳转的列表项</p>
</div>
<div class="weui_cell_ft">说明文字</div>
</a>
</div>

单选列表项
 

这里写图片描述