---
# System prepended metadata

title: CSS 切版挑戰賽
tags: [學期 3, week3]

---

###### tags: `學期 3` `week3`
[toc]
# CSS 切版挑戰賽

## Before Webinar
### 報名 Week 2 CSS 切版挑戰賽！

#### Week 2 CSS 切版挑戰賽資訊 

<div style="background: #ececec; padding: 15px; margin-bottom: 10px; border-radius: 10px; font-weight: bold; width:fit-content;">
    <p style="margin-block-start: 0em;">
      • 活動時間：8/11 (三) 19:30 - 21:00<br>
      • 與會連結：<a href="https://zoom.us/j/92178001105">https://zoom.us/j/92178001105</a><br>
      • 會議密碼：237093<br>
      <span style="color:#CE2D0F; font-size: 0.95rem; font-weight: bold;">注意：請使用電腦開啟連結，並確認「麥克風可以使用」，以利工作坊進行</span>
    </p>
    <a class="btn btn-normal" target="_blank" href="https://calendar.google.com/event?action=TEMPLATE&tmeid=c2Jta2RtN2NicjJqcjVpZDluZDdicnBjMnMgczdpYmk3OHUxZ2NuYTRxOWhtbzc4cGxoMjhAZw&tmsrc=s7ibi78u1gcna4q9hmo78plh28%40group.calendar.google.com">將行程添加到 Google 日曆</a>
</div>

<div style="line-height:16px;"></div>
#### 挑戰主題
這是 Jiang 助教設計給大家的挑戰版型：([figma 設計圖稿](https://www.figma.com/file/CyjOMKv2tg6Nv731tiiTaF/CSS_Challenge?node-id=0%3A1))
![](https://i.imgur.com/AtyrPkg.png)

#### 指定規格
![](https://i.imgur.com/g99Ibo5.png)


#### 事前準備工作＆提示
我們為你準備了 [initial code](https://codepen.io/wang-jiang-yang/pen/JjRqLBZ?editors=1100)，請先研究一下裡面的程式碼。
請到 MDN 認識 [white-space](https://developer.mozilla.org/en-US/docs/Web/CSS/white-space) 這個屬性，我們會用 display:inline-block ，搭配 white-space: nowrap; 來完成導覽介子項目 & 下方圖卡的排版效果。

<div class="further-reading" style="background: #ececec;">
  <div class="further-reading-inner-wrapper">
<h5>無法參與工作坊怎麼辦？</h5>
<p>我們理解許多同學們一邊工作一邊學習，時間上不見得皆能每次參與。因此工作坊結束後隔天，我們會將工作坊的錄影與當天所使用的相關資料 (投影片、Sample Code) 整理發佈課程單元中。</p>
<p>但如果時間允許，我們相當推薦同學盡量參與工作坊，與助教、同學們即時互動，一起實作，對於學習的吸收成效更佳。</p>
  </div>
</div>

## After Webinar
## CSS 切版挑戰 -- 2021 / 5 月班會後精華

<center><img style="width:60%;" src="https://assets-lighthouse.alphacamp.co/uploads/image/file/15094/Screenshot_2021-01-25___5.10.40.png"></center>

6 月 9 日舉辦的 CSS 切版挑戰工作坊，助教講師 Jiang 帶領同學們，先拆解畫面的 HTML 架構(如上圖)與實作切入手法，並透過講解示範後與同學分享畫面切版的實務心法。


<div style="position: relative;width:100%;height:0;padding-bottom: 56.25%;">  <iframe style="position:absolute;top:0;left:0;width:100%;height:100%" src="https://player.vimeo.com/video/561203137" frameborder="0" allowfullscreen></iframe></div>
<div style="height: 16px;"></div>


--
#### 同學會後心得

##### 本次活動滿意度：4.7 ⭐️

🗣 感謝 AC 舉辦這場工作坊，透過這次的工作坊體認到在排版上有很多細節可以去思考，要好好理解練習 CSS 各種設定的規則並且互相搭配活用～

🗣 透過助教詳細的講解&實作，運用到很多不太了解的技巧，對於排版方面更加印象深刻。

--

#### 工作坊投影片

<div style="position: relative;width:100%;height:0;padding-bottom: 56.25%;">
    <iframe style="position:absolute;top:0;left:0;width:100%;height:100%" src="https://docs.google.com/presentation/d/e/2PACX-1vQOitR0ax0gl5RqXSUqw1GMctJ8ZTpmdau2fuVEPRPo417d9FzwGWLTGfPIOY6LM5yI47fkOnMh4yCU/embed?start=false&loop=false&delayms=3000" frameborder="0" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true">
    </iframe>
</div>


##### Sample Code

* [CSS 切版挑戰 - 初始程式碼](https://codepen.io/wang-jiang-yang/pen/JjRqLBZ?editors=1000)
* [CSS 切版挑戰 - 最終程式碼](https://codepen.io/wang-jiang-yang/pen/dypEdpO)
* [CSS Position Guide - 1](https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/)
* [CSS Position Guide - 2](https://codepen.io/wang-jiang-yang/pen/JjKwXOW?editors=0100)
* [線性漸層](https://developer.mozilla.org/zh-CN/docs/Web/CSS/linear-gradient())