很多學員在學習的過程中都遇到過這樣的問題：為什么老師講的我都能聽懂，然而做起來卻總是諸多問題?千鋒哈爾濱校區老師告訴你，其實這是正常現象，誰也不能幾天就成為大師，你的實踐還太少了!練習多了，經驗多了，靜態網頁自然也就手到擒來。

　　靜態的網頁其實就是由兩部分組成，一個是底層結構HTML，另外一個就是負責修飾結構的CSS。其實書寫靜態網頁就像小時候過家家，首先得把需要的家庭成員找齊了，即首先考慮要做一個什么樣的網站，例如一個綜合類網站包括：搜索框、導航、文章類別模塊、文章標題以及一部分廣告板塊;一個博客主頁包括：導航、文章縮略、文章搜索、文章導航以及沒有顯示但可能會有的評論區。

　　寫頁面的時候是有劇本的，這個劇本指網頁設計圖，或者某個現有網頁，建議大家在模仿網上現有網頁的時候利用瀏覽器自帶的截圖功能，把整個完整的頁面截取下來，QQ瀏覽器，360瀏覽器都可以做到。這樣的優點在于可以利用PS自己一步步測量數據、切圖都做到親力親為，并且做到了頁面數據的精準度，而不是隨意的給數據，或者是利用瀏覽器的F12功能查看原網頁的數據。

　　按照設計好的劇本接著就可以找對應的成員了，例如百度網頁從上往下分為導航頭部、中間logo和表單、尾部二維碼和文字，相對來說頁面的整體布局是比較簡單的，當然還有很多不同類型的頁面，布局要復雜一些。

　　當看到一個網頁時，需要在腦海當中對頁面進行一個簡單的掃描，如果把頁面當成一張紙，要怎么樣從大到小一點點分割。當有了初步的認識之后，就可以把這些東西轉化成HTML結構，所有不同顏色的框框在寫的時候用的都是DIV。

　　從上往下，從大到小一點點先把某個模塊以不同的顏色色塊利用代碼堆積出來。保證大的模塊布局沒問題之后，在往里面放一些小的東西，比如圖片img、表單form input、文字、超鏈接a、列表ul li，這時候簡單的頁面結構就出來了。

　　接下來要把寫好的結構進行美化，不然頁面就會一團亂麻，沒有美感，而網頁當中潤色部分是用CSS來做的。這個環節需要更加細心，例如百度首頁導航紅色框整體在綠色框的右邊，需要給紅色框添加float：right;紅色框里面文字的字號大小，字體，字體顏色，水平間距，垂直間距都需要一點點寫。如果在寫的過程中遇見了問題，可以借助Chrome瀏覽器的調試功能，哪里錯了用箭頭點哪里，結構看左邊，CSS看右邊，看看CSS屬性有沒有顯示，有沒有劃掉，有沒有黃色報錯等等。

　　在做頁面時，需要大量的練習，才可以熟能生巧。一個頁面寫完之后，總結一下這個頁面在書寫過程中遇到了哪些問題，是怎么解決的，為什么這樣解決，深入思考這個模塊的這個效果可不可以用其他的方法來實現，以做到舉一反三。

　　千鋒HTML5大前端培訓，配合實戰項目講解網站頁面布局，讓你從容應對HTML、CSS的學習，基礎打好了，才能更有信心面對之后的挑戰。

上一篇

HTML5與傳統HTML的區別在哪里?

下一篇

培訓班出來的前端工程師有什么優勢