教你如何使用CSS3和jQuery製作精美的登陸表單
在本教學中，我們將編寫的登入表單，你可以在Futurico UI Pro找到，它是由Vladimir Kudinov製作。我們將使用CSS3和jQuery來做。
1
HTML 標記首先，讓我們寫HTML標記。建立一個包含輸使用者名稱，密碼，核取方塊，提交的表單。1.<div>2. <h1>惠州網站建設</h1>3. <form action="#">4. <input type="text" name="username" placeholder="username">5. <input type="password" name="password" placeholder="password">6. <span>7. <input type="checkbox" name="checkbox">8. <label for="checkbox">remember</label>9. </span>10. <input type="submit" value="log in">11. </form></div>2
3
4
一般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;}der-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;}5
6
通用輸入樣式首先給輸入定義基礎樣式。.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%);}s 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%);}7
8
提交按鈕定義提交按鈕屬性為右浮動。.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%);}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%);}9
10
核取方塊樣式現在我們將開始最困難的部分，因為我們無法像定義其它元素那樣用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;}現在給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;}11
12
jQuery首先我們將鏈入最新版本的jQuery庫,然後添置以下程式碼到HTML頁面的DODY底部。<script src="https://www.web0752.com/jquery/1.7.1/jquery.min.js"></script><script>$(document).ready(function() { // Check if JavaScript is enabled $('body').addClass('js'); // Make the checkbox checked on load $('.login-form span').addClass('checked').children('input').attr('checked', true); // Click function $('.login-form span').on('click', function() { if ($(this).children('input').attr('checked')) { $(this).children('input').attr('checked', false); $(this).removeClass('checked'); } else { $(this).children('input').attr('checked', true); $(this).addClass('checked'); } });});</script>首先新增js到body標記中。$('body').addClass('js');s).children('input').attr('checked')) { $(this).children('input').attr('checked', false); $(this).removeClass('checked'); } else { $(this).children('input').attr('checked', true); $(this).addClass('checked'); } });});</script>首先新增js到body標記中。$('body').addClass('js');13
然後我們讓核取方塊在頁面載入時為選中狀態。$('.login-form span').addClass('checked').children('input').attr('checked', true);恭喜！您已經完成了本教學。希望這是對您有用，喜歡它。
