9 練習 1 介面 hamburger icon
檔名建議:btn_hamburger.html
例如以下 apple 行動版官網,影片示意:
提供 html:
Copy < button type = "button" id = "btn_hamburger" ></ button >
切換 class 的 JS 程式:
Copy let btn_hamburger_el = document .getElementById ( "btn_hamburger" );
btn_hamburger_el .addEventListener ( "click" , function (){
this . classList .toggle ( "-on" )
});
參考作法:
2 導覽列縮合
檔名建議:nav_switch.html
提供 html:
Copy <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:
Copy 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 如下:
Copy <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
:
Copy div .block {
width : 150 px ;
aspect-ratio : 2 / 1 ; /* height 就會是 75px */
}
參考作法:
4 行動版呈現左右滑動
檔名建議:mobile_slide.html
提供 html 如下:
Copy <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
。
Copy <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>
執行完的結果示意:
參考作法: