实例、登录与注册的实现、简介美观

设计要点:

一.利用页头栏标识用户当前状态,可以在页头放置一个返回按钮

二.利用开关组件控制是否保存用户信息

三.前进的过渡效果采用:向左自然滑动,返回过渡采用:淡入淡出,用户体验更自然

四.不使用页尾栏,给予用户更多空间感,,使用页尾栏会导致用户感觉到狭窄。

<!DOCTYPE html><html><head><meta http-equiv="content-type" content="text/html;charset=utf-8"/><link rel="stylesheet" href="jquery.mobile-1.4.2.min.css"><script src="jquery-1.10.2.min.js"></script><script src="jquery.mobile-1.4.2.min.js"></script></head><body><div data-role="page" id="login"><div data-role="header"><h1>用户登录</h1></div><div data-role="content"><form method="post" action="#"><div data-role="fieldcontain"><input type="text" name="username" id="username" placeholder="用户名"><input type="password" name="password" id="password" placeholder="密码"><select name="switch" id="switch" data-role="slider"><option value="on">保存</option><option value="off">不保存</option></select><input type="submit" data-role="button" value="登录"></div></form><p>没有账号?<a href="#register" data-transition="slide">点击注册</a></p></div></div><div data-role="page" id="register"><div data-role="header"><a href="#login" data-role="button" data-icon="back" data-transition="fade">返回</a><h1>用户注册</h1></div><div data-role="content"><form method="post" action="#"><div data-role="fieldcontain"><input type="text" name="username" id="username" placeholder="用户名"><input type="password" name="password" id="password" placeholder="密码"><input type="password" id="repassword" placeholder="确认密码"><input type="email" name="email" id="email" placeholder="邮箱"><input type="submit" data-role="button" value="注册"></div></form></div></div></body></html>

自己打败自己是最可悲的失败,

实例、登录与注册的实现、简介美观

相关文章:

你感兴趣的文章:

标签云: