3. 现在我们来看一下如何用jquerymoblie套装做一个登录界面，这样就算以后达到快速入门的功能。这里解释了所有主要语句的意思。

<!DOCTYPE html>
<!--这里表示该页面支持html5，当然如果您的手机浏览器不支持html5，该语句会自动跳过-->
 <html> <head>
 <title>demo</title>

 <meta charset="utf-8" /> <!--utf-8是推荐的编码格式-->

 <meta name="viewport" content="width = device-width, user-scalable=no minimum-scale=1.0 maximum-scale=1.0" /><!--设备屏幕大小的自适应问题，该语句表示手机将以原始大小显示本页面，并不允许缩放-->
<!--其中：
width - viewport的宽度 
 initial-scale - 初始的缩放比例
minimum-scale - 允许用户缩放到的最小比例 maximum-scale - 允许用户缩放到的最大比例
user-scalable - 用户是否可以手动缩放 -->
 <meta name="apple-touch-fullscreen" content="YES" />

 <link rel="stylesheet" href="jquery.mobile-1.0a2/jquery.mobile-1.0a2.min.css" />
 <link rel="stylesheet" href="stylesheets/common.css" /><!--自定义的common.css应放在jquery.mobile-1.0a2.min.css之后-->

 <script src="jquery.mobile-1.0a2/jquery-1.4.4.min.js"></script>
 <script src="js/common.js"></script>
 <script type="text/javascript" src="jquery.mobile-1.0a2/jquery.mobile-1.0a2.min.js"></script><!--自定义的common.js放在jquery-1.4.4.min.js和jquery.mobile-1.0a2.min.js之间-->
 </head><body> 
 <div data-role="page" data-theme="b" id="loginpage">

<!-- 如果做过wap开发就知道，在原来的一个wml页面上可以同时存在多个page，所有内容都包含在这些page中平时默认显示第一个Page。不同page间可以通过href="wmlname.wml#pagename"的方式切换。这里，JQueryMobile提供了类似的方法：通过定义data-role="page"来实现这一效果，使用方法一如之前。

data-theme="b" 是JQueryMobile定义的主题效果——蓝色风格
-->
<div data-role="header">
<!-- 这里的data-role="header"也是JQueryMobile定义的，主要涉及显示效果。下面的content与footer一样--> 
    <span>WFS网络存储系统</span>
 </div>

 <div data-role="content" class="ui-body ui-body-d simheiB"><!-- JQueryMobile通过ui-body 设定CSS效果，包含字体，输入框，按钮等你能用到的所有dom元素。ui-body-d表示主题风格，有ui-body-a到ui-body-e可选-->
       <p>欢迎使用WFS网络存储系统！</p>  
    <div data-role="fieldcontain">
       <label for="name">用户名:</label>
        <input type="text" name="name" id="name" value="" />
    </div> 
    <div data-role="fieldcontain">
        <label for="password">密 码:</label>
        <input type="password" name="password" id="password" value="" />
    </div>  
    <a href="main.html" rel="external" data-role="button" data-inline="true" >登录</a>
    <a href="#" data-role="button" data-inline="true" class="Bsimhei">重置</a>
         
 </div>

 <div class="ui-bar ui-bar-b">
     <fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain" class="fl">
     <input type="checkbox" name="checkbox-1" id="checkbox-1" />
     <label for="checkbox-1" class="font10">记住密码</label>
    </fieldset>

<!-- 我特别喜欢JQueryMobile设定的checkbox效果，结合了CSS和JS，如果说前面的设计风格我自己也可以做出来点的话，这个就不太好做了-->

<fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain" class="fr">
     <a href="#aboutpage" data-transition="pop" data-inline="true" >关于</a><a href="#aboutpage" data-transition="pop" data-inline="true">帮助</a>

<!-- href="#aboutpage" 表示链接到本html文件中的另一个page:"aboutpage"中去。请注意链接的哈希方式#，例子就是这个按钮。如果你想链接到别的html文件中，则需要添加rel="external"，表示清除原来的哈希，否则你永远跳转不过去。例子如之前的登录按钮所示。

data-transition="pop"是JQueryMobile中定义的跳转页面动画效果，很好很前卫。有pop,silde,fade，flip等多种可选

-->
    </fieldset>
 </div>

 <div class="ui-bar ui-bar-b">
    <div class="font12 tc">传媒大学存储实验室</div>
 </div>  
 </div><!-- / loginpage --><!-- aboutpage -->
 <div data-role="page" data-theme="b" id="aboutpage"><!-- 这是一个新的page，一开始不会显示-->
 <div data-role="header">
    <h1>WFS</h1>
 </div><!-- /header --><div data-role="content" class="ui-body ui-body-d simhei"> 
    <p>WFS移动端站点示例静态页面 </p>
    <p>我的目标是：简洁，明了，美观</p>
    <p>使用了JQueryMoblie 1.0 Alpha2</p>
    <p>10月16日更新</p>
    <p>designed by 西北泡面王 </p>  
 </div><!-- /content --><div data-role="footer">
    <h4>2010-11-15 </h4>
 </div><!-- /header -->
 </div><!-- /aboutpage --></body>
 </html>