MUI框架：栅格系统 + grid宫格布局 - 案例篇

最新推荐文章于 2025-06-20 10:02:32 发布

原创最新推荐文章于 2025-06-20 10:02:32 发布 · 8.9k 阅读

9 ·

CC 4.0 BY-SA版权

本文为优快云博主原创文章，不允许其他平台转载。擅自转载至其他平台，严肃追究！

MUI踩坑篇专栏收录该内容

30 篇文章

订阅专栏

本文介绍如何使用MUI框架的栅格系统和grid宫格布局创建自定义页面布局，通过实例代码展示了如何覆盖默认样式，实现美观的宫格布局效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

MUI框架 · 自定义宫格布局 · 应用案例：

通过使用MUI框架的 栅格系统 + grid宫格布局 ，覆盖源码样式，以达到完美的页面效果。

效果图：

点击动画效果不再演示，具体效果参考源码效果！
在这里插入图片描述

全部实例代码：

<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>自定义mui宫格布局</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="static.docs/plugins/mui/css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="static.docs/css/index.mui.css"/>
	</head>

	<body>
		<div style="height:178px;"></div>
		<!--宫格布局-->
		<div class="mui-row bg-fff">
			<div class="mui-col-xs-3 mui-col-sm-3">
				<div class="mui-row mui-table-view mui-grid-view mui-grid-9">
			            <li class="mui-table-view-cell mui-media w100"><a href="#">
			                    <span class="tf-icon icon-bgk"></span>
			                    <div class="mui-media-body">包过卡</div></a></li>
				</div>
				<div class="mui-row mui-table-view mui-grid-view mui-grid-9">
			            <li class="mui-table-view-cell mui-media w100"><a href="#">
			                    <span class="tf-icon icon-stcx"></span>
			                    <div class="mui-media-body">试题查询</div></a></li>
				</div>
			</div>
			<div class="mui-col-xs-6 mui-col-sm-6">
				<div class="mui-row mui-table-view mui-grid-view mui-grid-9 icon-center-div">
			            <li class="mui-table-view-cell mui-media w100">
			            	<a href="#">
			                    <span class="tf-icon icon-miks"></span>
			                    <!--<div class="mui-media-body">模拟考试</div>-->
			                </a>
			            </li>
				</div>
			</div>
			<div class="mui-col-xs-3 mui-col-sm-3">
				<div class="mui-row mui-table-view mui-grid-view mui-grid-9">
			            <li class="mui-table-view-cell mui-media w100"><a href="#">
			                    <span class="tf-icon icon-wdct"></span>
			                    <div class="mui-media-body">我的错题</div></a></li>
				</div>
				<div class="mui-row mui-table-view mui-grid-view mui-grid-9">
			            <li class="mui-table-view-cell mui-media w100"><a href="#">
			                    <span class="tf-icon icon-wdsc"></span>
			                    <div class="mui-media-body">我的收藏</div></a></li>
				</div>
			</div>
		</div>
		<div class="mui-row bf-fff">
			<div class="mui-col-xs-3 mui-col-sm-3">
				<div class="mui-row mui-table-view mui-grid-view mui-grid-9">
			            <li class="mui-table-view-cell mui-media w100"><a href="#">
			                    <span class="tf-icon icon-yctk"></span>
			                    <div class="mui-media-body">易错题库</div></a></li>
				</div>
				<div class="mui-row mui-table-view mui-grid-view mui-grid-9">
			            <li class="mui-table-view-cell mui-media w100"><a href="#">
			                    <span class="tf-icon icon-ztph"></span>
			                    <div class="mui-media-body">做题排行</div></a></li>
				</div>
			</div>
			<div class="mui-col-xs-6 mui-col-sm-6">
				<div class="mui-row mui-table-view mui-grid-view mui-grid-9 icon-center-div">
			            <li class="mui-table-view-cell mui-media w100">
			            	<a href="#">
			                    <span class="tf-icon icon-qztk"></span>
			                    <!--<div class="mui-media-body">全真题库</div>-->
			                </a>
			            </li>
				</div>
			</div>
			<div class="mui-col-xs-3 mui-col-sm-3">
				<div class="mui-row mui-table-view mui-grid-view mui-grid-9">
			            <li class="mui-table-view-cell mui-media w100"><a href="#">
			                    <span class="tf-icon icon-ksjl"></span>
			                    <div class="mui-media-body">考试记录</div></a></li>
				</div>
				<div class="mui-row mui-table-view mui-grid-view mui-grid-9">
			            <li class="mui-table-view-cell mui-media w100"><a href="#">
			                    <span class="tf-icon icon-kjjy"></span>
			                    <div class="mui-media-body">课件讲义</div></a></li>
				</div>
			</div>
		</div>
		
		<script src="static.docs/plugins/mui/js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init()
		</script>
	</body>

</html>

样式文件：

body{background: #FFF;max-width: 640px;margin: 0 auto;}
ul,li{list-style: none;}
 .pdt15{padding-top:15px;}
 .pdt30{padding-top: 30px;}
 .pdb30{padding-bottom: 30px;}
/*宫格布局*/
.mui-row.bg-fff{background-color: #FFF;/* + 取消高度差背景bug*/}
.mui-grid-view.mui-grid-9 .mui-table-view-cell.w100{width: 100%; padding: 0 15px;}
.mui-grid-view.mui-grid-9,.mui-grid-view.mui-grid-9 .mui-table-view-cell{border: none;}
.mui-grid-view.mui-grid-9{background-color: #FFF;}
.tf-icon{display: inline-block;width: 50px;height: 50px;}
.icon-bgk{background-image: url('../images/icon_01.png');background-size: 100% 100%;}
.icon-wdct{background-image: url('../images/icon_02.png');background-size: 100% 100%;}
.icon-stcx{background-image: url('../images/icon_03.png');background-size: 100% 100%;}
.icon-wdsc{background-image: url('../images/icon_04.png');background-size: 100% 100%;}
.icon-yctk{background-image: url('../images/icon_05.png');background-size: 100% 100%;}
.icon-ksjl{background-image: url('../images/icon_06.png');background-size: 100% 100%;}
.icon-ztph{background-image: url('../images/icon_07.png');background-size: 100% 100%;}
.icon-kjjy{background-image: url('../images/icon_08.png');background-size: 100% 100%;}
.icon-miks{background-image: url('../images/icon_09.png');background-size: 100% 100%;}
.icon-qztk{background-image: url('../images/icon_10.png');background-size: 100% 100%;}
 .icon-center-div .tf-icon{width: 118px;height: 118px;}
 .mui-table-view-cell>a:not(.mui-btn){display: inline-block;}
 .mui-grid-view.mui-grid-9.icon-center-div{padding-top: 30px;padding-bottom: 30px;}