9 練習

1 介面 hamburger icon

檔名建議:btn_hamburger.html

例如以下 apple 行動版官網,影片示意:

提供 html:

<button type="button" id="btn_hamburger"></button>

切換 class 的 JS 程式:

let btn_hamburger_el = document.getElementById("btn_hamburger");
btn_hamburger_el.addEventListener("click", function(){
  this.classList.toggle("-on")
});

參考作法:

2 導覽列縮合

檔名建議:nav_switch.html

提供 html:

<button type="button" id="btn_hamburger">導覽列縮合按鈕</button>

<nav class="main_nav" id="nav_block">
  <ul class="nav_list">
    <li><a href="#">首頁</a></li>
    <li><a href="#">關於我們</a></li>
    <li><a href="#">分類頁</a></li>
  </ul>
</nav>

提供 JS:

var btn_switch = document.getElementById("btn_hamburger");
btn_switch.addEventListener("click", function(){
  var nav_el = document.getElementById("nav_block");
  nav_el.classList.toggle("-on");
});

參考作法:

漸進式的展開縮合,因為會用到 JS,單靠 CSS 無法做到,故同學學完 JS 之後,可再來研究:

3 內容圖片佔滿版及寬高比

檔名建議:aspect_ratio.html

提供 HTML 如下:

<div class="img_block">
  <img src="https://picsum.photos/id/867/2000/300">
</div>
  • 當螢幕寬度小於等於 767.98px 以下時,圖片要在 div.img_block 區塊水平方向、垂直方向皆置中;且 div.img_block 需佔螢幕的滿版,且寬高比需是 2:1

  • 請參考下方 CodePen 的畫面結果,實作看看。

使用 aspect-ratio 來做一個元素的寬高比,例如寬高比 2:1

div.block{
  width: 150px;
  aspect-ratio: 2 / 1; /* height 就會是 75px */
}

參考作法:

4 行動版呈現左右滑動

檔名建議:mobile_slide.html

提供 html 如下:

<div class="list_container">
  <ul class="ul_list">
    <li class="item">
      <div class="item_block">
        <h1>標題1</h1>
        <img src="https://picsum.photos/id/500/200/100">
      </div>
    </li>
    <li class="item">
      <div class="item_block">
        <h1>標題2</h1>
        <img src="https://picsum.photos/id/500/200/100">
      </div>
    </li>
    <li class="item">
      <div class="item_block">
        <h1>標題3</h1>
        <img src="https://picsum.photos/id/500/200/100">
      </div>
    </li>
    <li class="item">
      <div class="item_block">
        <h1>標題4</h1>
        <img src="https://picsum.photos/id/500/200/100">
      </div>
    </li>
    <li class="item">
      <div class="item_block">
        <h1>標題5</h1>
        <img src="https://picsum.photos/id/500/200/100">
      </div>
    </li>
    <li class="item">
      <div class="item_block">
        <h1>標題6</h1>
        <img src="https://picsum.photos/id/500/200/100">
      </div>
    </li>
    <li class="item">
      <div class="item_block">
        <h1>標題7</h1>
        <img src="https://picsum.photos/id/500/200/100">
      </div>
    </li>
    <li class="item">
      <div class="item_block">
        <h1>標題8</h1>
        <img src="https://picsum.photos/id/500/200/100">
      </div>
    </li>
    <li class="item">
      <div class="item_block">
        <h1>標題9</h1>
        <img src="https://picsum.photos/id/500/200/100">
      </div>
    </li>
    <li class="item">
      <div class="item_block">
        <h1>標題10</h1>
        <img src="https://picsum.photos/id/500/200/100">
      </div>
    </li>
  </ul>
</div>

請直接參考下方 CodePen 的畫面結果,實作看看。

參考作法:

5 Youtube iframe 影片 RWD

檔名建議:youtube_iframe_rwd.html

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

<iframe height="315" width="560" class="test" src="https://www.youtube.com/embed/-RAdHJ-aquE" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

執行完的結果示意:

參考作法:

Last updated