其實在前端的佈局過程中經常會碰到同一個樣式可以有很多種實現方法的。
在初期的時候也非常糾結於跟着視頻教程裏面的來寫，後來發現也不一定。
但是在寫了幾個小的靜態網頁，經過自己總結之後得到以下幾個小tip：
1、儘量簡潔網頁成分構造
例如有時候只需要一張圖片，但是要對圖片進行定位的時候很多人會選擇在div當中添加dmg，代碼如下：
<div class="index">
<img src="images/index.png" alt="">
</div>
但是我會選擇只使用一個div在css中選擇通過url（）函數來達到我想要的效果，代碼如下：
Html：
<div class="img"></div>
Css:
.img{
background: url(../images/index.png) no-repeat;
background-position: center center;
-webkit-background-size: cover;
background-size: cover;
}
這樣帶來的直接好處是類名或者標籤名深度變淺，數量減少，減小html構造的複雜程度，不容易寫到後面越來越混亂。另外一個好處是通過這樣的方式寫html可以不用js的情況下通過css來實現背景圖片的改變。還有一個好處是它單純是一個div的塊標籤，在使用浮動inline-block的時候會比較少碰到基準線混亂，要頻繁使用vertical-align的情況。
2、在網頁當中儘量少使用float，否則容易導致網頁不穩
網站使用浮動的情況對自適應的限制比較大，網站設計師沒有辦法保證用戶的瀏覽器是在什麼設備上運行的，也沒辦法保證是在多大的屏幕上運行的，因此可以想像，如果頻繁使用float參數，網頁當中含有很多的浮動，當遇到分辨率相對較小的屏幕時就會遇到各種標籤被排擠，從而導致原有排版全部被打亂的情況，甚至嚴重影響網站的原有功能。
3、當遇到問題急於找不到問題原理層面上的錯誤原因的時候，先放一放，找到別的解決方案。
在寫網站的時候，大部分時候尤其是上班的朋友肯定會有deadline，中間在寫代碼的過程中會碰到很多奇奇怪怪的bug。而在debug的過程當中往往非常費時間，有時候由於自己一個角度鑽死以後找不到解決方案會浪費大量的時間，從而導致任務無法按時完成。如果在嘗試debug以後沒有找到方案可以先把這個案例mark下來，用別的方案先去解決這個問題，然後回頭再解決這個問題。例如：有時候在li標籤當中碰到排版問題可以選擇先不用li，用a或者div或者其他標籤解決問題，或者採用不同的排版方案，而不是一味debug下去。
4、無論是什麼網站始終有版心的存在，在切割排版之前可以先把版心的結構搭好，方便後面的構造。