在網站開發時，前端設計非常重要，用戶直接面對的是前端頁面，就算你后臺功能寫得多好多強大，前端體驗不好，用戶可能會馬上關閉頁面。下面我們舉一個例子，談一談前端開發時，應該注意哪些，如何才能做好前端。

 

一個頁面的細節，從重構的角度去看，頁面的精細度，代碼的可讀性、擴展性，為下游服務的代碼注釋，交互接口樣式的書寫，代碼的壓縮，圖片的優化等都可以歸為細節處理，我的理解是，剛才提到的細節處理是每個重構工程師都應該具備的基本技能，不能算是真正意義上的細節，好的細節處理應該是從用戶出發，應該是發自內心對用戶的一種關懷。下面有兩個小例，都是我們做頁面時常見的板塊，如果我們細心處理一下，也許會讓用戶會倍感貼心。

 

如上圖，輪播圖上切換按鈕(如上圖小方塊按鈕)是用戶對輪播圖進行交互的重要入操作點，重要程度毋庸置疑，在分析設計稿的時候發現，按鈕的可點擊區域太小了，只有22×2!要用戶完成圖片的切換顯然是一件非常痛苦的事，這會給用戶帶來不愉悅的心情。因此，我們得想辦法讓點擊區域變大。

 

可能的解決辦法：

 

1、建議產品讓視覺設計師把按鈕改大一點。

如果重新設計按鈕，改變按鈕的表現形式呢? 顯然不可行，視覺設計師不會為了一個小改動而輕易改變視覺風格，即使設計師同意，改完之后設計稿要重新給產品審核，通過審核之后再給重構，顯然這個方法的溝通成本和改動成本都太高了，性價比不高。

 

2、保留原設計，通過CSS來控制

輪播圖這類按鈕的結構我們一般會這樣寫：

要實現色塊區域是22×2，實際可點區域是22×12，兩個方法：

 

　　1、用背景圖：這個色塊比較簡單，純色方角，樣式完全可以控制，沒有必要用背景圖;

　　2、用樣式控制：為了使可點區域高為12像素，那么作用元素的標準盒子有以下幾種方式

　　A、height+padding;

　　B、height+border;

　　C、height+偽元素(E:after / E:before);

 

　　由于背景色會作用到padding區域，考慮兼容高低端瀏覽器，A方式不適用，B和C都可以用

 

　　我們先看一下B方式—- height+border，CSS代碼如下：

 

 

　　運行代碼后會發現，IE6和IE7顯示正常，但是Chrome、Firefox、Opera、IE7+的border區域也填充了背景色。

　　我們再看一下C方式—-height+偽元素(E:after / E:before)，CSS代碼如下：

 

 

　　這回Chrome、Firefox、Opera、IE7+顯示正常了，但是IE6和IE7并不支持偽元素E:after和E:before，色塊消失了。

　　因此，我們只好用B方式(height+border)對IE6 和IE7 作hack處理了，最終代碼如下：

 

 

　　到此，輪播圖按鈕的可點擊區域由原來的22×2增加到了22×12，是原來的6倍，這樣用戶就可以很容易地完成圖片的切換，舒心的操作。