如何布局登錄頁面

cnblogs 發(fā)布時(shí)間：2010-07-21 01:08:53 作者：豪情

混跡學(xué)習(xí)網(wǎng)N長時(shí)間了，學(xué)習(xí)網(wǎng)也陪我度過不少青澀的歲月。一直想給學(xué)習(xí)網(wǎng)奉獻(xiàn)點(diǎn)什么，但苦于忙碌奔波于塵世瑣事之中無暇抽身。今天終于驅(qū)除雜念，一心向佛，痛定思痛，分享點(diǎn)自己的心得。

所謂login就是一般的登錄頁面，應(yīng)用系統(tǒng)或網(wǎng)站后臺都會用到這個login頁面，因?yàn)橥ㄟ^這個頁面的用戶名密碼信息的驗(yàn)證才能登進(jìn)系統(tǒng)做必要的操作。所以這個頁面這個頁面的關(guān)鍵及重要性不言而語。另外本人也是拋磚引玉，借此更好向高手們學(xué)習(xí)靠近。

第一步：先從工具談起，工具建議使用 dw cs4 + zen coding組合。關(guān)于這個組合的具體請參看我的另外幾篇文章。

http://www.cnblogs.com/jikey/tag/zen+coding/

也許會有人問，不用dw cs4不行嗎？不用zen coding不行嗎？我的回答是：當(dāng)然可以。但是用了這兩個工具之后，使你的工作效率能提高許多。同樣一件事情，你用別人一半的時(shí)間就做出來了。這就是你的優(yōu)勢。

第二步：拿到設(shè)計(jì)圖，先別急著切，先分析。

因?yàn)榍袌D不只是切圖，設(shè)計(jì)不只是設(shè)計(jì)。你得考慮四方面的因素：

1. 合理的切圖，語義準(zhǔn)確，注釋明了。

這個主要就是考慮不同的瀏覽器，不同的顯示設(shè)備等等。

語義我就不說了，這不是一個入門分享，而是在掌握基本概念的基礎(chǔ)上的實(shí)例分享。注釋明了的意思是：不管是css,html文件都要寫好注釋，不然，過一段時(shí)間，某塊代碼塊的含義你自己都會搞不清的，別說是其它人。

2. 切圖的同時(shí)更要考慮程序嵌套問題。

因?yàn)槟闱型陥D的頁面是交給程序員的，而程序員是看的不是設(shè)計(jì)視圖，而是干干凈凈的代碼。所以這時(shí)候考慮代碼的縮進(jìn)，合理的結(jié)構(gòu)嵌套循環(huán)，無論是div還是table。就程序來說，它處理的是頁面上有機(jī)的重復(fù)的html結(jié)構(gòu)單元，而不只是為了得到瀏覽器里邊最終效果。設(shè)計(jì)圖里的內(nèi)容是不可變的，而程序處理的內(nèi)容是可變的。

另外：你的思維是平面散發(fā)式的，程序員的思維是直線邏輯性，有時(shí)候要站在別人的角度來思考問題，你會有更意外的收獲。

3. 合理的把握時(shí)間。

整個項(xiàng)目有總體的時(shí)間，到你這兒有單獨(dú)的頁面開發(fā)時(shí)間。這個時(shí)間要掌握好，因?yàn)闀r(shí)間是質(zhì)量的靈魂。

4. http請求，瀏覽器最簡單的執(zhí)行原理，計(jì)算機(jī)最基礎(chǔ)原理。

這個是最主要的，好多開發(fā)者，都不知道什么是http請求，瀏覽器執(zhí)行原理是什么東東，我現(xiàn)在用的瀏覽器版本，不太清楚，應(yīng)該是ie9吧。

這里我想說的是：因?yàn)槟銖氖碌氖沁@個行業(yè)，這個行業(yè)有它本身的游戲規(guī)則，不知道游戲規(guī)則，你就不知道怎么玩，知道了游戲規(guī)則你才會玩，才會玩得高興，才會玩得high。才不會為了月底的那點(diǎn)俸祿而驅(qū)使你的靈魂走向墜落的深淵。

也有好多人納悶一件事情，同樣的代碼在我邊上機(jī)子可以，我這兒死活不行，殺了我也不行。ie可以,ff連圖片都顯示不了。其實(shí)要求也不高，你也不需要懂什么二次四次握手信號，你只是需要具象的把頁面在瀏覽器執(zhí)行的過程在腦海中模擬出來就行了。這個往深就不多說了，不是磚家不敢多言。

關(guān)于布局我再說兩句，拿到一個設(shè)計(jì)稿效果圖時(shí)該如何下手，怎么樣的方案是適合seo，程序員，方便以后維護(hù)的，這都應(yīng)該考慮到的問題。

但對一個剛?cè)腴T的來說要求不高，先知道怎么樣把設(shè)計(jì)圖能變成xhtml + css 的文件就可以了。畢竟胖子不是一口吃成的，是一大口一大口吃成的。

xhtml + css 布局就我個人來看有三種：

1. 一種是自然布局。

所謂自然者，就是順其自然，不用其它布局元素的修飾。

復(fù)制代碼

代碼如下:

2.流動布局

流動布局可以這樣理解，當(dāng)頁面像瀑布或你的思想一樣從頂部流下來，沒有任何阻擋沒有任何改變，它的目的地是footer,copyright兩個PLMM。但當(dāng)遇到float 的時(shí)候它的流向就要改變。如果left就先流向left然后在流向right，right則相反。而且會影響后邊元素的定位，還得clear一下。

一句話：流行布局會在一個平面內(nèi)動態(tài)的改變自然布局，那會有人問，還有不在一個平面的布局的事，有，繼續(xù)看。

3.絕對布局

一般用的就是把父元素定為：position:relative;子元素就會以這個父元素容器的左上角為布局參考點(diǎn)進(jìn)行布局。形象的來說，父元素在金字塔底，子元素依次向塔尖走。這就不在一個平面內(nèi)了。

這三種布局請參照朱印宏的：《css布局之道》或其它網(wǎng)絡(luò)資源。

蝦扯蛋的就這么多，下面是真正的實(shí)例。

拿到效果圖的第一件事件先觀察，看這個頁面用那種布局更合適一些。拿到的一個頁面你就想象成一塊已經(jīng)制作好的畫布成品，你需要重新理解設(shè)計(jì)者的創(chuàng)作的思維，然后再把它切開后重新用xhtml+css方式組合起來。用最少的代碼，最少圖片來展現(xiàn)它。這就是你的工作，你的使命。

　　

這個設(shè)計(jì)稿的背景頂上有點(diǎn)漸變，下邊還有一個漸變橫條。

按一般人思維就是整一個大的圖片當(dāng)背景。

這樣會出現(xiàn)兩個問題，一是屏幕太大，圖片太小，其它的區(qū)域顯示空白。二是圖片太大，瀏覽肯定非常占帶寬。

所以我們想出一個即能兼容各個瀏覽器的，又能是圖片的點(diǎn)帶寬資源最小的可能。那就是把大的背景圖片裁成寬度為1px，高度為按設(shè)計(jì)定值。然后讓瀏覽器來平鋪重復(fù)這個1px圖片。像我們這種情況，就讓它橫向重復(fù)(repeat-x)。如果垂直方向的圖形成規(guī)律性，就讓它縱向重復(fù)(repeat-y)。當(dāng)然也可以全鋪(repeat)。如果客戶的顯示器過大，瀏覽器過寬，水平方向已經(jīng)平鋪了，還剩下下面圖片鋪不到的，就用顏色填充。當(dāng)然還有一個問題，這個圖片的位置，頂部有漸變，裁圖也是從頂部開始，那圖片的位置就居頂，水平方向就不用控制。由于這個圖片是填充整個屏幕的，所以樣式要寫在寫在body里邊。這樣，body 里邊的樣式：

body{background:url(../images/main_bg.gif) repeat-x top center #0e85c2;}

然后再看中間的那塊主要的登錄部分。

這個整體的直角的設(shè)計(jì)，相對于整個頁面中居中顯示，而且左上角是一個孤度線條。所以我的想法就直接放成背景圖片。里邊的元素按規(guī)則排版就可以了。

這是拿到設(shè)計(jì)稿初步的分析，余下的工作才是真正的進(jìn)入正題。

由于剛才的body已經(jīng)出來，這時(shí)候你毫不猶豫的新建xhtml頁面，嵌入新建css文件，也切出1px背景圖片，放入相應(yīng)的images文件。

這時(shí)候我們看以上相應(yīng)的css文件:

body{background:url(../images/main_bg.gif) repeat-x top center #0e85c2;}

呈現(xiàn)的效果背景效果，但沒有中間的登錄框。開始感覺也沒有什么問題。所以我們繼續(xù)往下。

中間登錄框，繼續(xù)以大背景填充，也不需要小圖片來拼湊，主要是因?yàn)榈卿涰撁姹旧眄撁嬖厣?，可下載量低，所以這么大的圖片影響總體的速度很小。

可以在ps圖層面板右擊選擇所有文字圖層，然后右擊左邊眼睛，隱藏本圖層，就會隱藏掉所有選中的文字圖層。

然后，定義屬性，寫寬高，放置背景圖片都沒有問題。這時(shí)候頁面上的結(jié)構(gòu)為：

<div id="wrapper"></div>

css樣式為：

body{background:url(../images/main_bg.gif) repeat-x top center #0e85c2;font-size:12px;font-family:arial,helvetica,sans-serif,"宋體";}

這時(shí)候會發(fā)現(xiàn)，邊緣會有8 個px的間距，這個間距每個瀏覽器下面是不一樣的。為了去除這個間距，就不得不提到初始化瀏覽器，html,css默認(rèn)樣式的問題，類似于程序中的構(gòu)造函數(shù)，靜態(tài)方法等。瀏覽器不管怎么著，一上來先給我把初始化這些東西先執(zhí)行一下在說。

這個其實(shí)是由于body默認(rèn)的一個間距，除了body有這個間距之外，還有其它很多html元素都有這個屬性。

具體我不一一列舉，可以把這一類屬性單獨(dú)成一文件，一般叫 reset.css

yui 2 reset

http://yui.yahooapis.com/2.8.1/build/reset/reset-min.css

復(fù)制代碼

代碼如下:

html{color:#000;background:#FFF;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var,optgroup{font-style:inherit;font-weight:inherit;}
del,ins{text-decoration:none;}
li{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
abbr,acronym{border:0;font-variant:normal;}
sup{vertical-align:baseline;}
sub{vertical-align:baseline;}
legend{color:#000;}
input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}
input,button,textarea,select{*font-size:100%;}

QQ的reset部分

復(fù)制代碼

代碼如下:

body{margin:0;padding:0 0 12px 0;font-size:12px;line-height:22px;font-family:"宋體","Arial Narrow";background:#fff;-webkit-text-size-adjust:none;}
form,ul,li,p,h1,h2,h3,h4,h5,h6{margin:0;padding:0;}
input,select{font-size:12px;line-height:16px;}
img{border:0;}
ul,li{list-style-type:none;}
.tc{text-align:center;}
.tl{text-align:left;}
.tr{text-align:right;}
.dis{display:block;}
.undis{display:none;}
.fl{float:left;}
.fr{float:right;}
.cl{clear:both;}
.fb{font-weight:bold;}
.fnb{font-weight:200;margin-left:-1px;}
.fc30{color:#303030;font-family:"宋體","Arial Narrow";}
.fchot{color:#ff0700}
.f11{font-size:12px;font-family:tahoma;}
a{color:#00007F;text-decoration:none;}
a:hover{color:#bd0a01;text-decoration:underline;}
h3{font-size:14px;}
h4{font-size:14px;font-weight:normal;text-align:center;cursor:pointer;overflow:hidden;}
h4 a{width:100%;height:100%;display:block;}
a.lcblue{color:#0F479C;}
.lchot,a.lchot{color:#bd0a01;}
.black,a.black{color:#000;}
.hr_6,.hr_10{font-size:1px;line-height:1px;clear:both;}
.hr_6{height:6px;}
.hr_10{height:10px;}

對于本文來說，body{margin:0;padding:0;}就已足矣，其它的屬性諸位讀者抽空慢慢研究吧。

等這個間距問題解決后發(fā)現(xiàn)，不能居中，還不能居頂。于是乎，想到了在body里邊加text-align:center;發(fā)現(xiàn)，沒用。于是換另外magin:0 auto 。
為了更一步方便各個瀏覽器兼容，我采用絕對定位這種布局。

#wrapper{width:694px;height:466px;background:url(../images/loginmain_bg.gif) no-repeat;position:relative;margin:0 auto;top:188px;}

wrapper為relative，子元素會以wrapper左上角為參考點(diǎn)進(jìn)行布局。

系統(tǒng)名稱，絕對定位，left,top分別對應(yīng)離wrapper左上角水平垂直距離，很容易實(shí)現(xiàn)。

用戶名與密碼輸入框，是兩行布局的，這種我一般采用li列表形式，然后單行，用戶名等采用label 左浮動，文字右對齊的方式。關(guān)于label 的用法，諸位可以參看小志《css那些事》或其它相關(guān)網(wǎng)絡(luò)資源。
登錄后臺，放以圖片。
其它諸位自己分析理解，如不詳細(xì)贅述。
頁面中用的Jikey.js是根據(jù)《javascript dom程序設(shè)計(jì)》的思路整理的一個簡單的js。諸位有興趣可以深入了解js。

psd,html文件與圖文完整pdf