###### 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())