<!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" />
<script src="../../js/jquery-2.1.0.js"></script>
<script src="../../js/mui.js"></script>
<script src="../../js/Function.js"></script>
<link href="../../css/mui.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="../../css/style.css"/>
<script type="text/javascript">
$(function(){
mui.init()
var slider = mui("#slider");
slider.slider({
interval: 2000
});
})
</script>
<style>
.mui-card{float: left; width: 100%; margin: 0; padding-bottom: 10px;}
.mui-card-content{ width: 100%; padding: 2px 4%;}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">首页</h1>
</header>
<div class="mui-content" id="pullrefresh">
<div class="mui-scroll">
<!-- 轮播图片 -->
<div id="slider" class="mui-slider">
<div class="mui-slider-group mui-slider-loop">
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#"><img src="../../Img/H5.jpg"></a>
</div>
<div class="mui-slider-item">
<a href="#"><img src="../../Img/JQ.jpg"></a>
</div>
<div class="mui-slider-item">
<a href="#"><img src="../../Img/PHP.jpg"></a>
</div>
<div class="mui-slider-item">
<a href="#"><img src="../../Img/H5.jpg"></a>
</div>
<div class="mui-slider-item">
<a href="#"><img src="../../Img/JQ.jpg"></a>
</div>
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#"><img src="../../Img/PHP.jpg"></a>
</div>
</div>
<div class="mui-slider-indicator">
<div class="mui-indicator mui-active"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
</div>
</div>
<div class="Null"><p><span></span>热门文章</p></div>
<ul class="Diy_UL">
<p>
<div class="mui-card jump">
<!--页眉,放置标题-->
<div class="mui-card-header mui-card-media">
<img src="../../Img/head.jpg" />
<div class="mui-media-body">
小M
<p>发表于 2016-06-30 15:30</p>
</div>
</div>
<!--内容区-->
<div class="mui-card-content">
卡片页眉及内容区,均支持放置图片; 页眉放置图片的话,需要在.mui-card-header节点上增加.mui-card-media类,然后设置一张图片做背景图即可,代码如下:
</div>
</div>
</p>
<p>
<div class="mui-card jump">
<!--页眉,放置标题-->
<div class="mui-card-header mui-card-media">
<img src="../../Img/head.jpg" />
<div class="mui-media-body">
小M
<p>发表于 2016-06-30 15:30</p>
</div>
</div>
<!--内容区-->
<div class="mui-card-content">
卡片页眉及内容区,均支持放置图片; 页眉放置图片的话,需要在.mui-card-header节点上增加.mui-card-media类,然后设置一张图片做背景图即可,代码如下:
</div>
</div>
</p>
<p>
<div class="mui-card jump">
<!--页眉,放置标题-->
<div class="mui-card-header mui-card-media">
<img src="../../Img/head.jpg" />
<div class="mui-media-body">
小M
<p>发表于 2016-06-30 15:30</p>
</div>
</div>
<!--内容区-->
<div class="mui-card-content">
卡片页眉及内容区,均支持放置图片; 页眉放置图片的话,需要在.mui-card-header节点上增加.mui-card-media类,然后设置一张图片做背景图即可,代码如下:
</div>
</div>
</p>
<p>
<div class="mui-card jump">
<!--页眉,放置标题-->
<div class="mui-card-header mui-card-media">
<img src="../../Img/head.jpg" />
<div class="mui-media-body">
小M
<p>发表于 2016-06-30 15:30</p>
</div>
</div>
<!--内容区-->
<div class="mui-card-content">
卡片页眉及内容区,均支持放置图片; 页眉放置图片的话,需要在.mui-card-header节点上增加.mui-card-media类,然后设置一张图片做背景图即可,代码如下:
</div>
</div>
</p>
</ul>
</div>
</div>
</body>
<script type="text/javascript" src="../../js/update.js" ></script>
</html>