效果展示
滑鼠移入到某張上時，使寬度變大，其餘寬度減小。滑鼠移入效果我們可以利用偽類:hover實現。
實現方法有兩種：
第一種：最傳統的布局方法，使用float。但需要計算縮小的尺寸，比較繁瑣。
第二種：使用 css3 加入的新樣式——彈性盒子display:flex，其中的彈性元素會自動分配剩餘空間，無需手動計算縮小後每張所佔畫素。
我們先來展示 float 的寫法：
html 結構：
>
>
src=
"1.png"
alt="
" />
li>
>
src=
"2.png"
alt="
" />
li>
>
src=
"3.png"
alt="
" />
li>
>
src=
"4.png"
alt="
" />
li>
ul>
*
body
imgli
ulul:hover li
ul li:hover
注意：先設定 ul:hover li，再設定 ul li:hover。順序千萬不能反，否則會出 bug。因為滑鼠第一觸碰到的肯定是它的父級盒子 ul，其次再是裡面的 li，所以順序不能反！html 結構：
>
>
src=
"1.png"
alt="
" />
li>
>
src=
"2.png"
alt="
" />
li>
>
src=
"3.png"
alt="
" />
li>
>
src=
"4.png"
alt="
" />
li>
ul>
*
body
imgli
ulli:hover
overflow:hidden，li裡面的會超出li的寬度（只是表面上看上去的視覺隱藏了，因為後者li蓋住了前者li，起到了視覺隱藏）。超出的部分會影響彈性元素li的自適應，當你滑鼠放上去時候會發現，後面的元素被擠走了，前面的也沒有發生自適應。如下圖所示：
各位看官，如果覺得有幫助，麻煩看完給個三連
jquery手風琴特效顯示外掛程式
bootstrap垂直手風琴特效1 bootstrap垂直手風琴特效2 bootstrap垂直手風琴特效3 bootstrap垂直手風琴特效4 bootstrap垂直手風琴特效5 css3垂直手風琴特效 bootstrap標籤式垂直手風琴特效 css3和js響應式垂直手風琴特效 bootstrap超...
CSS實現 手風琴（簡單）
先上效果圖，一點一點寫的自己麻煩，別人也不會好好看，我找的時候也就是直接看 適合就拿哈哈哈哈哈 view裡面會多出來一點，然後我就直接把view的背景色弄成和body的背景色相同，就不會有灰色的那一塊了 上自己的菜雞 溫泉酒店 情侶酒店 設計酒店 青年旅舍 特色客棧 海島酒店 海外溫泉 這樣子也可以...
jquery，scss實現簡單的手風琴效果
首先頁面引用jquery，基本的css，之後開始對頁面進行整體的布局,首先乙個大的div作為容器並且設定容器的大小，之後採用ul li的形式並且要設定為浮動float left，裡面巢狀a標籤為了跳轉頁面 具體如下方 html 之後開始寫css，要想要裡面的在還未全部顯示的時候怎麼辦，這個時候就要設...