我们讲解下设计第一个移动页面，现在移动端是浏览网站占比很大，小程序，今儿头条，等大部分通过这些搜索相关信息了。所以一个网站的手机版是必不可少的。手机版的和html写法和电脑版的有什么区别呢？
1.设计视图渐变背景
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link href="//freemuban.com/js/508/jquery.mobile.theme-1.3.0.min.css" rel="stylesheet" type="text/css">
<link href="//freemuban.com/js/508/jquery.mobile.structure-1.3.0.min.css" rel="stylesheet" type="text/css">
<script src="//freemuban.com/js/508/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="//freemuban.com/js/508/jquery.mobile-1.3.0.min.js" type="text/javascript"></script>
<script>
</script>
<style type="text/css">
.bg-gradient{
background-image:-webkit-gradient(
linear,left bottom,left top,
color-stop(0.22,rgb(12,12,12)),
color-stop(0.57,rgb(153,168,192)),
color-stop(0.84,rgb(23,45,67))
);
background-image:-moz-linear-gradient(
90deg,
rgb(12,12,12),
rgb(153,168,192),
rgb(23,45,67)
);
}
</style>
</head>
<body>
<div data-role="page" id="page" class="bg-gradient">
<div data-role="header">
<h1>页面渐变背景样式</h1>
</div>
<div data-role="content"><img src="//freemuban.com/js/508/bg1.png" width="100%" /></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>
</script>
<style type="text/css">
</style>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>页面过渡效果</h1>
</div>
<div data-role="content">
<!--使用默认切换方式，效果为渐显-->
<a href="index1.html" data-role="button">默认切换（渐显）</a>
<!-- data-transition="fade" 定义切换方式渐显-->
<a data-role="button" href="index1.html" data-transition="fade" data-direction="reverse">fade（渐显）</a>
<!-- data-transition="pop" 定义切换方式扩散-->
<a data-role="button" href="index1.html" data-transition="pop" data-direction="reverse">pop（扩散）</a>
<!-- data-transition="flip" 定义切换方式展开-->
<a data-role="button" href="index1.html" data-transition="flip" data-direction="reverse">flip（展开）</a>
<!-- data-transition="turn" 定义切换方式翻转覆盖-->
<a data-role="button" href="index1.html" data-transition="turn" data-direction="reverse">turn（翻转覆盖）</a>
<!-- data-transition="flow" 定义切换方式扩散覆盖-->
<a data-role="button" href="index1.html" data-transition="flow" data-direction="reverse">flow（扩散覆盖）</a>
<!-- data-transition="slidefade" 定义切换方式滑动渐显-->
<a data-role="button" href="index1.html" data-transition="slidefade" >slidefade（滑动渐显）</a>
<!-- data-transition="slide" 定义切换方式滑动-->
<a data-role="button" href="index1.html" data-transition="slide" data-direction="reverse">slide（滑动）</a>
<!-- data-transition="slidedown" 定义切换方式向下滑动-->
<a data-role="button" href="index1.html" data-transition="slidedown" >slidedown（向下滑动）</a>
<!-- data-transition="slideup" 定义切换方式向上滑动-->
<a data-role="button" href="index1.html" data-transition="slideup" >slideup（向上滑动）</a>
<!-- data-transition="none" 定义切换方式“无"-->
<a data-role="button" href="index1.html" data-transition="none" data-direction="reverse">none（无动画）</a>
</div>
</div>
</body>
</html>
demo2
<!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>
</script>
<style type="text/css">
</style>
</head>
<body>
<div data-role="page" id="page" data-add-back-btn="true" data-back-btn-text="返回">
<div data-role="header">
<h1>页面过渡效果</h1>
</div>
<div data-role="content"><img src="images/bg.jpg" width="100%"/></div>
</div>
</body>
</html>
