今天在做微信公众号开发时,用了一下weui,发现很好用。
1、怎么下载weui.css
例如,进入了该链接页面:https://weui.io/#input,然后右键查看源码,在源码中有这样一行:
<link rel="stylesheet" href="./weui.css"/>
上面的href可直接点击进入weui.css中,全选复制粘贴即可。(注:尝试了菜鸟上提供的链接,发现不太好用,只有这个好用)
2、模仿制作
今天制作的是一个提交表单,直接从https://weui.io/#input页面查看源码,搜索关键字,查看需要的源码片段,粘贴复制即可。
3、效果图
4、代码
<!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/common.css">
<link rel="stylesheet" type="text/css" href="css/form.css">
<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">
<span>请点击右侧扫一扫</span>
<img src="img/scanning.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>
原来用好UI框架这么爽,分分钟做一个页面出来,哈哈哈。