先上示例，攜程首頁酒店模組的效果圖如下：
程式碼結構如下：
|
這種結構在顯示上沒有任何問題，切換城市時下面的列表會相應改變。但當無法正常載入css時顯示效果就比較杯具了，截圖如下：
接下去是其它城市的列表，太長了圖片沒有截全。我們需要的至少是城市與所屬它的列表顯示在一起，在視覺上歸屬同一個模組，也就是說要在程式碼結構上把它們按照業務邏輯重現出來：
|
這樣當頁面出現no css的時候顯示效果就比較接近真實需求：
到這裡就離成功不遠了，接下來的問題是如何用現在的 dl, dt, dd 實現想要的視覺效果。
1. 先給所有 dl 的外層 div 加樣式：position: relative，再給 dd 設定 position: absolute，這樣列表就可以脫離 dl 的文字流了，切換列表時保證它們顯示在同一個位置；
2. 城市橫排顯示，這時設 dl 為浮動 float: left，再重新整理果然橫過去了。不過現在笑還早了點，不要忘了還有那萬惡的 IE6 要相容：給 dt 設定浮動並轉行內元素，否則會有多餘的空隙 float: left; display: inline; 再重新整理就OK了；
3. 補充一點為什麼要在 dd 中加 ul，這要視頁面結構而定，每一條除了標題還有價格，還有個需要轉化的人民幣符號 ¥，如果直接用 a 連結就需要大批量行內轉塊元素，比較耗效能。最初想用多個 dd，但因為有絕對定位的原因列表會重疊在一起，所以更換方案。