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

悠悠 2022-05-18 07:59 180阅读 0赞

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

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

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

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

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

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

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

</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>

<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>

[http_dev.dcloud.net.cn_mui_MUI_MUI_.]: http://dev.dcloud.net.cn/mui/