本文主要講述cardview（卡片檢視），頁首（圖片+主標題+副標題）、內容區（圖片/文字）、頁尾（連結）的相關設定。

1、cardview（卡片檢視）概述：

卡片檢視常用於展現一段完整獨立的資訊，比如一篇文章的預覽圖、作者資訊、點贊數量等；

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

2、卡片頁首及內容區，均支援放置圖片； 頁首放置圖片的話，需要在.mui-card-header節點上增加.mui-card-media類，然後設定一張圖片做背景圖即可，程式碼如下：

            <!-- 有內容區、頁首（圖片）、頁尾（連結） -->
			<div class="mui-card">
				<div class="mui-card-header mui-card-media" style="height:40vw;background-image:url(../images/cbd.jpg)"></div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<p>Posted on January 18, 2016</p>
						<p style="color: #333;">這裡顯示文章摘要，讓讀者對文章內容有個粗略的概念...</p>
					</div>
				</div>
				<div class="mui-card-footer">
					<a class="mui-card-link">Like</a>
					<a class="mui-card-link">Read more</a>
				</div>
			</div>
 

3、若希望在頁首放置更豐富的資訊，比如頭像、主標題、副標題，則需使用.mui-media-body類，示例程式碼如下：

            <!-- 有內容區、頁首（圖片+主標題+副標題）、頁尾（連結） -->
			<div class="mui-card">
				<div class="mui-card-header mui-card-media">
					<img src="../images/logo.png" />
					<div class="mui-media-body">
						小M
						<p>發表於 2016-06-30 15:30</p>
					</div>
				</div>
				<div class="mui-card-content">
					<img src="../images/yuantiao.jpg" alt="" width="100%" />
				</div>
				<div class="mui-card-footer">
					<a class="mui-card-link">Like</a>
					<a class="mui-card-link">Comment</a>
					<a class="mui-card-link">Read more</a>
				</div>
			</div>