詳細操作見代碼：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></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" />
<style type="text/css">
/*點擊時背景和字體顏色設置一個過渡的效果*/
.mui-table-view-cell{transition:background 0.5s,color 0.6s;}
/*給標簽被點擊時產生一個效果*/
.mui-table-view-cell.mui-active{
background: red;
color: blue;
}
</style>
</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">列表</h1>
</header>
<div class="mui-content">
<h5 class="mui-content-padded">普通的列表</h5>
<div class="mui-card">
<!--
mui-table-view :父級
mui-table-view-cell：子級
-->
<ul class="mui-table-view">
<li class="mui-table-view-cell">項目經理</li>
<li class="mui-table-view-cell">產品經理</li>
<li class="mui-table-view-cell">技術總監</li>
</ul>
</div>
<h5 class="mui-content-padded">帶箭頭的列表</h5>
<div class="mui-card">
<ul class="mui-table-view">
<li class="mui-table-view-cell"><a class="mui-navigate-right" href="">java</a></li>
<li class="mui-table-view-cell"><a class="mui-navigate-right" href="">python</a></li>
<li class="mui-table-view-cell"><a class="mui-navigate-right" href="">php</a></li>
</ul>
</div>
<h5 class="mui-content-padded">帶數字角標的列表</h5>
<div class="mui-card">
<ul class="mui-table-view">
<li class="mui-table-view-cell">鞋子<span class="mui-badge mui-badge-blue">10</span></li>
<li class="mui-table-view-cell">包包<span class="mui-badge mui-badge-red">5</span></li>
<li class="mui-table-view-cell">衣服<span class="mui-badge mui-badge-warning">2</span></li>
</ul>
</div>
<h5 class="mui-content-padded">帶數字角標+箭頭的列表</h5>
<div class="mui-card">
<ul class="mui-table-view">
<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">鞋子<span class="mui-badge mui-badge-blue">10</span></a></li>
<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">包包<span class="mui-badge mui-badge-red">5</span></a></li>
<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">衣服<span class="mui-badge mui-badge-warning">2</span></a></li>
</ul>
</div>
<h5 class="mui-content-padded">帶input的列表</h5>
<div class="mui-card">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
學校
<button class="mui-btn mui-btn-warning">正確</button>
</li>
<li class="mui-table-view-cell">
操場
<!--開關-->
<div class="mui-switch mui-active mui-switch-blue">
<div class="mui-switch-handle"></div>
</div>
</li>
<!--input單選框-->
<li class="mui-table-view-cell mui-radio">
單選框
<input type="radio" name="" id="" value="" />
</li>
<!--input多選框-->
<li class="mui-table-view-cell mui-checkbox">
多選框
<input type="checkbox" />
</li>
<li class="mui-table-view-cell mui-checkbox">
多選框
<input type="checkbox" />
</li>
<li class="mui-table-view-cell mui-checkbox">
多選框
<input type="checkbox" />
</li>
</ul>
</div>
<h5 class="mui-content-padded">三行列表</h5>
<div class="mui-table-view">
<div class="mui-table-view-cell">
<div class="mui-table">
<div class="mui-table-cell mui-col-xs-10">
<h4 class="mui-ellipsis">努力了的才叫夢想，不努力的就是空想！如果你一直空想的話，無論看多少正能量語錄，也趕不走滿滿的負能量！你還是原地踏步的你，一直在看別人進步。</h4>
<h5 class="mui-h5">作者：L某人</h5>
<h6 class="mui-h6 mui-ellipsis-3">人自己就是一面鏡子，你以什么樣的態度對待世界，世界就會呈現給你什么樣的景象。我們應該學會珍惜，生活因珍惜而有意義，生活因懂得珍惜而完美、精彩。</h6>
<div class="mui-table-cell mui-col-xs-2">
<h5>10:24</h5>
</div>
</div>
</div>
</div>
<div class="mui-table-view-cell">
<div class="mui-table">
<!--
mui-table:表示調用柵格系統（父級）
（子級）mui-col-xs-10：表示占柵格系統的幾分（12分制，xs表示在最小屏幕上，sm表示在中等屏幕上時）
mui-ellipsis：表示顯示一行溢出隱藏
mui-ellipsis-4：表示顯示4行溢出隱藏
mui-navigate-right：導航鏡頭a標簽顯示
-->
<div class="mui-table-cell mui-col-xs-10">
<h4 class="mui-ellipsis">努力了的才叫夢想，不努力的就是空想！如果你一直空想的話，無論看多少正能量語錄，也趕不走滿滿的負能量！你還是原地踏步的你，一直在看別人進步。</h4>
<h5 class="mui-h5">作者：L某人</h5>
<h6 class="mui-h6 mui-ellipsis-3">人自己就是一面鏡子，你以什么樣的態度對待世界，世界就會呈現給你什么樣的景象。我們應該學會珍惜，生活因珍惜而有意義，生活因懂得珍惜而完美、精彩。</h6>
<div class="mui-table-cell mui-col-xs-2">
<h5>10:24</h5>
</div>
</div>
</div>
</div>
<div class="mui-table-view-cell">
<a href="" class="mui-navigate-right">
<div class="mui-table">
<div class="mui-table-cell mui-col-xs-10">
<h4 class="mui-ellipsis">努力了的才叫夢想，不努力的就是空想！如果你一直空想的話，無論看多少正能量語錄，也趕不走滿滿的負能量！你還是原地踏步的你，一直在看別人進步。</h4>
<h5 class="mui-h5">作者：L某人</h5>
<h6 class="mui-h6 mui-ellipsis">人自己就是一面鏡子，你以什么樣的態度對待世界，世界就會呈現給你什么樣的景象。我們應該學會珍惜，生活因珍惜而有意義，生活因懂得珍惜而完美、精彩。</h6>
<div class="mui-table-cell mui-col-xs-2">
<h5>10:24</h5>
</div>
</div>
</div>
</a>
</div>
<h5 class="mui-content-padded">二級列表(折疊的效果)</h5>
<div class="nui-card">
<!--
一級table-view——》table-view-cell
mui-collapse:產生一個折疊的效果
-->
<div class="mui-table-view">
<div class="mui-table-view-cell mui-collapse">
<a href="" class="mui-navigate-right">課程列表</a>
<!--
二級table-view——》table-view-cell
-->
<div class="mui-table-view">
<div class="mui-table-view-cell">
實習<span class="mui-navigate-right"></span>
</div>
<div class="mui-table-view-cell">
產品經理<span class="mui-badge mui-badge-danger">45</span>
</div>
<div class="mui-table-view-cell">
項目策划<span class="mui-navigate-right"></span>
</div>
<div class="mui-table-view-cell">
技術支持<span class="mui-badge mui-badge-danger">45</span>
</div>
</div>
</div>
</div>
</div>
<h5 class="mui-content-padded">圖文列表</h5>
<div class="mui-table-view">
<!--
mui-media:媒體圖文
mui-media-object：設置為媒體對象
mui-pull-left：表示將媒體對象左懸浮,mui-pull-right：表示向右懸浮
mui-media-body：媒體摘要信息欄
-->
<div class="mui-table-view-cell mui-media">
<img class="mui-media-object mui-pull-left" src="image/0_2.jpg"/>
<!--設置文字描述標題-->
<div class="mui-media-body">
藍天白雲，晴空萬里
<p class="mui-6 mui-ellipsis">這里是摘要，老虎會撒嬌，這里是摘要，老虎會撒嬌，可怕可怕這里是摘要，老虎會撒嬌，可怕可怕這里是摘要，老虎會撒嬌，可怕可怕</p>
</div>
</div>
<div class="mui-table-view-cell mui-media">
<img class="mui-media-object mui-pull-right" src="image/0_2.jpg"/>
<!--設置文字描述標題-->
<div class="mui-media-body">
藍天白雲，晴空萬里
<p class="mui-6 mui-ellipsis">這里是摘要，老虎會撒嬌，這里是摘要，老虎會撒嬌，可怕可怕這里是摘要，老虎會撒嬌，可怕可怕這里是摘要，老虎會撒嬌，可怕可怕</p>
</div>
</div>
</div>
</div>
</div>
<script src="js/mui.min.js"></script>
<script type="text/javascript">
mui.init()
</script>
</body>
</html>
具體效果如下：
