先看案例效果演示：

這個(gè)也是很簡(jiǎn)單和常見(jiàn)的側(cè)邊欄效果，基礎(chǔ)布局一樣只需要一個(gè)div 加下面的a標(biāo)記，點(diǎn)擊跳轉(zhuǎn)就可以了。這里是一個(gè)效果所以鏈接給一個(gè)# 不用跳轉(zhuǎn)就可以了，這個(gè)是基礎(chǔ)的html 布局部分：

這個(gè)里有一個(gè)操作就是點(diǎn)擊，通常點(diǎn)擊是用JS 來(lái)做，而CSS3 也和可以點(diǎn)擊效果的，通過(guò)input 和 label綁定就可以了。

這里注釋都寫(xiě)好了，看著這個(gè)代碼多寫(xiě)多敲幾遍 基本都沒(méi)有多少問(wèn)題了，點(diǎn)擊的實(shí)現(xiàn)靠的是 ：checked這個(gè)屬性，同時(shí)適當(dāng)?shù)挠?CSS3得分選擇器，就簡(jiǎn)單許多了。

?