我们讲解下设计第一个移动页面，现在移动端是浏览网站占比很大，小程序，今儿头条，等大部分通过这些搜索相关信息了。所以一个网站的手机版是必不可少的。手机版的和html写法和电脑版的有什么区别呢？
1.命名锚记
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link href="jquery-mobile/jquery.mobile.theme-1.3.0.min.css" rel="stylesheet" type="text/css">
<link href="jquery-mobile/jquery.mobile.structure-1.3.0.min.css" rel="stylesheet" type="text/css">
<script src="jquery-mobile/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.3.0.min.js" type="text/javascript"></script>
<script>
$(function(){
})
</script>
<style type="text/css"></style>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="header">
<h1>命名锚记</h1>
</div>
<div data-role="content">
<a href="#anchor" data-role="button">跳转到锚记位置</a>
<div style="height:1000px;"></div>
<a name="anchor" data-role="button" id="anchor">命名锚记位置</a></p>
</div>
</div>
</body>
</html>
2.在单页视图中定义锚记
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link href="jquery-mobile/jquery.mobile.theme-1.3.0.min.css" rel="stylesheet" type="text/css">
<link href="jquery-mobile/jquery.mobile.structure-1.3.0.min.css" rel="stylesheet" type="text/css">
<script src="jquery-mobile/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.3.0.min.js" type="text/javascript"></script>
<script>
$(function(){
$('a.scroll').bind('click vclick', function(ev){
var target = $($(this).attr('href')).get(0).offsetTop;
$.mobile.silentScroll(target);
return false;
});
})
</script>
<style type="text/css"></style>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="header">
<h1>命名锚记</h1>
</div>
<div data-role="content">
<a class="scroll" href="#anchor" data-role="button">跳转到锚记位置</a>
<div style="height:1000px;"></div>
<a id="anchor" data-role="button">命名锚记位置</a>
</div>
</div>
</body>
</html>
3.在多页视图中定义锚记
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link href="jquery-mobile/jquery.mobile.theme-1.3.0.min.css" rel="stylesheet" type="text/css">
<link href="jquery-mobile/jquery.mobile.structure-1.3.0.min.css" rel="stylesheet" type="text/css">
<script src="jquery-mobile/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.3.0.min.js" type="text/javascript"></script>
<script>
$(function(){
$('a.page-scroll').bind('click vclick', function(ev){
var href = $(this).attr('href');
var parts = href.split('-');
var page=parts[0];
var id="#"+parts[1];
$.mobile.changePage($(page));
var target=$(id).get(0).offsetTop;
$.mobile.silentScroll(target);
return false;
});
})
</script>
<style type="text/css"></style>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="header">
<h1>第一页</h1>
</div>
<div data-role="content">
<a class="page-scroll" href="#page2-anchor" data-role="button">跳转到锚记位置</a>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="header">
<h1>第二页</h1>
</div>
<div data-role="content">
<a id="anchor" data-role="button">命名锚记位置</a>
</div>
</div>
</body>
</html>
