第一次使用weui

今天在做微信公众号开发时,用了一下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框架这么爽,分分钟做一个页面出来,哈哈哈。
展开阅读全文

没有更多推荐了,返回首页