第一次使用weui

今天在做微信公众号开发时，用了一下weui，发现很好用。

1、怎么下载weui.css

例如，进入了该链接页面：https://weui.io/#input，然后右键查看源码，在源码中有这样一行：

<link rel="stylesheet" href="./weui.css"/>

上面的href可直接点击进入weui.css中，全选复制粘贴即可。（注：尝试了菜鸟上提供的链接，发现不太好用，只有这个好用）

2、模仿制作

今天制作的是一个提交表单，直接从https://weui.io/#input页面查看源码，搜索关键字，查看需要的源码片段，粘贴复制即可。

3、效果图

第一次使用weui

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框架这么爽，分分钟做一个页面出来，哈哈哈。

秒客网

第一次使用weui

相关文章