本文介绍了一个基于jQuery Mobile的移动端网页布局实例，通过使用HTML5、CSS3和JavaScript等技术实现了一个包含导航栏、轮播图及主要内容区域的响应式页面。此布局能够根据不同设备屏幕尺寸进行适配。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>XXX</title>
<link href="css/jquery.mobile-1.4.4.min.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="js/jquery.mobile-1.4.4.min.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page">
<div data-role="header" style="text-align:center">XXXX</div>
<div data-role="navbar" data-grid="d">
<ul>
<li><a class="ui-btn-active" href="default.asp">首页</a></li>
<li><a href="about.asp">关于我们</a></li>
<li><a href="product.asp">产品介绍</a></li>
<li><a href="case.asp">案例展示</a></li>
<li><a href="contact.asp">联系我们</a></li>
</ul>
</div>
<div data-role="content">
<div class="bannerbox">
<div id="focus">
<ul>
<li><a href="#" target="_blank">
<img src="images/bn1.jpg" alt="" /></a></li>
<li><a href="#" target="_blank">
<img src="images/bn2.jpg" alt="" /></a></li>
<li><a href="#" target="_blank">
<img src="images/bn3.jpg" alt="" /></a></li>
<li><a href="#" target="_blank">
<img src="images/bn4.jpg" alt="" /></a></li>
</ul>
</div>
</div>
<div style="text-indent:15px;">XXXX</div>
</div>
<div data-role="footer">
XXXX
</div>
</div>
</body>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>XXX</title>
<link href="css/jquery.mobile-1.4.4.min.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="js/jquery.mobile-1.4.4.min.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page">
<div data-role="header" style="text-align:center">XXXX</div>
<div data-role="navbar" data-grid="d">
<ul>
<li><a class="ui-btn-active" href="default.asp">首页</a></li>
<li><a href="about.asp">关于我们</a></li>
<li><a href="product.asp">产品介绍</a></li>
<li><a href="case.asp">案例展示</a></li>
<li><a href="contact.asp">联系我们</a></li>
</ul>
</div>
<div data-role="content">
<div class="bannerbox">
<div id="focus">
<ul>
<li><a href="#" target="_blank">
<img src="images/bn1.jpg" alt="" /></a></li>
<li><a href="#" target="_blank">
<img src="images/bn2.jpg" alt="" /></a></li>
<li><a href="#" target="_blank">
<img src="images/bn3.jpg" alt="" /></a></li>
<li><a href="#" target="_blank">
<img src="images/bn4.jpg" alt="" /></a></li>
</ul>
</div>
</div>
<div style="text-indent:15px;">XXXX</div>
</div>
<div data-role="footer">
XXXX
</div>
</div>
</body>
</html>
注解
width- viewport的宽度
height- viewport的高度
initial-scale -初始的缩放比例
minimum-scale- 允许用户缩放到的最小比例
maximum-scale-允许用户缩放到的最大比例
user-scalable- 用户是否可以手动缩放
扫一扫
4622
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
