手機端分類頁面的效果圖實現

啥都不說先上效果圖吧。

看到效果圖，我首先把頁面分割爲如下模塊。

其中有幾個要注意的點：

一、點擊板塊1中的"城市1"、"城市2"等會切換版塊2中不一樣的div模塊;

二、板塊2中有不一樣的div模塊，它們的佈局都如板塊2所示，但只顯示一個div模塊，其它模塊隱藏；

三、點擊某個div模塊中leftBar的某一項，會在rightBar中顯示相對應的rightBar模塊，其它rightBar模塊隱藏。

四、header要固定在頁首。

五、頁面佈局用百分比來設定，調節width，以適應不一樣屏幕。

六、爲適應不一樣手機屏幕，要在head標籤內加上下面的一句代碼：

     <meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1.0,maximum-scale=1, user-scalable=0">

 

如今解釋下各部分實現的難點。

1、header部分

一、要固定頁首，因此設置header爲： position:fixed; top:0;

二、設置好header的高度，這到後面會有用的。

三、板塊1中的"城市1"、"城市2"，我直接用ul、li佈局，

     設置li爲 display: inline-block；

     爲了實現分割線（以下圖），我設置了li的padding和border-right，最後一個li設置 border-right:none; 便可。

四、header的背景圖可用CSS3背景顏色漸變或圖片解決，我偷了下懶，直接用圖片。

 

2、leftBar部分

一、leftBar中的選項仍是用ul、li來佈局，至於leftBar我設的是float:left。

二、在完成leftBar過程當中，我遇到兩個問題：一是leftBar如何實如今rightBar中滾動內容時，leftBar保持固定在屏幕左端，且高度要延伸至屏幕底部。

   

先談談這個問題怎麼解決吧，一開始直接設定了leftBar的高度爲100%，但發現沒什麼用。在老大的提示下，先設置了html、body等leftBar的父元素的高度爲100%，再設leftBar的高度爲100%，就解決了高度問題。

 

爲實如今rightBar中滾動內容時，leftBar保持固定在屏幕左端，我把leftBar設了position:fixed; 由於leftBar高度爲屏幕高度的100%，因此致使leftBar過長，會無端出現豎直方向上的滾動條，爲解決這個問題，我設了整個板塊2爲position:absolute; top:0 ;    再調節leftBar和rightBar的padding-top爲header的高度便可。（板塊2我也設了float：left; 因此它能包住leftBar&rightBar）

 

可是又出現了一個問題，leftBar有部分覆蓋在header上，這時，我就設了header爲position:relative; z-index:100; 讓header懸浮在leftBar上便可。

 

問題二：怎麼使leftBar上的選中選項的右邊沒有邊？

一開始我是設了每一個選項的border-right，但發現這條邊是一直延伸至下方的。

在老大的提示下，我直接設了leftBar的border-right，對於選中項用margin-right:-1px;就能夠把邊擋住，但我用的是margin-left:1px;不知道爲何一開始margin-right起做用，後來又不起做用（但願有人能解釋下，O(∩_∩)O謝謝）。

 

3、rightBar部分

rightBar部分比較簡單，爲了方便，我直接用table來佈局，比較整齊，一樣rightBar也要設padding-top爲header的高度，其它應該沒什麼問題。

 

JS切換模塊部分比較簡單，我就省略不講了。

若是有人想探討交流或要源碼，能夠留言，O(∩_∩)O謝謝

若有不足，請幫我指出。