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

其中有幾個要注意的點：

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

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

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

4、header要固定在頁首。

5、頁面布局用百分比來設定，調節width，以適應不同屏幕。

6、為適應不同手機屏幕，要在head標簽內加上下面的一句代碼：

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

一、header部分

1、要固定頁首，所以設置header為： position:fixed; top:0;

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

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

設置li為 display: inline-block；

為了實現分割線（如下圖），我設置了li的padding和border-right，最后一個li設置 border-right:none; 即可。

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

二、leftBar部分

1、leftBar中的選項還是用ul、li來布局，至于leftBar我設的是float:left。

2、在完成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謝謝）。

三、rightBar部分

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

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

如果有人想探討交流或要源碼，可以留言，O(∩_∩)O謝謝

如有不足，請幫我指出。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com