weui学习总结——1、weui表单常用标签

偏执的太偏执、 2022-06-09 04:48 451阅读 0赞

前言：weui是一个专门用于开发手机移动web或微信的样式库。但是官方只提供了demo没有提供相关文档，所以这篇博客就当是方便以后开发而使用吧。  
weui资源下载（也可以从官网下载）：  
[http://download.csdn.net/download/zhengyikuangge/9940737][http_download.csdn.net_download_zhengyikuangge_9940737]

*  手机移动web开发必须要做的两点：1、body中加上ontouchstart，即`<body ontouchstart>...</body>`；2、页面上加入`<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">`
 *  该博客中所描述的代码只需要导入weui.css即可，例如：`<link rel="stylesheet" href="weui.css" />`。
 *  weui.css在上述weui资源中有，请自行下载。大约是在weui-1.1.2\\dist\\example 路径下。也可到我的百度网盘下载，链接：[http://pan.baidu.com/s/1cFAHNS][http_pan.baidu.com_s_1cFAHNS] 密码：iq4d。
 *  该博客中的代码原理上只是修改了html标签中的class而已，请大家对照效果图和代码。

### 按钮 ###

效果图如下:

![这里写图片描述][SouthEast]

--------------------

#### 普通按钮 ####

#### 刷新按钮 ####

#### 不可点按钮 ####

<a class="weui-btn weui-btn_disabled weui-btn_primary">不可点按钮</a>

#### 小按钮 ####

*  注：都可以按照自己的需要改css属性也可以，比如修改按钮的颜色，代码如下：

--------------------

### Input ###

效果图如下：  
![这里写图片描述][SouthEast 1]  
![这里写图片描述][SouthEast 2]

--------------------

#### 单选 ####

#### 多选 ####

<div class="weui-cells weui-cells_checkbox">
                <label class="weui-cell weui-check__label" for="s11">
                    <div class="weui-cell__hd">
                    
                        <input type="checkbox" class="weui-check" name="checkbox1" id="s11" checked="checked"/>
                        <i class="weui-icon-checked"></i>
                    </div>
                    <div class="weui-cell__bd">
                        <p>standard is dealt for u.</p>
                    </div>
                </label>
                <label class="weui-cell weui-check__label" for="s12">
                    <div class="weui-cell__hd">
                        <input type="checkbox" name="checkbox1" class="weui-check" id="s12"/>
                        <i class="weui-icon-checked"></i>
                    </div>
                    <div class="weui-cell__bd">
                        <p>standard is dealicient for u.</p>
                    </div>
                </label>
    
    </div>

#### 表单内容 ####

#### 开关 ####

#### 文本框 ####

#### 文本域 ####

#### 选择（select） ####

<div class="weui-cell weui-cell_select">
                    <div class="weui-cell__bd">
                        <select class="weui-select" name="select1">
                            <option selected="" value="1">微信号</option>
                            <option value="2">QQ号</option>
                            <option value="3">Email</option>
                        </select>
                    </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>
                            <option value="3">英国</option>
                        </select>
                    </div>
    </div>

#### 阅读并同意《相关条款》 ####

<label for="weuiAgree" class="weui-agree">
                <input id="weuiAgree" type="checkbox" class="weui-agree__checkbox"/>
                <span class="weui-agree__text">
                    阅读并同意<a href="javascript:void(0);">《相关条款》</a>
                </span>
    </label>

[http_download.csdn.net_download_zhengyikuangge_9940737]: http://download.csdn.net/download/zhengyikuangge/9940737
[http_pan.baidu.com_s_1cFAHNS]: http://pan.baidu.com/s/1cFAHNS
[SouthEast]: /images/20220609/4cc3abc543f74970afa4f7a5591a69a5.png
[SouthEast 1]: /images/20220609/d0027e125f004583b9bde8ea4e88ad18.png
[SouthEast 2]: /images/20220609/98229586e668475ea00e0dfe1e23d41d.png