Login登入頁面的製作流程（摘要）

標籤：

*****我的QQ號：1539832180。歡迎一起討論學習。***** 第一步：拿到設計圖，先別急著切，先分析。因為切圖不只是切圖，設計不只是設計。你得考慮四方面的因素：1. 合理的切圖，語義準確，注釋明了。**寫好注釋是關鍵。 2. 切圖的同時更要考慮程式嵌套問題。 因為你切完圖的頁面是交給程式員的，而程式員是看的不是設計檢視，而是乾乾淨淨的代碼。所以這時候考慮代碼的縮排，合理的結構嵌套迴圈，無論是div還是table。就程式來說，它處理的是頁面上有機的重複的html結構單元，而不只是為了得到瀏覽器裡邊最終效果。設計圖裡的內容是不可變的，而程式處理的內容是可變的。 **有時候要站在別人的角度來思考問題，你會有更意外的收穫。 3. 合理的把握時間。整個項目有總體的時間，到你這兒有單獨的頁面開發時間。這個時間要掌握好，因為時間是品質的靈魂。 4. http請求，瀏覽器最簡單的執行原理，電腦最基礎原理。這個是最主要的，好多開發人員，都不知道什麼是http請求，瀏覽器執行原理是什麼東東。  xhtml + css 布局就我個人來看有三種：1. 一種是自然布局。所謂自然者，就是順其自然，不用其它布局元素的修飾。

<style type="text/css">div{border:1px solid #ccc;width:100px;height:40px;margin:10px 0;}</style><div class="className_1"></div><div class="className_2"></div><div class="className_3"></div><div class="className_4"></div><div class="className_5"></div>

 

   2.流動布局流動布局可以這樣理解，當頁面像瀑布或你的思想一樣從頂部流下來，沒有任何阻擋沒有任何改變，它的目的地是footer,copyright兩個PLMM。但當遇到float 的時候它的流向就要改變，得先去看看MM的姐姐。如果left就先流向left然後在流向right，right則相反。而且會影響後邊元素的定位，為了不讓你整小三之類的事情，還得clear一下，不然會讓你的靈魂淨化到侏羅紀時代去找尋那失散已久的恐龍表妹。  3.絕對布局一般用的就是把父元素定為：position:relative;子項目就會以這個父元素容器的左上方為布局參考點進行布局。形象的來說，父元素在金字塔底，子項目依次向塔尖走。這就不在一個平面內了。 部分CSS初始化：

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%;} 

 

 

Login登入頁面的製作流程（摘要）