Try   HackMD

第 5 組 第一週小組任務

tags: 六角,網頁切版直播班-2021夏季,`第一週小組任務

小組討論

  • 會議時間:2021-07-05 20:00~21:30

  • 線上討論畫面:

    Image Not Showing Possible Reasons
    • The image file may be corrupted
    • The server hosting the image is unavailable
    • The image path is incorrect
    • The image format is not supported
    Learn More →

    Image Not Showing Possible Reasons
    • The image file may be corrupted
    • The server hosting the image is unavailable
    • The image path is incorrect
    • The image format is not supported
    Learn More →

  • 參與人員:共 6 名,名單如下。(含 Slack ID 和 暱稱)

Slack ID 暱稱
UTDM5L925 雅喬
U01K3LKTB1C Alvin Chu
U020U997G0P 葉小嵐
U01Q9D820FL Gill
U01Q11LDQKH Double C
UJ2RRLNU9 moitw

第一題

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

暱稱 職業分析 測驗結果畫面
Alvin Chu 調停者 INFP-T 畫面
Gill 執行官 ESFJ-A 畫面
葉小嵐 探險家 ISFP-T 畫面
DoubleC 守衛者 ISFJ-A 畫面
雅喬 主人公 ENFJ-A 畫面

第二題

選擇題

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

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

Ans:92~93px


第三題

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

36+(16*1.5+24)*2+90=222
Ans:222px


第四題

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

width:50+3+20*2=93
height:50+3+202=93
Ans:寬高階是93px


第五題

請優化此程式碼,優化重點為:

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

CSS

.wrap{ width: 500px; margin: 0 auto; font-size: 20px; }

第六題

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

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

Ans:優化答案1優化答案2


第七題

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

Ans:在.news>li和.main使用flex

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →