這兩天讓新人（剛畢業，此前未接觸前端）切了個頁面，發現了一些問題，聯想到自己初入前端的時候因為沒人帶不可避免的也走了很多彎路，所以借着跟他講解的機會，在這里把新人切頁面中常見的問題和不好的習慣列舉一下。
首先上psd：
他交上來的作業是這樣的：
首先來分析一下頁面上最直觀的問題：
-
導航欄hover效果沒有加：對於前端工程師這個崗位，仔細！仔細！仔細！重要的事情說三遍。
-
banner圖按鈕跟圖片切到了一起。
-
右方背景圖缺失，一看就是把整個背景切成了一張大圖，在小屏幕電腦上看不出來，一到了大屏幕上就出問題了。這么做有兩個缺點：一是無法適應比背景圖大的屏幕，如上圖；二是資源過大，網速慢的時候你看到的是一張白屏背景。
-
右側列表用了ul和li的組合，很多新人不知道dl>dt>dd的組合，比ul>li的組合放在這里更合適。
-
字體未設置
-
a標簽默認的樣式沒有去掉
-
footer中的文字垂直未居中
下面再來看一下代碼：
-
id名稱不規范，把導航寫成了banner，把banner寫成了header，很多人會覺得不以為然，只要我寫的樣式和標簽一一對應不就行了嗎？這么寫，首先別人看上去就會覺得你不專業，還有就是，搜索引擎的seo根本不認識你寫的代碼。
-
不懂得使用class定義公共樣式，小紅點的圖片每個標題都加了一次。
再來看CSS文件： -
測試加的背景不刪掉
-
過度使用position，根本不了解relative和absolute 的關系，也不知道應該什么時候用position，很多新人都喜歡用絕對定位，是因為只要我寫了absolute，調整top和left值，總會變成我想要的效果，至於為什么設置的top值和left值這么大，不知道。
-
公共樣式不提取，什么時候用到什么時候再寫一遍。
-
還有一個很常見的問題就是喜歡設高度，不管什么反正設個寬和高，這樣確實避免了很多問題，但是首先這樣做從根本上是不對的，你的網頁沒有任何可擴展性，其次，很多問題因為你設置了高度而沒有機會去發現，比如浮動清除。
-
只用px這個單位，有時候em的效果更好，比如字體縮進。
總的來說主要出現的就是上述問題：作為過來人想告訴初入前端的人的就是
-
切圖請精確到像素級，不要憑感覺，感覺和psd稿差不多就行了，這樣有很多問題你根本發現不了。
-
勤思考。思考解決問題的代碼我為什么要這么寫，原理是什么，而不是只要解決的問題我就把代碼往上堆。這樣就不會出現設置了inline-block又去設置float：left這樣的事情。
-
勤請教。沒有代碼檢查的公司，你寫出的代碼沒人幫你follow的話，你會給自己挖很多坑。