用css3和jQuery制作一个简单的精美表单

html代码如下：

<span class="title">Mask Your Input Forms and Make It Beauty</span>
<br/><br/>
<div id="container">
<p class="separator"><br/></p>
<p class="small-title">Too Plain</p>
<input class="too-plain" value="Enter your email here" />
<p class="separator"><br/></p>
<p class="small-title">Fading The Label</p>
<form>
    <label class="username-label" for="username">Username</label>
    <input type="text" name="username" class="username" />
    <label class="password-label" for="password">Password</label>
    <input type="password" name="password" class="password" />
</form>
<p class="separator"><br/></p>
<p class="small-title">Sliding? Don't Worry</p>
<form>
    <label class="username-label-sliding" for="username-sliding">Username</label>
    <input type="text" name="username" class="username-sliding" />
    <label class="password-label-sliding" for="password-sliding">Password</label>
    <input type="password" name="password" class="password-sliding" />
</form>
<p class="separator"><br/></p>
</div>

css代码如下：

  * {
    margin:0;
    padding:0;
}
body {
    text-align:center;
    font-family:Georgia, "Times New Roman", Times, serif;
    font-size:13px;
    line-height:1.5em;
    margin-top:8%;
    background:#eaeaea;
}
input {
    padding:7px;
    border:5px solid #e0e0e0;
    -webkit-border-radius:20px;
    border-radius:20px;
    -moz-border-radius:20px;
}
input:focus {
    outline:none;
}
#container {
    text-align:left;
    width:700px;
    margin-left:auto;
    margin-right:auto;
}
.separator {
    border-bottom:1px dashed #ccc;
    margin-bottom:3px;
}
.title {
    font-size:30px;
    margin-bottom:1.5em;
    font-weight:bold;
    font-style:italic;
    text-shadow:0 2px 0 #fff;
}
.small-title {
    font-size:20px;
    margin-bottom:0.5em;
    font-weight:bold;
    font-style:italic;
    text-shadow:0 2px 0 #fff;
}
.username-label, .password-label, .username-label-sliding, .password-label-sliding {
    position:absolute;
    margin:9px 9px 9px 12px;
}
.username-sliding, .password-sliding {
    width:150px;
}
a, a:visited, a:hover {
    text-decoration: none;
    color: #000;
}

jQuery代码如下：

$(document).ready(function(){
      $('.too-plain').focus(function(){
          if($(this).val()=="Enter your email here"