模仿制作:
今天制作的是一个提交表单,直接从https://weui.io/#input页面查看源码,搜索关键字,查看需要的源码片段。
引用官网最新版:GitHub中的最新版1.13
<link rel="stylesheet" type="text/css" href="css/weui.css">
效果图:
实例代码:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/weui.css">
</head>
<body>
<div class="weui-cells__title">新增会员</div>
<div class="weui-cell">
<div class="weui-cell__hd"><label class="weui-label">姓名</label></div>
<div class="weui-cell__bd">
<input class="weui-input" type="text" placeholder="请输入姓名"/>
</div>
</div>
<div class="weui-cell weui-cell_select weui-cell_select-after">
<div class="weui-cell__hd">
<label for="" class="weui-label">性别</label>
</div>
<div class="weui-cell__bd">
<select class="weui-select" name="select2">
<option value="1">男</option>
<option value="2">女</option>
</select>
</div>
</div>
<div class="weui-cell">
<div class="weui-cell__hd"><label class="weui-label">身份证号</label></div>
<div class="weui-cell__bd">
<input class="weui-input" type="text" placeholder="请输入身份证号"/>
</div>
</div>
<div class="weui-cell">
<div class="weui-cell__hd"><label class="weui-label">手机号</label></div>
<div class="weui-cell__bd">
<input class="weui-input" type="tel" placeholder="请输入手机号"/>
</div>
</div>
<div class="weui-cell">
<div class="weui-cell__hd"><label class="weui-label">地址</label></div>
<div class="weui-cell__bd">
<input class="weui-input" type="tel" placeholder="请输入地址"/>
</div>
</div>
<div class="weui-cell">
<div class="weui-cell__hd"><label class="weui-label">微信二维码</label></div>
<div class="weui-cell__bd">
<img src="img/zxwyit.png" style="width: 6vw;
height: 6vw;vertical-align: bottom;margin-left: 4vw;">
</div>
</div>
<div class="weui-btn-area">
<a class="weui-btn weui-btn_primary" href="javascript:" id="showTooltips">确定</a>
</div>
</body>
</html>