教你如何使用CSS3和jQuery制作精美的登陆表单.doc

教你如何使用CSS3和jQuery制作精美的登陆表单在本教程中，我们将编写的登录表单，你可以在FuturicoUIPro找到，它是由VladimirKudinov制作。我们将使用CSS3和jQuery来做。:.Dreamweavercs5css3jquery:.HTML标记首先，让我们写HTML标记。创建一个包含输用户名，密码，复选框，提交的表单。1.<div2.<h1惠州网站建设</h13.<formaction=4.<inputtype=textname=usernameplaceholder=username5.<inputtype=passwordname=passwordplaceholder=password6.<span7.<inputtype=checkboxname=checkbox8.<labelfor=checkboxremember</label9.</span10.<inputtype=submitvalue=login11.</form</div一般CSS样式首先，我们将删除我们将使用的边缘，填充，边框元素。.login-form,.login-formh1,.login-formspan,.login-forminput,.login-formlabelmargin:0;padding:0;border:0;outline:0;然后我们把表单做成容器。我们将添加一个相对位置，一个固定的宽度和高度，背景颜色，圆角和一些阴影。.login-formposition:relative;width:200px;height:200px;padding:15px25px025px;margin-top:15px;cursor:default;background-color:141517;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-box-shadow:0px1px1px0pxrgba(255,255,255,.2),inset0px1px1px0pxrgb(0,0,0);-moz-box-shadow:0px1px1px0pxrgba(255,255,255,.2),inset0px1px1px0pxrgb(0,0,0);box-shadow:0px1px1px0pxrgba(255,255,255,.2),inset0px1px1px0pxrgb(0,0,0);创建箭头。.login-form:beforeposition:absolute;top:-12px;left:10px;width:0px;height:0px;content:&39;&39;border-bottom:10pxsolid141517;border-right:10pxsolid141517;border-top:10pxsolidtransparent;border-left:10pxsolidtransparent;我们将给表单标题加些基础样式如颜色，字体，字体大小等。.login-formh1line-height:40px;font-family:&39;MyriadPro&39;,sans-serif;font-size:22px;font-weight:normal;color:e4e4e4;通用输入样式首先给输入定义基础样式。.login-forminputtype=text,.login-forminputtype=password,.login-forminputtype=submitline-height:14px;margin:10px0;padding:6px15px;border:0;outline:none;font-family:Helvetica,sans-serif;font-size:12px;font-weight:bold;text-shadow:0px1px1pxrgba(255,255,255,.2);-webkit-border-radius:26px;-moz-border-radius:26px;border-radius:26px;-webkit-transition:all.15sease-in-out;-moz-transition:all.15sease-in-out;-o-transition:all.15sease-in-out;transition:all.15sease-in-out;然后我们定义用户名和密码输入样式。我们将添加一个灰色的背景梯度和一些阴影。我们也将增加固定170px宽度和文本的颜色。.login-forminputtype=text,.login-forminputtype=password,.js.login-formspancolor:686868;width:170px;-webkit-box-shadow:inset1px1px1px0pxrgba(255,255,255,.6);-moz-box-shadow:inset1px1px1px0pxrgba(255,255,255,.6);box-shadow:inset1px1px1px0pxrgba(255,255,255,.6);background:989898;background:-moz-linear-gradient(top,ffffff0%,989898100%);background:-webkit-gradient(linear,lefttop,leftbottom,color-stop(0%,ffffff),color-stop(100%,989898);background:-webkit-linear-gradient(top,ffffff0%,989898100%);background:-o-linear-gradient(top,ffffff0%,989898100%);background:-ms-linear-gradient(top,ffffff0%,989898100%);background:linear-gradient(top,ffffff0%,989898100%);我们将改变输入阴影来达到悬停状态。.login-forminputtype=text:hover,.login-forminputtype=password:hover-webkit-box-shadow:inset1px1px1px0pxrgba(255,255,255,.6),0px0px5pxrgba(255,255,255,.5);-moz-box-shadow:inset1px1px1px0pxrgba(255,255,255,.6),0px0px5pxrgba(255,255,255,.5);box-shadow:inset1px1px1px0pxrgba(255,255,255,.6),0px0px5pxrgba(255,255,255,.5);我们将改变一个更轻的CSS3梯度来达到激活状态。.login-forminputtype=text:focus,.login-forminputtype=password:focusbackground:e1e1e1;background:-moz-linear-gradient(top,ffffff0%,e1e1e1100%);background:-webkit-gradient(linear,lefttop,leftbottom,color-stop(0%,ffffff),color-stop(100%,e1e1e1);background:-webkit-linear-gradient(top,ffffff0%,e1e1e1100%);background:-o-linear-gradient(top,ffffff0%,e1e1e1100%);background:-ms-linear-gradient(top,ffffff0%,e1e1e1100%);background:linear-gradient(top,ffffff0%,e1e1e1100%);提交按钮定义提交按钮属性为右浮动。.login-forminputtype=submitfloat:right;cursor:pointer;color:445b0f;-webkit-box-shadow:inset1px1px1px0pxrgba(255,255,255,.45),0px1px1px0pxrgba(0,0,0,.3);-moz-box-shadow:inset1px1px1px0pxrgba(255,255,255,.45),0px1px1px0pxrgba(0,0,0,.3);box-shadow:inset1px1px1px0pxrgba(255,255,255,.45),0px1px1px0pxrgba(0,0,0,.3);悬停状态，改变背景。.login-forminputtype=submit:hover-webkit-box-shadow:inset1px1px3px0pxrgba(255,255,255,.8),0px1px1px0pxrgba(0,0,0,.6);-moz-box-shadow:inset1px1px3px0pxrgba(255,255,255,.8),0px1px1px0pxrgba(0,0,0,.6);box-shadow:inset1px1px3px0pxrgba(255,255,255,.8),0px1px1px0pxrgba(0,0,0,.6);.login-forminputtype=submit:active-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;我们将添加一个绿色的渐变按钮。.login-forminputtype=submit,.js.login-formspan.checked:beforebackground:a5cd4e;background:-moz-linear-gradient(top,a5cd4e0%,6b8f1a100%);background:-webkit-gradient(linear,lefttop,leftbottom,color-stop(0%,a5cd4e),color-stop(100%,6b8f1a);background:-webkit-linear-gradient(top,a5cd4e0%,6b8f1a100%);background:-o-linear-gradient(top,a5cd4e0%,6b8f1a100%);background:-ms-linear-gradient(top,a5cd4e0%,6b8f1a100%);background:linear-gradient(top,a5cd4e0%,6b8f1a100%);复选框样式现在我们将开始最困难的部分，因为我们无法像定义其它元素那样用CSS来定义复选框。我们找到最简单的方法是只用CSS中用一个span标签来替换复选框输入。大概是这样：首先我们隐藏复选框输入，定义span标签属性，让它像一个复选框，然后用jQuery更新这个复选框。当我们点击span标签的时候，jQuery将更新复选框为选中状态，再次占击span标签，jQuery将移除选中状态。由于一些用户可能禁用JavaScript，我们需要添加一个备用。要做到这一点，我们将使用jQuery添加到body中。首先隐藏复选框输入。.js.login-forminputtype=checkboxposition:fixed;left:-9999px;然后定义span标签位置。.login-formspanposition:relative;margin-top:15px;float:left;现在给span标签加一些基础样式。.js.login-formspanwidth:16px;height:16px;cursor:pointer;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;为了达到选中状态的效果，我们将创建一个最小的方块，定义它的位置居中。.js.login-formspan.checked:beforecontent:&39;&39;position:absolute;top:4px;left:4px;width:8px;height:8px;-webkit-box-shadow:0px1px1px0pxrgba(255,255,255,.45),inset0px1px1px0pxrgba(0,0,0,.3);-moz-box-shadow:0px1px1px0pxrgba(255,255,255,.45),inset0px1px1px0pxrgba(0,0,0,.3);box-shadow:0px1px1px0pxrgba(255,255,255,.45),inset0px1px1px0pxrgba(0,0,0,.3);我们将定义标签的样式，让它在复选框的右面，再加些基础样式如字体，颜色等等。.login-formlabelposition:absolute;top:1px;left:25px;font-family:sans-serif;font-weight:bold;font-size:12px;color:e4e4e4;jQuery首先我们将链入最新版本的jQuery库,然后添置以下代码到HTML页面的DODY底部。<scriptsrc=https:/jquery/1.7.1/jquery.min.js</script<script$(document).ready(function()/CheckifJavaScriptisenabled$(&39;body&39;).addClass(&39;js&39;);/Makethecheckboxcheckedonload$(&39;.login-formspan&39;).addClass(&39;checked&39;).children(&39;input&39;).attr(&39;