動畫集錦(P2)

【.movie】廣告輪播

範例結果

 

一、【.movie】畫面準備

S1:【.movie】畫面準備

S1-1:html結構

S1-2:利用JQ加入背景圖片

S1-3:CSS美化

(1) 將【.movie>div】圖片重疊排列

(2) 將【.movie>title】置於圖片下方

除了一般CSS美化習慣,利用position外,使用Flex 也可以設定 z-index

(3) 將【.movie>title】基本美化

※span 置於右下角,利用margin-top:auto時,需要flex考量

(4) 將【.movie>title】,利用【li.on】者表示正在顯示的CSS美化,並在上方加入三角形

(5) 利用 CSS美化中,【:after】中【content】的【data-*】應用

參考連結:【content屬性