Hbulider得前端基础_mui框架总结1

http://dev.dcloud.net.cn/mui/这个网站是MUI的官网,点开网站右侧是一个手机标识,上面有所有的MUI框架的前端控件.

学习的方法就是点开你所需要的控件,然后右键-->查看框架源码,即可看到你所需要的控件的源码

下面我把一些重要的代码标出来解释一下

1.折叠面板(包括表单/图片轮播/文字排版)

(1)表单输入群组使用Form,提交的时候也可以以表单的方式提交

<form class="mui-input-group">  //格式统一多个表单中的空间

<div class="mui-input-row">//确保该div里面的汉字和空间在同一行

<label>输入:</label>

<input type="text" placeholder="请输入姓名">

</div>

2.   <div class="mui-input-row mui-plus-hidden">
            <label>Input</label>
            <input type="text" class="mui-input-speech mui-input-clear" placeholder="语音输入">//定义语音输入类型和输入清除
        </div>

3.图片轮播

<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
                                    <div class="mui-slider-item mui-slider-item-duplicate">
                                        <a href="#">
                                            <img src="../images/last.jpg">
                                        </a>
                                    </div>

<!-- 第n张 -->
        <div class="mui-slider-item">
            <a href="#">
                <img src="../images/n.jpg">
            </a>
        </div>

<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
        <div class="mui-slider-item mui-slider-item-duplicate">
            <a href="#">
                <img src="../images/First.jpg">
            </a>
        </div>

 

      <div class="mui-slider-indicator">
            <div class="mui-indicator mui-active"></div>  //设置第一个节点为焦点
            <div class="mui-indicator"></div>
            <div class="mui-indicator"></div>
             ....
        </div>