JQ 與 Vue 結合

範例結果

三、利用JQ加入背景圖片

S1:利用JQ,在Vue 的 mounted之下,加入背景圖片

S2:CSS美化

(1) 將【#app>div】圖片重疊排列

(2) 將【#app>title】置於圖片下方

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

(3) 將【#app>title】基本美化

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

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

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

參考連結:【content屬性