一：Login Screen
F7定义了一种登录页布局类，它可以用在页面内部，或者用在弹出层。
二：定义登录页
<body> ... <!-- 1:定义登录页布局 --> <div class="login-screen"> <div class="view"> <div class="page"> <!-- 2:页面内容增加 login-screen-content 类 --> <div class="page-content login-screen-content"> <div class="login-screen-title">登录页标题</div> <!-- 3:登录表单 --> <form> <!-- 4:接收输入 --> <div class="list-block"> <ul> <li class="item-content"> <div class="item-inner"> <div class="item-title label">Username</div> <div class="item-input"> <input type="text" name="username" placeholder="Username"> </div> </div> </li> <li class="item-content"> <div class="item-inner"> <div class="item-title label">Password</div> <div class="item-input"> <input type="password" name="password" placeholder="Password"> </div> </div> </li> </ul> </div> <!-- 5:按钮 --> <div class="list-block"> <ul> <li> <a href="#" class="item-link list-button">Sign In</a> </li> <li> <a href="#" class="close-login-screen">Close Login Screen</a> </li> </ul> </div> </form> </div> </div> </div> </div> </body>
三：控制登录页弹出(一个app只有一个Login Srceen，所以不用为登录页命名)
<a href="#" class="open-login-screen">Open Login Screen</a></p>
四：将登录页做app首页
只需要在定义Login Srceen时添加"modal-in"类。
<body> ... <div class="login-screen modal-in"> ... login screen content ... </div> </body>
