產(chǎn)品列表頁(yè)的產(chǎn)品分類(lèi)在用戶搜索商品時(shí)有很有效的指向性，能將搜索范圍縮小，最大程度的集中同一類(lèi)的產(chǎn)品。如何很好的完成產(chǎn)品列表頁(yè)的產(chǎn)品分類(lèi)，這個(gè)學(xué)習(xí)的過(guò)程只需要10分鐘

使用html、css、bootstrap3設(shè)計(jì)一個(gè)電子商務(wù)網(wǎng)站產(chǎn)品列表頁(yè)的產(chǎn)品分類(lèi)（效果如下圖）。

步驟.實(shí)現(xiàn)商品分類(lèi)布局

知識(shí)點(diǎn)：

- bootstrap自帶樣式：container、row、breadcrumb、active、clearfix

- 自定義樣式：nav-group、nav-item、nav-item:first-child、item-head、item-head h4、item-bo

展開(kāi)全文

完整代碼鏈接：https://www.itbegin.com/apps/mooc/b28458acd7cc44a29597d113fc53bcff

ITbegin是專(zhuān)注于在線編程應(yīng)用和研發(fā)的互聯(lián)網(wǎng)公司，官網(wǎng)：www.itbegin.com

10分鐘快速學(xué)會(huì)淘寶首頁(yè)banner輪播圖

10分鐘快速學(xué)會(huì)側(cè)邊欄 Bootstrap

10分鐘快速使用BOOTSTRAP制作導(dǎo)航條