網頁切版直播班-2021夏季

第21組 第一週小組任務

問題

以下題目皆有使用 Meyerweb CSS Reset。

第一題 心理測驗

請做此心理測驗，分享自己的測驗結果給您的組員。

組員分享









第二題 選擇題

以下範例程式碼的 .text 高度是多少？(請不要用瀏覽器觀察)

  1. 90px
  2. 92~93px
  3. 120px

HTML




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

Ans: 2. 92~93 px

第三題

請問 .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;
}

Ans: 222px

第四題

請問 .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;
}

Ans: 寬高皆 93px

第五題

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

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


第六題

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

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


https://codepen.io/tyzyoko/pen/poPyOKx?editors=1100

https://codepen.io/0224071/pen/poPbbrE

https://codepen.io/LouiseHuang/pen/RwVRRPe

https://codepen.io/MGHN/pen/LYyZZJX

https://codepen.io/AlbertoLL/pen/zYwBBdP

第七題

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

參與人員

SLACK ID 名稱
U01UF23T8GM Alberto
U01FKM5LLKU Peter
U01K00Q4Z51 Zengzeng
U01FR7AJ1D0 Louise
U0224B9Q3QU Meng
U022XA1V3B4 yurie
U0246SXN6DN Arvin
UTBSJ4K2P SeanLiu
U01VCAJ6ZSL icy
U01KJAG2UUQ Jemma

7/8(四) 20:00~ 21:30 線上討論

Select a repo