4.7 練習
練習1:搜尋框 :focus 狀態的轉場效果
指定檔名:search_transition.html
說明:
搜尋框 100px
放大鏡 icon 定位在搜尋框的恰當位置(如圖)。
點擊 focus 狀態的時候,寬度變成 100%,需設定 transition
結果示意:
提供 html:
搜尋 icon 的圖片路徑:
https://alldata.sgp1.digitaloceanspaces.com/images/searchicon.png
參考作法:
練習2:圖片編排 - 文字蓋在圖片上方及滑動
指定檔名:text_cover.html
說明:
整個區塊是一個連結,點擊開新分頁。(連到任意網址皆可)
圓角 5px。
「美麗的風景」文字顏色
#FFF
,背景色hsla(0, 0%, 0%, .5)
,文字大小.8rem
。定位在距離上方 10px、距離左側 0px。「次要說明」文字,樣式同上,但預設看不到,定位在距離左側 0px、距離下方 0px。
滑鼠移過連結區塊,「次要說明」文字,往上滑出(transition):
transform .5s
。
結果示意:
提供 html:
參考作法:
練習3:頁面下滑,置頂區域的呈現
指定檔名:fixed_top_nav.html
結果示意:
提供最上方置頂的那塊 html:
載入 jQuery :(放在 </body>
結束標籤之前)
以下程式放在 </body>
結束標籤之前,在上述 jQuery 載入之後:
參考作法:
Last updated