最近看過幾個(gè)基于HTML5開發(fā)的移動(dòng)一樣，已經(jīng)越來越流暢了，相信隨著職能手機(jī)的配置越來越高性能越來越好，HTML5技術(shù)的使用在移動(dòng)端應(yīng)用的會(huì)越來越普及，應(yīng)用越來越廣泛，因此作為移動(dòng)開發(fā)者，掌握這門技術(shù)自然有著強(qiáng)烈的緊迫感。今天就寫一個(gè)小小的登錄頁面的demo，鞏固最近的學(xué)習(xí)，也給有興趣的朋友學(xué)習(xí)HTML5技術(shù)做個(gè)參考。
在這里您可以下載到我最后實(shí)現(xiàn)的登錄頁面的demo源碼，
地址: http://pan.baidu.com/s/1kU1I50b 。
樣圖分析
1.這個(gè)是一個(gè)簡(jiǎn)單的登錄頁面，從頁面效果圖上看，我們可以通過圖片來做按鈕效果，也可以完全通過代碼來實(shí)現(xiàn)。本文將通過純?cè)创a的形式來實(shí)現(xiàn)。
2.前端開發(fā)通常要將UI設(shè)計(jì)的效果圖進(jìn)行切割，將他們分成不同的模塊，本例只是一個(gè)簡(jiǎn)單的頁面，但是這種切割思路同樣適合其他大型網(wǎng)頁，別看像進(jìn)洞，淘寶頁面內(nèi)容繁多，但是當(dāng)您靜下心來，將他們切割，分塊之后，您會(huì)發(fā)現(xiàn)其實(shí)用到的技術(shù)都差不多。下圖是我對(duì)這個(gè)登錄頁面的切割思路：
這個(gè)頁面可以有很多的切塊方式，但是為了擴(kuò)展性，分不同功能進(jìn)行盡可能小的模塊切割是我個(gè)人認(rèn)為比較合適的方式。切割完之后，我們就可以編寫我們的HTML5頁面了。
操作步驟
1.在項(xiàng)目目錄下創(chuàng)建login.html文件，在項(xiàng)目目錄下創(chuàng)建CSS目錄，并在CSS目錄下創(chuàng)建login.css樣式文件。如圖所示結(jié)構(gòu)：
2.然后按照我們剛才的設(shè)計(jì)，在index.html中實(shí)現(xiàn)我們的想法，加入如下代碼:
3.完成HTML頁面元素設(shè)計(jì)之后，我們就需要使用剛才創(chuàng)建的login.css樣式文件控制頁面顯示樣式了。不過先在頁面中添加樣式文件關(guān)聯(lián)鏈接。
4.然后就可以打開login.css設(shè)計(jì)我們的顯示樣式了，這里就不一步一步帶您操作了，直接貼代碼，我會(huì)把每個(gè)步驟注釋清楚。
[代碼]php代碼：
/*按照樣圖要求，添加一個(gè)淺灰色背景*/
body{
background-color: #F2F2F2;
}
/*設(shè)置內(nèi)容模塊距離頂部一個(gè)有一段距離150px*/
.content {
margin-top: 150px;
}
/*登錄和注冊(cè)按鈕的整體樣式*/
.content button {
height: 30px;/*登錄和注冊(cè)按鈕的高度*/
color: white;/*登錄和注冊(cè)按鈕字體顏色為白色*/
font-size: 18px;/*登錄和注冊(cè)按鈕的字體大小*/
border: 0px;/*無邊框*/
padding: 0px;/*無內(nèi)邊距*/
cursor: pointer;/*登錄和注冊(cè)按鈕的選擇時(shí)為手形狀*/
}
/*登錄面板*/
.content .panel {
background-color: white;/*登錄面板背景顏色為白色*/
width: 302px;/*寬度為302px*/
text-align: center;/*子內(nèi)容居中*/
margin: 0px auto;/*自身居中*/
padding-top: 20px;/*頂部的內(nèi)邊距為20px*/
padding-bottom: 20px;/*底部的內(nèi)邊距為20px*/
border: 1px solid #ddd;/*邊框顏色為灰色*/
border-radius: 5px;/*邊框邊角有5px的弧度*/
}
/*登錄和密碼組*/
.content .panel .group {
text-align: left;/*子內(nèi)容居中*/
width: 262px;/*寬度為262px*/
margin: 0px auto 20px;/*自身居中，并距離底部有20px的間距*/
}
.content .panel .group label {
line-height: 30px;/*高度為30px*/
font-size: 18px;/*字體大小為18px*/
}
.content .panel .group input {
display: block;/*設(shè)置為塊，是為了讓輸入框獨(dú)占一行*/
width: 250px;/*寬度為250px*/
height: 30px;/*高度為30px*/
border: 1px solid #ddd;/*輸入框的邊框*/
padding: 0px 0px 0px 10px;/*左邊內(nèi)邊距為10px，顯得美觀*/
font-size: 16px;/*字體大小*/
}
.content .panel .group input:focus{
border-left: 1px solid #CC865E;/*當(dāng)輸入框成為焦點(diǎn)時(shí)，左邊框顏色編程褐色*/
}
.content .panel .login button {
background-color: #CC865E;/*按鈕的背景顏色*/
width: 260px;/*按鈕的寬度*/
}
.content .panel .login button:hover {
background-color: white;/*按鈕選中后背景顏色為白色*/
color: #CC865E;/*按鈕選中后字體顏色為褐色*/
border: 1px solid #CC865E;/*按鈕選中后邊框顏色為褐色*/
}
/*注冊(cè)按鈕*/
.content .register {
text-align: center;/*子內(nèi)容居中*/
margin-top: 20px;/*頂部的內(nèi)邊距為20px*/
}
.content .register button {
background-color: #466BAF;/*按鈕的背景顏色為藍(lán)色*/
width: 180px;/*按鈕的寬度*/
}
.content .register button:hover {
background-color: white;/*按鈕選中后背景顏色為白色*/
color: #466BAF;/*按鈕選中后字體顏色為藍(lán)色*/
border: 1px solid #466BAF;/*按鈕選中后邊框顏色為藍(lán)色*/
}
5.所用工作完成，最后運(yùn)行一下看看最終效果吧。
如果您看到這里，那我想謝謝你的閱讀。期待您和我一起進(jìn)步成長(zhǎng)。