卡片视图常用于展现一段完整独立的信息，比如一篇文章的预览图、作者信息、点赞数量等 使用mui-card类即可生成一个卡片容器，卡片视图主要有页眉、内容区、页脚三部分组成，结构如下：
<div class="mui-card">
<!--页眉，放置标题-->
<div class="mui-card-header">页眉</div>
<!--内容区-->
<div class="mui-card-content">内容区</div>
<!--页脚，放置补充信息或支持的操作-->
<div class="mui-card-footer">页脚</div>
</div>
卡片页眉及内容区，均支持放置图片； 页眉放置图片的话，需要在.mui-card-header节点上增加.mui-card-media类，然后设置一张图片做背景图即可，代码如下：
<div class="mui-card-header mui-card-media"
style="height:40vw;background-image:url(url(img/1.jpg)))">学习MUI</div>
若希望在页眉放置更丰富的信息，比如头像、主标题、副标题，则需使用.mui-media-body类，示例代码如下
<div class="mui-card-header mui-card-media">
<img src="img/1.jpg" />
<div class="mui-media-body">
学习
<p>学习MUI</p>
</div>
</div>
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>MUI cardview(卡片视图)</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="css/mui.min.css" rel="stylesheet" />
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">MUI cardview(卡片视图)/h1>
</header>
<div class="mui-card">
<!--页眉，放置标题-->
<div class="mui-card-header">页眉</div>
<!--内容区-->
<div class="mui-card-content">内容区</div>
<!--页脚，放置补充信息或支持的操作-->
<div class="mui-card-footer">页脚</div>
</div
<div class="mui-card-header mui-card-media">
<img src="img/1.jpg"/>
<div class="mui-media-body">
学习
<p>学习MUI</p>
</div>
</div>
<div class="mui-card-header mui-card-media"
style="height:40vw;background-image:url(url(imgurl(img/1.jpg))))">学习MUI</div>
<script src="js/mui.min.js"></script>
<script type="text/javascript">
mui.init()
</script>
</body>
</html>版权声明：本文为qq_40861561原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。