MUI实战

目录

一 MUI的官网文档

二 MUI示例代码

三 写代码方法

四 实战


一 MUI的官网文档

https://dev.dcloud.net.cn/mui/ui/

二 MUI示例代码

MUI实战_第1张图片

三 写代码方法

1 官方文档为理论指导

2 官方示例代码为实际模板

四 实战

1 项目创建

MUI实战_第2张图片

2 代码



    
        
        
        
        
        
        
        
    
    
        
        
        
        
        
        
        
        
        
    

3 自定义的CSS样式

/* class选择器 */
.public-bg-color {
	background-color: #55aaff;
}

/* 包含选择器,选择器组合 */
.public-bg-color a,
.public-bg-color h1 {
	color: #ffffff;
}

/* 包含选择器 */
.mui-bar-tab .mui-tab-item.mui-active {
	color: #55aaff;
}

/* class选择器 */
.public-pading {
	padding: 0px 10px;
}

/* class 选择器 */
.public-magin-top {
	margin-top: 10px;
	;
}

/* class 选择器 不加important没效果,强调它是重要的*/
.public-grid-colr {
	background-color: #FFFFFF !important;
}

4 效果

MUI实战_第3张图片

你可能感兴趣的:(MUI)