如何布局登錄頁(yè)面

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

xhtml + css 布局就我個(gè)人來(lái)看有三種：

1. 一種是自然布局。

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

復(fù)制代碼

代碼如下:

2.流動(dòng)布局

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

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

3.絕對(duì)布局

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

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

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

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

　　

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

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

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

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

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

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

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

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

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

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

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

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

中間登錄框，繼續(xù)以大背景填充，也不需要小圖片來(lái)拼湊，主要是因?yàn)榈卿涰?yè)面本身頁(yè)面元素少，可下載量低，所以這么大的圖片影響總體的速度很小。

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

然后，定義屬性，寫(xiě)寬高，放置背景圖片都沒(méi)有問(wèn)題。這時(shí)候頁(yè)面上的結(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í)候會(huì)發(fā)現(xiàn)，邊緣會(huì)有8 個(gè)px的間距，這個(gè)間距每個(gè)瀏覽器下面是不一樣的。為了去除這個(gè)間距，就不得不提到初始化瀏覽器，html,css默認(rèn)樣式的問(wèn)題，類似于程序中的構(gòu)造函數(shù)，靜態(tài)方法等。瀏覽器不管怎么著，一上來(lái)先給我把初始化這些東西先執(zhí)行一下在說(shuō)。

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

具體我不一一列舉，可以把這一類屬性單獨(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;}

對(duì)于本文來(lái)說(shuō)，body{margin:0;padding:0;}就已足矣，其它的屬性諸位讀者抽空慢慢研究吧。

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

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

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

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

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

psd,html文件與圖文完整pdf