夏季直播切版班-18組-第一週小組任務

第一題心理測驗

第二題 選擇題

以下範例程式碼的 .text 高度是多少？(請不要用瀏覽器觀察)
90px
92~93px
120px
HTML

<div class="text">
  <img alt="" src="logo.png" height="90" /> 
</div>

第三題

請問 .box 的高度是多少？(請不要用瀏覽器觀察)
HTML

<div class="box">
  <h1>標題</h1>
  <p>段落</p>
  <p>段落</p>
  <img alt="" src="logo.png" height="90" /> 
</div>
CSS
.box h1{
  font-size: 24px;
  line-height: 36px;
}
.box p{
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 24px;
}
.box img{
  display: block;
}


第四題

請問 .card 的寬高與高度各是多少？(請不要用瀏覽器觀察)
HTML

<div class="card"></div>
CSS
.card{
  width: 50px;
  height: 50px;
  border-bottom: 3px solid orange;
  border-right: 3px solid #000;
  background: #000;
  padding: 20px;
}

第五題

請優化此程式碼，優化重點為：

在不影響外觀情況下，試著將不必要的 CSS 移除或整合
請不用更動 HTML 程式碼，僅需優化 CSS 程式碼
第五題

|Joseph Tang|(https://codepen.io/joseph-tang/pen/jOmPoyq)|
| roger |(https://codepen.io/rogerchuang/pen/WNjvWqe?editors=0100)|
| Dawn |(https://codepen.io/DawnSyu/pen/zYwGQwP)|
| Huanan |(https://codepen.io/hua_nan/pen/QWvbRgN)|
| PHIL |(https://codepen.io/ctkeftjp-the-animator/pen/MWmwdEm)|
| Winnie |(https://codepen.io/hsuanyu0115/pen/vYmNLzR)|

第六題

請優化此程式碼，並將程式碼連結放到 Codepen 上。優化重點為：

在不影響外觀情況下，將重複的 CSS 樣式，獨立成一個共用的 class
可依照您設定的共用 class，適當調整 HTML 結構
第六題

|Joseph Tang|https://codepen.io/joseph-tang/pen/bGWdyrd|
| roger |https://codepen.io/rogerchuang/pen/mdmVrRm?editors=1100|
| Dawn |https://codepen.io/DawnSyu/pen/NWjqVvG|
| Gary Yang |https://codepen.io/fong-yuyang/pen/qBmdGmK|
| PHIL |https://codepen.io/liao/pen/qBOWPea|
| Winnie |https://codepen.io/hsuanyu0115/pen/NWjGGRg?editors=1100|

第七題

彼此討論 pixel perfect kata，你會如何透過 flexbox 來排版？
第七題

|Joseph Tang|https://codepen.io/joseph-tang/pen/rNmVgRd|
|軒仔|https://www.youtube.com/watch?v=bPWbXAH-EUU&t=22s|
| Dawn |https://hackmd.io/UEnWDeEnQgaDo1Us79rxOw|
| Gary Yang |https://codepen.io/fong-yuyang/pen/OJmybwP|
| PHIL |https://codepen.io/ctkeftjp-the-animator/pen/xxdZONo|
| Winnie |https://codepen.io/hsuanyu0115/pen/YzVXMdL?editors=1100|

感謝老師、助教、夥伴們!我們一起飛!~

Select a repo