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