wisdom-union
/
ListTemplate2.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
	<script src="js/jquery.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
	<link rel="stylesheet" href="css/list2.css">
	<link rel="stylesheet" href="css/css.css">
    <script type="text/javascript" charset="utf-8">
      	mui.init();
    </script>
</head>
<body>
<!-- 轮播图开始 -->
<div class="mui-slider">
  <div class="mui-slider-group mui-slider-loop">
    <!--支持循环，需要重复图片节点-->
    <div class="mui-slider-item mui-slider-item-duplicate"><a href="#">向左</a></div>
    <div class="mui-slider-item"><a href="#"><img src="images/01.jpg" /></a></div>
    <div class="mui-slider-item"><a href="#"><img src="images/01.jpg" /></a></div>
    <div class="mui-slider-item"><a href="#"><img src="images/01.jpg" /></a></div>
    <div class="mui-slider-item"><a href="#"><img src="images/01.jpg" /></a></div>
    <!--支持循环，需要重复图片节点-->
    <div class="mui-slider-item mui-slider-item-duplicate"><a href="#">向右</a></div>
  </div>
</div>
<!-- 轮播图结束 -->

<!-- 选项卡开始 -->
<div id="segmentedControl" class="mui-segmented-control mui-segmented-control-negative">
	<a class="mui-control-item mui-active" href="#item1">十三讲</a>
	<a class="mui-control-item" href="#item2">不忘初心</a>
	<a class="mui-control-item" href="#item3">工会专栏</a>
</div>
<div>
	<div id="item1" class="mui-control-content mui-active">
		<p class="title">精选</p>
		<ul class="mui-table-view">
		    <li class="mui-table-view-cell"><a href="#"><i class="mui-icon mui-icon-videocam"></i>第一讲 习近平新时代中国特色社会主义思想是党和国家...</a></li>
		    <li class="mui-table-view-cell"><a href="#"><i class="mui-icon mui-icon-videocam"></i>第一讲 习近平新时代中国特色社会主义思想是党和国家...</a></li>
		    <li class="mui-table-view-cell"><a href="#"><i class="mui-icon mui-icon-videocam"></i>第一讲 习近平新时代中国特色社会主义思想是党和国家...</a></li>
		</ul>
		<p class="title">热门</p>
		<ul class="mui-table-view">
		    <li class="mui-table-view-cell mui-media">
		        <a href="javascript:;">
		            <img class="mui-media-object mui-pull-right" src="images/02.jpg">
		            <div class="mui-media-body">
		                第一讲 习近平特色主义时代中国特色习近平特色主义时代中国特色
		                <p class='mui-ellipsis'>2019-08-08</p>
		            </div>
		        </a>
		    </li>
		</ul>
	</div>
	<div id="item2" class="mui-control-content">222</div>
	<div id="item3" class="mui-control-content">333</div>
</div>
<!-- 选项卡结束 -->
</body>
</html>
<script src="js/index.js"></script>