程式碼及圖片

一、分離CSS

把css重複的部分移植到新的頁面而減少程式碼冗餘，單獨建立一個 CSS，以便後續的頁面重複呼叫。

多觀察頁面，總結出相同的樣式，注意取名，方便呼叫。

二、html頁面切換

不同的html頁面通過連結實現跳轉，常用class="active"，設定當前頁面導航欄樣式。

三、通過新增背景漸變過渡，避免文字與背景顏色融合看不清

background: linear-gradient(to bottom right, rgba(0,0,0,0.7), rgba(0,0,0,0.0)) no-repeat center, url(../img/headline.jpg) no-repeat center ; 

四、a標籤通常不單獨設定樣式，一般都將超連結歸類到 UL 裡。若單獨使用：

1.從語義不明確，如果外部包含 UL 可以理解為標籤列表；

2.從 CSS 佈局排版上，UL 作為一個整體，更容易統一排版；

3.從 SEO 角度考慮，大量 a 標籤有可能會被判定堆積關鍵字嫌疑，從而導致網站降權， 用 UL 包含判斷則讓搜尋引擎判定為有條例的列表，對搜尋引擎更加友好。

五、CSS程式碼簡潔

如子元素都有text-align: center; 等相同樣式，可將其寫在父元素樣式裡，個別不同的子元素可單獨設定樣式。

六、HTML程式碼簡潔

如：把除了標題和其他圖片有關的簡要資訊都歸於 <figcaption>可以達到更好的排版效果。 

七、輸入框間距設定

用p標籤包含，再設定行高來控制jian。

<div class="form left"> 
<p> 
<label for="from_city">出發城市</label> 
<input type="text" name="from_city" id="from_city" placeholder="城市名"> 
</p> 
<p> 
<label for="to_city">返回城市</label> 
<input type="text" name="to_city" id="to_city" placeholder="城市名"> 
</p> 
</div> 
 

八、設定表格間隔樣式

table tr:nth-child(2n) { background-color: #fafafa; } 偶數行背景顏色加深。

九、注意設定樣式的先後順序，優先順序權重（比如前面寫了a標籤樣式，後面直接用a裡面一個class名設定樣式是不行的，必須a.class名，不然上面的a權重更大），避免樣式覆蓋。

十、統一頁面字型

font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei UI", "Microsoft YaHei", SimHei, "\5B8B\4F53", simsun, sans-serif;