我們可以使用 HTML5 和 CSS3 實現(xiàn)簡單的手風(fēng)琴效果，我們還將使用 jQuery 來處理效果并為我們添加最后的潤色。效果如下圖所示：



首先，要構(gòu)建html內(nèi)容



添加主要的css樣式



其中用到的CSS 選擇器，有*，是針對頁面上的每個元素。許多開發(fā)人員將使用此技巧將 margins 和 padding. 雖然這對于快速測試當(dāng)然很好，但我建議您永遠(yuǎn)不要在生產(chǎn)代碼中使用它。它給瀏覽器增加了太多的 重量 ，而且是不必要的。有id選擇器，不過只能用一次，不允許重用。還有一個class 選擇器，可以多個元素使用。X > Y是只會選擇直接子代。選擇器 將div.i-marketing .box>ul只針對 s 的 ul直接子代 s   。 作為 first 的子級的 。div.i-marketing .box>ul出于這個原因，使用子組合器有性能優(yōu)勢。事實上，特別推薦在使用基于 JavaScript 的 CSS 選擇器引擎時。
巧妙的動畫頁面過渡可以為您的網(wǎng)站提供專業(yè)的外觀并改善用戶體驗，例如這里就添加了過渡，-webkit-transition: all 0.4s ease; 使頁面效果的切換更加順暢。
jQuery 長期以來一直是最流行的 JavaScript 庫之一。它幫助許多編碼人員加快了 Web 開發(fā)的步伐。它不是最前沿的庫，但它處理了大量必須由前端開發(fā)人員完成的工作，以提供跨瀏覽器的一致用戶體驗。該庫還附帶了許多方法，使 DOM 遍歷和操作（更改網(wǎng)頁的內(nèi)容）成為一項簡單的任務(wù)。
自 jQuery 早期以來，情況已經(jīng)有了很大的改進(jìn)，但使用該庫仍然可以比普通的 JavaScript 更容易地做事情。此處，需要確保在頁面上加載 了jQuery ，然后再添加如下圖的js。