<!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">
#img_head {
z-index: -110;
position: fixed;
top: 0px;
width: 100%;
margin-top: 40px;
}
#img_head img {
width: 100%;
}
.menu {
margin-top: 150px;
}
.img_menu {
width: 100%;
}
.img_menu img {
width: 100%;
}
.menu {}
</style>
</head>
<body>
<script src="js/mui.min.js"></script>
<script type="text/javascript">
mui.init()
mui('.mui-scroll-wrapper').scroll({
deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
});
</script>
<!-- 主界面不动、菜单移动 -->
<!-- 侧滑导航根容器 -->
<div class="mui-off-canvas-wrap mui-draggable mui-slide-in">
<!-- 菜单容器 -->
<aside class="mui-off-canvas-left" id="offCanvasSide">
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<!-- 菜单具体展示内容 -->
</div>
</div>
</aside>
<!-- 主页面容器 -->
<div class="mui-inner-wrap">
<!-- 主页面标题 -->
<header class="mui-bar mui-bar-nav">
<a class="mui-icon mui-action-menu mui-icon-bars mui-pull-left" href="#offCanvasSide"></a>
<h1 class="mui-title">标题</h1>
</header>
<div class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<!-- 主界面具体展示内容 -->
<div class="main">
<div id="img_head">
<img src="img/background_zhsq.png" />
</div>
<div class="menu">
<div class="img_menu">
<a href="#">
<img src="img/sqlt.png" />
</a>
</div>
<div class="img_menu">
<a href="#">
<img src="img/yjzj.png" />
</a>
</div>
<div class="img_menu">
<a href="#">
<img src="img/sqfc.png" />
</a>
</div>
<div class="img_menu">
<a href="#">
<img src="img/sqfw.png" />
</a>
</div>
</div>
</div>
</div>
</div>
<div class="mui-off-canvas-backdrop">
</div>
</div>
</div>
</body> </html>
1 个回复
6***@qq.com
用vantui呗
https://www.youzanyun.com/zanui/vant