您的位置：首页 > Web前端 > JQuery

使用Jquery.mobile制造手机网页

2014-10-09 09:38 281 查看
<!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>

注解

width- viewport的宽度

height- viewport的高度

initial-scale -初始的缩放比例

minimum-scale- 允许用户缩放到的最小比例

maximum-scale-允许用户缩放到的最大比例

user-scalable- 用户是否可以手动缩放
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航