您的位置：首页 > 移动开发

mui实现APP的一个首页面

2017-05-30 15:48 302 查看 
<!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>
<link href="css/mui.min.css" rel="stylesheet"/>
<script type="text/javascript" charset="utf-8">
mui.init();
</script>
<style>
.mui-self-header
{
background-color: red;
}
.mui-self-font
{
color:white;
font-weight:bolder;
font-size: 20px;
}
.mui-input-row
{
margin-top:5px;
color:f7f3f3;
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav mui-self-header">
<h1 class="mui-title mui-self-font">生活帮</h1>
</header>
<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="./image/44.jpg"></a>
</div>
<div class="mui-slider-item">
<a href="#"><img src="./image/11.jpg"></a>
</div>
<div class="mui-slider-item">
<a href="#"><img src="./image/22.jpg"></a>
</div>
<div class="mui-slider-item">
<a href="#"><img src="./image/33.jpg">
</a>
</div>
<div class="mui-slider-item">
<a href="#"><img src="./image/44.jpg"></a>
</div>
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#"><img src="./image/11.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="mui-input-row mui-search">
<input type="search" class="mui-input-clear" placeholder="请输您要搜索的内容">
</div>

<h5 style="background-color:#efeff4" class="mui-icon mui-icon-contact">生活服务</h5>
<ul class="mui-table-view mui-grid-view">
<li class="mui-table-view-cell mui-media mui-col-xs-6">
<a href="#">
<img class="mui-media-object" src="./image/shuijiao.jpg">
<div class="mui-media-body">幸福一起睡觉</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-6">
<a href="#">
<img class="mui-media-object" src="./image/muwu.jpg">
<div class="mui-media-body">静静的喝咖啡</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-6">
<a href="#">
<img class="mui-media-object" src="./image/cbd.jpg">
<div class="mui-media-body">Color of SIP CBD</div>
</a>
</li>

<li class="mui-table-view-cell mui-media mui-col-xs-6">
<a href="#">
<img class="mui-media-object" src="./image/yuantiao.jpg">
<div class="mui-media-body">静静看这世界</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-6">
<a href="#">
<img class="mui-media-object" src="./image/yuantiao.jpg">
<div class="mui-media-body">静静看这世界</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-6">
<a href="#">
<img class="mui-media-object" src="./image/yuantiao.jpg">
<div class="mui-media-body">静静看这世界</div>
</a>
</li>
</ul>

<h5 style="background-color:#efeff4" class="mui-icon mui-icon-home">购物广场</h5>
<ul class="mui-table-view mui-grid-view">
<li class="mui-table-view-cell mui-media mui-col-xs-6">
<a href="#">
<img class="mui-media-object" src="./image/shuijiao.jpg">
<div class="mui-media-body">幸福一起睡觉</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-6">
<a href="#">
<img class="mui-media-object" src="./image/muwu.jpg">
<div class="mui-media-body">静静的喝咖啡</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-6">
<a href="#">
<img class="mui-media-object" src="./image/cbd.jpg">
<div class="mui-media-body">Color of SIP CBD</div>
</a>
</li>

<li class="mui-table-view-cell mui-media mui-col-xs-6">
<a href="#">
<img class="mui-media-object" src="./image/yuantiao.jpg">
<div class="mui-media-body">静静看这世界</div>
</a>
</li>
</ul>

<h5 style="background-color:#efeff4" class="mui-icon mui-icon-map">私人助理</h5>
<ul class="mui-table-view mui-grid-view">
<li class="mui-table-view-cell mui-media mui-col-xs-6">
<a href="#">
<img class="mui-media-object" src="./image/shuijiao.jpg">
<div class="mui-media-body">幸福一起睡觉</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-6">
<a href="#">
<img class="mui-media-object" src="./image/muwu.jpg">
<div class="mui-media-body">静静的喝咖啡</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-6">
<a href="#">
<img class="mui-media-object" src="./image/cbd.jpg">
<div class="mui-media-body">Color of SIP CBD</div>
</a>
</li>

<li class="mui-table-view-cell mui-media mui-col-xs-6">
<a href="#">
<img class="mui-media-object" src="./image/yuantiao.jpg">
<div class="mui-media-body">静静看这世界</div>
</a>
</li>
</ul>
<!--底部导航条开始-->
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item mui-active" href="#tabbar">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">生活</span>
</a>
<a class="mui-tab-item" href="#tabbar-with-chat">
<span class="mui-icon mui-icon-email"><span class="mui-badge">9</span></span>
<span class="mui-tab-label">街道</span>
</a>
<a class="mui-tab-item" href="#tabbar-with-contact">
<span class="mui-icon mui-icon-contact"></span>
<span class="mui-tab-label">交流</span>
</a>
<a class="mui-tab-item" href="#tabbar-with-map">
<span class="mui-icon mui-icon-gear"></span>
<span class="mui-tab-label">我的</span>
</a>
</nav>
<!--底部导航条结束-->
</body>
<!--轮播js-->
<script type="text/javascript" charset="utf-8">
mui.init({
swipeBack:true
});
var slider = mui("#slider");
slider.slider({
interval: 1000
});
</script>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  mui框架
相关文章推荐
新的分享
章节导航