[代码收集]仿新浪微博触屏版登录页面的我的磨用户登录 - 笑忘书网页代码收藏馆 - 35230.WODEMO.COM

首页-代码 2014-05-01 22:28:22 -0700

★仿新浪微博触屏版登录页面的我的磨用户登录★

请勿抄袭本页面

代码说明

触屏版登录样式，稍微修改了下，同样以我的磨登录为演示。代码采自新浪微博触屏版登录页面

html代码

<style>
form#form{text-align:justify;background:transparent;}
.inputArea{background:#fff;border:1px solid #628aa5;-webkit-border-radius:5px;border-radius:5px;-webkit-box-shadow:0 1px 5px #acaeaf inset,0px 1px 1px rgba(255,255,255,0.5);box-shadow:0 1px 5px #acaeaf inset,0px 1px 1px rgba(255,255,255,0.5)}
.inputLine{color:#000;padding:7px 10px;clear:both}.inputLine:first-of-type{border-bottom:1px solid #cfcfcf}
.il{float:left;padding:5px 0}.ir{overflow:hidden;text-align:left;padding:0}.ir input{-webkit-appearance:none;background:none;width:99%;border:0;font-size:14px;vertical-align:middle;margin:0;padding:5px 0;box-shadow:none;border:none;}
.loginOper{margin:15px 0 10px;height:20px;line-height:20px}
.loginOper .autoLogin{margin-left:5px;}
.loginOper .autoLogin a{color:#225a82;}
.loginBtn{text-align:right;width:100%}
.loginBtn input[type="submit"]{height:28px;width:100%;display:inline-block;font-size:16px;color:#fff;font-weight:bold;border:1px solid #3e6983;-webkit-border-radius:5px;border-radius:5px;text-shadow:0 -1px 1px rgba(0,32,75,0.33);-webkit-box-shadow:0 1px 1px rgba(255,255,255,0.5);box-shadow:0 1px 1px rgba(255,255,255,0.5);background:#64a2cc;background-image:-webkit-gradient(linear,left top,left bottom,from(#68a6ce),to(#2478b0));background-image:-webkit-linear-gradient(top,#68a6ce,#2478b0);background-image:-moz-linear-gradient(top,#68a6ce,#2478b0)}
.forgotpwd {margin-right:5px;float:right}.forgotpwd a{color: #225a82}</style>
<div class="loginModule">
<form id="form" method="post" name="reg" action="http://s.wodemo.com/">
<input type="hidden" name="action" value="login">
<input type="hidden" name="return_to" value="http://35230.wodemo.com">
<div class="inputArea">
<div class="inputLine"><div class="il">帐号：</div><div class="ir"><input id="zh" type="text" name="username" value="" placeholder="请输入我的磨的用户名" autocapitalize="off" autocomplete="on"></div></div>
<div class="inputLine"><div class="il">密码：</div><div class="ir"><input id="mm" type="password" name="userpass" value="" placeholder="请输入完整的登录密码"></div></div>
</div>
<div class="loginOper">
<span class="autoLogin"><a href="http://wodemo.com/reg?return_to=http%3A%2F%2Fmo.xiaows.com%2Fentry%2F160094">没有？点此注册吧</a></span>
<div class="forgotpwd"><a href="http://s.wodemo.com/resetpassword" target="_self" style="vertical-align:middle;">忘记密码 ?</a></div>
</div>
<div class="loginBtn"><input type="submit" value="登录"></div>
</form>
</div>

代码演示

[代码仅供参考，转载请注明出处]

----Comments(8)----
anonymous at 2016-05-27 20:11:
正规联通流量卡0月租 3g4g网络只能上网 13元1g流量要的加QQ2184980230 45韵达包邮

冒泡网：http (@mrppj) | @ at 2014-05-24 17:30:
太漂亮了！

迷茫者的微笑 (@1044529113) | @ at 2014-05-05 00:22:
顶个

小孩 (@luchaorong) | @ at 2014-05-05 00:03:
卟错卟错

小三 (@xskj) | @ at 2014-05-02 16:04:
顶你

冒泡网：http (@mrppj) | @ at 2014-05-02 04:04:
笑哥好，我网站CSS太垃圾了，能帮我做个不，我网站是mrppj.com

笑忘书 (@35230) | @ at 2014-05-01 23:22:
因为是直接用新浪的代码。。

轩辕银河 (@zpl) | @ at 2014-05-01 22:38:
挺像的

Subscribe | Register | Login | N