對於這次滑動手風琴樣式的製作我確實學到了很多東西像用ul無序列表來構建整體框架，用a鏈結的偽元素before和after的使用來實現大小圖示的切換以及展開與關閉，最主要的還是響應式的網頁製作收穫挺大的
滑動手風琴html部分還是挺簡單的就拿第乙個部分youtube來說
"tab">
"social youtube">
"#">youtube
"content">
this is youtube...........................
.accordin
然後就是對a標籤的乙個偽元素設定來實現大小圖示和顏色變化
這裡拿的是youtube
.youtube a::before,
.youtube a::after
.youtube a::after
.social a::before,
.social a::after
最後是響應式的介面
@media
(max-width
:950px )
.tab
.accordin
.tab .container
.tab:hover
}@media
(max-width
:680px)
.accordin
}
最後看一下成品
不知道為啥出了點問題偽元素觸發的時候背景顏色只有一半
.tab:hover
.tab:hover .social a::before
.tab:hover .social a::after
.tab .content
.tab .content h1
.tab .content p
.social a::before,
.social a::after
.social a::after
.youtube a::before,
.youtube a::after
.youtube a::after
然後還有
前面的都好好的就最後乙個github圖示出了問題
因為樣式都是一起寫的所以這我也不知道哪的問題
.accordin
.tab
問題還是要解決的，不說了，我再去看看是哪的的問題吧。
3 手風琴翻摺效果 手風琴 抖風箱的方法和要領
什麼是抖風箱？左手臂通過快速的顫抖，實際上就是緊縮的 短距離 拉推風箱動作，使手風琴產生一連竄高速重複的樂音，效果類似於小提琴 二胡等弓絃樂器的碎弓 抖弓和顫弓。這種樂音可以營造 渲染出興奮 熱烈 緊張等一些特殊的藝術效果。如何練習手風琴抖風箱呢？首先，抖風箱的動作不是僅憑手腕，而主要是小臂和肘部，...
關於絕對定位的使用要點（手風琴bug）
首先 上結構 再上css樣式 ul ul li small big 下面這個是我們想要的效果可實際這樣的效果卻是 兩個小重疊在左邊了 有點奇怪，明明設定了absolute絕對定位讓他們相對於最近的父元素定位在left 0 top 0 怎麼會都重合定在容器的左邊呢？於是我們想到辦法 給他們的li設定r...
jquery，scss實現簡單的手風琴效果
首先頁面引用jquery，基本的css，之後開始對頁面進行整體的布局,首先乙個大的div作為容器並且設定容器的大小，之後採用ul li的形式並且要設定為浮動float left，裡面巢狀a標籤為了跳轉頁面 具體如下方 html 之後開始寫css，要想要裡面的在還未全部顯示的時候怎麼辦，這個時候就要設...