大家是不是會看到一些CSS店鋪有一個特別好玩的排行榜呢？當鼠標移動到任意一個名次標題時，對應的寶貝就會彈出，而沒被點到的寶貝就不顯示，沒錯，這就是CSS店鋪才擁有的獨特排行榜，那么，這么好玩的東西，我們普通店鋪能夠擁有嗎？小毅的回答是：當然！今天我就讓大家實現手風琴式排行榜！
------功能與效果-------
1：個性觸控
2：展示寶貝由你定，所有數據由自己定，更換方便
3：不受版面約束，就連寶貝詳情界面都能運用
4：效果視圖（當然滾動速度沒有這么快啦，呵呵，是5秒一次）
------使用方法-------
為了照顧新手淘友，我已經把代碼寫的很完整了，是不用您修改代碼的，當然，您如果有興趣自己研究，那最好，呵呵，所以接下來新手淘友只用安裝和修改一些信息就OK咯，不要急，一個字一個字的看，絕對能看懂的
代碼的安裝
第一步：進入您店鋪的裝修頁面，在您的190模塊底部，您會看到一個“在此處添加新模塊”的區域，點擊它，建會彈出模塊對話框，選擇添加“自定義內容區”，之后在您的190模塊處，就會多出一個新的“自定義內容區”了哦~呵呵，看不懂？來看看示意圖吧：
第二步：模塊已經添加了，現在我們雙擊剛剛添加的自定義內容區，就會彈出編輯界面，我們可以看到上面有一排按鈕，這時我們點擊最右邊的那一個按鈕，我們就進入了代碼編輯模式了，來看看步驟圖：
第三步：下載附件區的代碼壓縮包，下載成功后，雙擊打開，里面會是一個名為“代碼”的txt文本，直接雙擊打開吧~之后全選（快捷鍵：Ctrl+A）文本里的全部內容，全部復制（快捷鍵：Ctrl+A），回到自定義內容區，在編輯區里進行粘貼，這時代碼就全部進入了自定義內容區的代碼編輯模式了，接下來您就可以再次點擊最右邊的那一個按鈕，就可以看到實際的效果了~
看看步驟圖：
寶貝的更換
1----文字的更換：只用將您要更換的文字選中，再輸入您要的文字就行（選中就是將鼠標左鍵按著不動，移動鼠標，框選文字就行，框選之后，直接輸入文字）
框選效果：
2----圖片的更換：淘寶的系統優化，為我們的裝修帶來了便捷，現在我們只用雙擊圖片就能直接編輯圖片的地址和鏈接了；那么，現在我們已經能在自定義內容
區看到圖片了，可是圖片鏈接并不是您要的，現在您要做的很簡單，那排名第一的寶貝舉例，雙擊寶貝圖片，您將會看見圖片的屬性框，里面
有圖片的地址和鏈接地址，你只需要把你要放上去的寶貝的寶貝圖片和寶貝地址對應替換進相應的窗口就行了，之后點擊確定
如圖所示：
3----替換完您要修改的全部信息后，您就可以點擊自定義內容區的保存按鈕了，OK，點擊發布吧，手風琴式排行榜，我們就使用成功了
------附件區------
代碼下載地址：http://u.115.com/file/f2d7d23279
下載方法
1----點擊進入上面連接
2----
可以選擇電信或備份下載，方式：
1----右鍵-----目標另存為
2----右鍵-----使用迅雷下載
---------------------------------------------------------------------------------
講到這里，今天的課也就結束了，趕快利用這個有趣的排行榜進行您獨特的寶貝展示吧！嘻嘻，以后還有更加好玩實用的東西教給大家喲~呵呵
樂發網超市批發網提供超市貨源信息,超市采購進貨渠道。超市進貨網提供成都食品批發,日用百貨批發信息、微信淘寶網店超市采購信息和超市加盟信息.打造國內超市采購商與批發市場供應廠商搭建網上批發市場平臺,是全國批發市場行業中電子商務權威性網站。
本文來源： 普通店鋪利用CSS特效實現手風琴式排行榜
