教你如何使用CSS3和jQuery製作精美的登陸表單
在本教程中，我們將編寫的登入表單，你可以在Futurico UI Pro找到，它是由Vladimir Kudinov製作。我們將使用CSS3和jQuery來做。
工具/原料
Dreamweaver cs5 css3 jquery
步驟/方法
HTML 標記
首先，讓我們寫HTML標記。建立一個包含輸使用者名稱，密碼，複選框，提交的表單。
1.
2.
惠州網站建設
3.
一般CSS樣式
首先，我們將刪除我們將使用的邊緣，填充，邊框元素。
.login-form,
.login-form h1,
.login-form span,
.login-form input,
.login-form label {
margin: 0;
padding: 0;
border: 0;
outline: 0;
}
然後我們把表單做成容器。我們將新增一個相對位置，一個固定的寬度和高度，背景顏色，圓角和一些陰影。
.login-form {
position: relative;
width: 200px;
height: 200px;
padding: 15px 25px 0 25px;
margin-top: 15px;
cursor: default;
background-color: #141517;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0px 1px 1px 0px rgba(255,255,255, .2), inset 0px 1px 1px 0px rgb(0,0,0);
-moz-box-shadow: 0px 1px 1px 0px rgba(255,255,255, .2), inset 0px 1px 1px 0px rgb(0,0,0);
box-shadow: 0px 1px 1px 0px rgba(255,255,255, .2), inset 0px 1px 1px 0px rgb(0,0,0);
}
建立箭頭。
.login-form:before {
position: absolute;
top: -12px;
left: 10px;
width: 0px;
height: 0px;
content: '';
border-bottom: 10px solid #141517;
border-right: 10px solid #141517;
border-top: 10px solid transparent;
border-left: 10px solid transparent;
}
我們將給表單標題加些基礎樣式如顏色，字型，字型大小等。
.login-form h1 {
line-height: 40px;
font-family: 'Myriad Pro', sans-serif;
font-size: 22px;
font-weight: normal;
color: #e4e4e4;
}
通用輸入樣式
首先給輸入定義基礎樣式。
.login-form input[type=text],
.login-form input[type=password],
.login-form input[type=submit] {
line-height: 14px;
margin: 10px 0;
padding: 6px 15px;
border: 0;
outline: none;
font-family: Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
text-shadow: 0px 1px 1px rgba(255,255,255, .2);
-webkit-border-radius: 26px;
-moz-border-radius: 26px;
border-radius: 26px;
-webkit-transition: all .15s ease-in-out;
-moz-transition: all .15s ease-in-out;
-o-transition: all .15s ease-in-out;
transition: all .15s ease-in-out;
}
然後我們定義使用者名稱和密碼輸入樣式。我們將新增一個灰色的背景梯度和一些陰影。我們也將增加固定170px寬度和文字的顏色。
.login-form input[type=text],
.login-form input[type=password],
.js .login-form span {
color: #686868;
width: 170px;
-webkit-box-shadow: inset 1px 1px 1px 0px rgba(255,255,255, .6);
-moz-box-shadow: inset 1px 1px 1px 0px rgba(255,255,255, .6);
box-shadow: inset 1px 1px 1px 0px rgba(255,255,255, .6);
background: #989898;
background: -moz-linear-gradient(top, #ffffff 0%, #989898 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#989898));
background: -webkit-linear-gradient(top, #ffffff 0%,#989898 100%);
background: -o-linear-gradient(top, #ffffff 0%,#989898 100%);
background: -ms-linear-gradient(top, #ffffff 0%,#989898 100%);
background: linear-gradient(top, #ffffff 0%,#989898 100%);
}
我們將改變輸入陰影來達到懸停狀態。
.login-form input[type=text]:hover,
.login-form input[type=password]:hover {
-webkit-box-shadow: inset 1px 1px 1px 0px rgba(255,255,255, .6), 0px 0px 5px rgba(255,255,255, .5);
-moz-box-shadow: inset 1px 1px 1px 0px rgba(255,255,255, .6), 0px 0px 5px rgba(255,255,255, .5);
box-shadow: inset 1px 1px 1px 0px rgba(255,255,255, .6), 0px 0px 5px rgba(255,255,255, .5);
}
我們將改變一個更輕的CSS3梯度來達到啟用狀態。
.login-form input[type=text]:focus,
.login-form input[type=password]:focus {
background: #e1e1e1;
background: -moz-linear-gradient(top, #ffffff 0%, #e1e1e1 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e1e1e1));
background: -webkit-linear-gradient(top, #ffffff 0%,#e1e1e1 100%);
background: -o-linear-gradient(top, #ffffff 0%,#e1e1e1 100%);
background: -ms-linear-gradient(top, #ffffff 0%,#e1e1e1 100%);
background: linear-gradient(top, #ffffff 0%,#e1e1e1 100%);
}
提交按鈕
定義提交按鈕屬性為右浮動。
.login-form input[type=submit] {
float: right;
cursor: pointer;
color: #445b0f;
-webkit-box-shadow: inset 1px 1px 1px 0px rgba(255,255,255, .45), 0px 1px 1px 0px rgba(0,0,0, .3);
-moz-box-shadow: inset 1px 1px 1px 0px rgba(255,255,255, .45), 0px 1px 1px 0px rgba(0,0,0, .3);
box-shadow: inset 1px 1px 1px 0px rgba(255,255,255, .45), 0px 1px 1px 0px rgba(0,0,0, .3);
}
懸停狀態，改變背景。
.login-form input[type=submit]:hover {
-webkit-box-shadow: inset 1px 1px 3px 0px rgba(255,255,255, .8), 0px 1px 1px 0px rgba(0,0,0, .6);
-moz-box-shadow: inset 1px 1px 3px 0px rgba(255,255,255, .8), 0px 1px 1px 0px rgba(0,0,0, .6);
box-shadow: inset 1px 1px 3px 0px rgba(255,255,255, .8), 0px 1px 1px 0px rgba(0,0,0, .6);
}
.login-form input[type=submit]:active {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
我們將新增一個綠色的漸變按鈕。
.login-form input[type=submit],
.js .login-form span.checked:before {
background: #a5cd4e;
background: -moz-linear-gradient(top, #a5cd4e 0%, #6b8f1a 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a5cd4e), color-stop(100%,#6b8f1a));
background: -webkit-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%);
background: -o-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%);
background: -ms-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%);
background: linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%);
}
複選框樣式
現在我們將開始最困難的部分，因為我們無法像定義其它元素那樣用CSS來定義複選框。
我們找到最簡單的方法是隻用CSS中用一個span標籤來替換複選框輸入。
大概是這樣：首先我們隱藏複選框輸入，定義span標籤屬性，讓它像一個複選框，然後用jQuery更新這個複選框。
當我們點選span標籤的時候，jQuery將更新複選框為選中狀態，再次佔擊span標籤，jQuery將移除選中狀態。
由於一些使用者可能禁用JavaScript，我們需要新增一個備用。要做到這一點，我們將使用jQuery新增到body中。
首先隱藏複選框輸入。
.js .login-form input[type=checkbox] {
position: fixed;
left: -9999px;
}
然後定義span標籤位置。
.login-form span {
position: relative;
margin-top: 15px;
float: left;
}
現在給span標籤加一些基礎樣式。
.js .login-form span {
width: 16px;
height: 16px;
cursor: pointer;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
為了達到選中狀態的效果，我們將建立一個最小的方塊，定義它的位置居中。
.js .login-form span.checked:before {
content: '';
position: absolute;
top: 4px;
left: 4px;
width: 8px;
height: 8px;
-webkit-box-shadow: 0px 1px 1px 0px rgba(255,255,255, .45), inset 0px 1px 1px 0px rgba(0,0,0, .3);
-moz-box-shadow: 0px 1px 1px 0px rgba(255,255,255, .45), inset 0px 1px 1px 0px rgba(0,0,0, .3);
box-shadow: 0px 1px 1px 0px rgba(255,255,255, .45), inset 0px 1px 1px 0px rgba(0,0,0, .3);
}
我們將定義標籤的樣式，讓它在複選框的右面，再加些基礎樣式如字型，顏色等等。
.login-form label {
position: absolute;
top: 1px;
left: 25px;
font-family: sans-serif;
font-weight: bold;
font-size: 12px;
color: #e4e4e4;
}
jQuery
首先我們將鏈入最新版本的jQuery庫,然後添置以下程式碼到HTML頁面的DODY底部。
首先新增js到body標記中。
$('body').addClass('js');
然後我們讓複選框在頁面載入時為選中狀態。
$('.login-form span').addClass('checked').children('input').attr('checked', true);
恭喜！您已經完成了本教程。希望這是對您有用，喜歡它。
注意事項
檢測流覽器是否禁用js