5. 練習

1 hamburger icon 的外掛

官網arrow-up-right

官方所提供的 css 在這arrow-up-right

自行挑選一個效果,學會套用。只需要看 Usage 的 1 ~ 4 點即可。

切換 class (使用 jQuery):

$(function(){
  
  // hamburger icon 的切換
  $("button.hamburger").on("click", function(){
    $(this).toggleClass("is-active");
  });

});

參考作法:

2 Youtube iframe 影片 RWD

提供以下 iframe 影片,它的寬高比為 560:315,也就是 16:9

執行完的結果示意:

參考作法:

3 關於圖片

頁面上的任何圖片,不管它在哪裡,或是螢幕的寬度是多少,都設定:

一切都是為了希望在預設上,圖片不要超出父元素。

4 關於表格

5 導覽列縮合

提供 html:

提供 jQuery 寫法:

結果示意:

參考作法:

實作類似 Youtube 版型

建立 youtube_layout.html 來撰寫以下各步驟:

第一步:https://youtu.be/_WbrNB61JZ0arrow-up-right

header 區域的高:60px。

側邊欄區域的寬:240px。

第二步:https://youtu.be/oRDd_HPAGNkarrow-up-right

第三步:

第四步:https://youtu.be/EsNq1FjpD1sarrow-up-right

  • 寬度小於等於 767px 時,介面調整。

  • 模擬漢堡按鈕,點擊後出現導覽列。

參考作法:

https://alldata.sgp1.digitaloceanspaces.com/sample/rwd_20250913.ziparrow-up-right

Last updated