--- tags: 30 天軟體工程師體驗營｜2025 --- # 🏅 切版任務 Day4 - HTML、CSS 文字設定與 margin、padding 運用 > 建議觀看的影音章節： > - CSS - VS Code 網頁編輯器、HTML 基礎教學 > - CSS - CSS常用語法 > - CSS - 使用 CSS 變更 HTML 標籤特性 > ## 問題 ### 1. 重要觀念選擇題 根據下列同樣的 A、B 模式，以 HTML 與 CSS 觀念中， HTML 決定了網頁的『架構』、CSS 形成網頁『樣式』，請問 A、B 各自最接近 HTML、CSS 差異描述，各為哪個? ``` 1-- A 圖為 HTML，B 圖為 CSS 2-- A 圖為 CSS，B 圖為 HTML 3-- 他只是一隻尖叫的章魚，騙不了我((不可以選這個!)) ``` ![A 圖](https://i.imgur.com/phQ1SQh.png)　　　　　　![B 圖](https://i.imgur.com/WP8lOTY.png) --- ### 2. 文字、間距相關運用 用 CodePen 練習下列的文字版面，練習文字相關尺寸設定、間距與相關 padding、margin 等運用。（可複製下方提供的文字練習） ![](https://i.imgur.com/tAJAG6m.png) > [圖片連結](https://i.imgur.com/tAJAG6m.png) 內文文字與文字資訊提供如下： ``` 六角學院 ``` > 文字大小：`32px` `bold`｜顏色：`#000000`｜行高：`1.5` 倍 ``` 軟體工程師體驗營 - 一個月帶你做出網頁作品 ``` > 文字大小：`24px` `bold`｜顏色：`#000000`｜行高：`1.5` 倍 ``` （第一段） Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt nostrum neque ipsam velit quibusdam delectus praesentium aut necessitatibus! Exercitationem, aperiam! （第二段） Mickey Mouse would have to be the main figure. Yet some mention must be made of our great animated classics. I made sketches of all the characters I thought should appear. Then, I called upon my modeling skills to build a one-16th-inch scale paper cut-out model of what I wanted. This was before photo-copying machines with reducing capabilities, so I had to make all the drawings in scale. Many of the figures had to be drawn, a quarter-inch high. The entire set was about 18-inches long by 3.5-inches high. But this model was a good tool for planning the show sequence and experimenting with different scenes. ``` > 文字大小：`20px`｜顏色：`#000000`、`#cd5e3c`｜行高：`1.5` 倍｜首行縮排：`36px`｜ 橘色字為 `bold` ``` （右下連結） 前往頁面 ``` > 寬度：`120px`｜文字置中｜文字大小：`16px`｜文字顏色：`#ffffff`｜行高：`1.5` 倍｜背景顏色：`#000000` > hover 時：背景顏色：`#cd5e3c` ## 回報流程 1. 將答案貼在 Codepen 並複製 Codepen 連結貼至「回報區」回報 （也可以將答案直接貼至「回報區」） ![](https://i.imgur.com/vftL5i0.png) <!-- 解答： 1. 2 2. https://codepen.io/hexschool/pen/jOvJvWW --> 回報區 --- | 報數 | Discord 名字 | CodePen／其他回饋 | |:----:|:--------------:|:----------------------------------------------------------------------------------:| | 1 | dean | [[CodePen]](https://codepen.io/ch933114/pen/bNNaWLp?editors=1100) | | 2 | 里歐 | [[CodePen]](https://codepen.io/akihico/pen/wBBpeXp) | | 3 | 蛋殼 | [Codepen](https://codepen.io/weybrian/pen/azzEWEK) | | 4 | 4chan | [[CodePen]](https://codepen.io/ijuolaqc-the-looper/pen/WbedXRa?editors=1010) | | 5 | wei_0982 | [[CodePen]](https://codepen.io/nico-lai/pen/KwwZqRB?editors=1100) | | 6 | WAWATA | [[CodePen]](https://codepen.io/wa-wa-GNOHC-WA-Wa/pen/MYYrvKN?editors=1100) | | 7 | Hank_08123 | [[CodePen]](https://codepen.io/hankyang1213/pen/dPPJRLp) | | 8 | nora_zizi | [[CodePen]](https://codepen.io/Nora-Ch/pen/wBBpqMx) | | 9 | Zing | [[CodePen]](https://codepen.io/TZU-YIN-WANG/pen/NPPXvmQ) | | 10 | tina01170 | [[CodePen]](https://codepen.io/tina-huang-the-bashful/pen/raapYOZ?editors=1100) | | 11 | kent | [[CodePen]](https://codepen.io/kentlee406/pen/JooMyJE?editors=1100) | | 12 | Benson | [CodePen](https://codepen.io/kumashow/pen/LEEejpb?editors=1101) | | 13 | Saika | [CodePen](https://codepen.io/saika4501/pen/emmyEJO?editors=1100) | | 14 | Atayallin | [CodePen](https://codepen.io/zin-seven/pen/yyypomO) | | 15 | 小趴 | [Codepen](https://codepen.io/papa2415/pen/poBmzRZ) | | 16 | Joseph_Kyuu | [CodePen](https://codepen.io/zrzfastd-the-reactor/pen/raapzON) | | 17 | 随縁 | [CodePen](https://codepen.io/zuien/pen/jEEYzmZ) | | 18 | Owen He | [CodePen](https://codepen.io/owen1120/pen/dPPJJBe) | | 19 | Min | [CodePen](https://codepen.io/cvqevoxk-the-decoder/pen/xbbpYMy) | | 20 | 謝天 | [CodePen](https://codepen.io/crisxie/pen/myypxdJ) | | 21 | Stan | [CodePen](https://codepen.io/Stan-Huang/pen/ByyJZqJ) | | 22 | Jinie | [CodePen](https://codepen.io/jiniecheung/pen/xbbpjJq) | | 23 | cks40660 | [CodePen](https://codepen.io/CKS40660/pen/gbbozvj) | | 24 | Jane | [CodePen](https://codepen.io/jkmx/pen/azzEymN) | | 25 | Cami | [CodePen](https://codepen.io/irisLife/pen/WbbdyoQ) | | 26 | 消波塊 | [CodePen](https://codepen.io/PaulHsiao/pen/NPPXXeZ) | | 27 | 吉 | [CodePen](https://codepen.io/ji087303/pen/EaaooJm) | | 28 | Kath | [CodePen](https://codepen.io/JLin-the-lessful/pen/emmyjvP) | | 29 | Michelle | [CodePen](https://codepen.io/bastar_dize/pen/emmyKaM?editors=1100) | | 30 | ann#6212 | [CodePen](https://codepen.io/yqmegupa-the-styleful/pen/QwwaBMa) | | 31 | 蛋白 | [蛋白的CodePen Day4](https://codepen.io/sjlu-0/pen/VYYyrEj) | | 32 | Ali | [CodePen](https://codepen.io/Alicia1117/pen/wBBpxde) | | 33 | 7Lun | [Day4-CodePen](https://codepen.io/mfyvqhsn-the-bold/pen/bNNaxVj?editors=1100) | | 34 | yuna | [CodePen](https://codepen.io/Yuna1002/pen/MYYrBRx) | | 35 | Daniel Huang | [CodePen](https://codepen.io/Hou-Chieh-HUANG/pen/xbbpamd) | | 36 | BaLaLaYOU | [CodePen](https://codepen.io/bashawxd-the-bashful/pen/RNNxYKj) | | 37 | mambo | [CodePen](https://codepen.io/chiang_mb/pen/MYYrVjX) | | 38 | 柔術小子 | [CodePen](https://codepen.io/Li-Lee-Everything-is-PM/pen/EaaoRrp) | | 39 | 蛋黃 | [CodePen](https://codepen.io/yiyun12o9/pen/VYYyEVN) | | 40 | 冠翔 | [CodePen](https://codepen.io/hsrfcdrx-the-bold/pen/emmyxYB) | | 41 | fishcold9714 | [CodePen](https://codepen.io/yu-han-feng/pen/pvvpqrX) | | 42 | 力文 | [CodePen](https://codepen.io/liwenchiou/pen/gbboZyQ?editors=1100) | | 43 | pastor | [Codepen](https://codepen.io/peter_hung/pen/QwwaJLv) | | 44 | Cyan66 | [Codepen](https://codepen.io/Cyan66/pen/dPPJwwJ) | | 45 | Crystal | [CodePen](https://codepen.io/Crystal-Wu/pen/VYYyqRX) | | 45 | 林明德 | [CodePen](https://codepen.io/lwescocn-the-vuer/pen/YPPYoyK) | | 46 | Archang | [Codepen](https://codepen.io/pxfnrvgk-the-styleful/pen/qEEpwwP) | | 46 | B | [CodePen](https://codepen.io/Babel777/pen/QwwaRep) | | 47 | rosac12 | [CodePen](https://codepen.io/qfcwnecy-the-decoder/pen/YPPYmwZ) | | 48 | Melanie | [CodePen](https://codepen.io/pnrcspte-the-animator/pen/QwwaoWv?editors=1100) | | 49 | Aidd. | [CodePen](https://codepen.io/aiddchen/pen/ByyJgeJ) | | 50 | 馬德 | [CodePen](https://codepen.io/maywang/pen/RNNxmZd?editors=1100) | | 51 | ArvinSu | [CodePen](https://codepen.io/Arvin-Su/pen/VYYQeJQ) | | 52 | Yan | [CodePen](https://codepen.io/Yan-L/pen/myypoXr) | | 53 | Toung | [CodePen](https://codepen.io/Toung/pen/dPPdyxX) | | 54 | akkk | [CodePen](https://codepen.io/ak-wu-the-decoder/pen/emmVKev) | | 55 | 叮咚 | [CodePen](https://codepen.io/pinchieh-lin/pen/qEExKXx) | | 56 | RUDY | [CodePen](https://codepen.io/Rudy-crw/pen/KwwQerg?editors=1100) | | 57 | WEIWEI | [CodePen](https://codepen.io/weiwei93/pen/vEEdRdO) | | 58 | haohaoliao | [CodePen](https://codepen.io/tqdtaouh-the-styleful/pen/myyXGLp?editors=1100) | | 59 | jane.yg | [CodePen](https://codepen.io/Jane-Yang-the-reactor/pen/wBByEJj) | | 60 | 野鴿 | [CodePen](https://codepen.io/HoshinoSyouta/pen/raaJZbx) | | 61 | wen | [CodePen](https://codepen.io/WEN-CHIEH-CHU/pen/JoopzOz) | | 62 | 牛奶 | [CodePen](https://codepen.io/0omilko0/pen/jEEZNOE?editors=1100) | | 63 | Aoi | [CodePen](https://codepen.io/zching07/pen/LEEdPjQ?editors=1100) | | 64 | 00LIN | [CodePen] | | 65 | gracechiang225 | [CodePen](https://codepen.io/gracechiang225/pen/YPPazPM) | | 66 | CBK | [CodePen](https://codepen.io/BK-C-the-styleful/pen/zxxWGPw) | | 66 | Leonard | [CodePen](https://codepen.io/hyyfjqra-the-sans/pen/YPPaXLO) | | 67 | Hugh | [CodePen](https://codepen.io/Hugh-Chen/pen/NPPYWzg) | | 68 | An | [第一題：2，第二題：CodePen](https://codepen.io/bzrpsbjq-the-encoder/pen/MYYVpvx) | | 69 | allen3290 | [CodePen](https://codepen.io/udadkudw-the-looper/pen/emmMExO) | | 70 | leo_tzou | [CodePen](https://codepen.io/JH_Portfolio/pen/MYYVENp | | 71 | Sylvia_1121 | [CodePen](https://codepen.io/Sylvia93458/pen/oggqpjg) | | 72 | Taiwanno1 | [CodePen](https://codepen.io/uhnxswdq-the-typescripter/pen/OJYgeyd) | | 73 | Nora | [CodePen](https://codepen.io/Yun-Jhen-Dai/pen/LEEdxMw?editors=1100) | | 74 | Clare | [CodePen](https://codepen.io/cwwc57/pen/bNNMbrZ) | | 75 | Jessie | [Jessie 的 Codepen](https://codepen.io/bakyfkso-the-looper/pen/vEEjBrr) | | 76 | yang | [codepen](https://codepen.io/Yang-J/pen/pvvLpwx?editors=0100) | | 77 | anson.www | 第１題：2 <br> 第２題：[Codepen](https://codepen.io/zzkvrkzi-the-sans/pen/emmrYGe) | | 78 | stone | [CodePen](https://codepen.io/bgrwlzoz-the-reactor/pen/yyyjNyd) | | 79 | YuTing | [CodePen](https://codepen.io/venus50533/pen/zxxRGyW?editors=1100) | | 80 | 周周 | [CodePen](https://codepen.io/jhoujhou-the-decoder/pen/XJJqbLR?editors=1100) | | 81 | tiffany871205 | [CodePen](https://codepen.io/Tiffany-Tai/pen/raavOjG) | | 82 | William Hsieh | [CodePen](https://codepen.io/lsaimqxa-the-vuer/pen/pvvVgbV?editors=1100) | | 83 | jingle0900 | [CodePen](https://codepen.io/EvaLi0472/pen/VYYxeEm) | | 84 | connieK8888 | [CodePen](https://codepen.io/plkang3617/pen/azzGLwm) | | 85 | BL | [CodePen](https://codepen.io/bonnieli1414/pen/OPPZQGq?editors=1111) | | 86 | mercury2508. | [CodePen](https://codepen.io/Mercury2508/pen/OPPZvYN) | | 87 | Peggy | [codepen](https://codepen.io/cpt23462599/pen/YPPLvPV) | | 88 | andy | [codepen](https://codepen.io/ewnblckz-the-styleful/pen/MYYGMMO) | | 88 | 登登登 | [codepen](https://codepen.io/Duncanin/pen/bNNMXxY) | | 89 | HLC | [codepen](https://codepen.io/pppbbb262626/pen/zxxReGo) | | 90 | 艾琳 | [codepen](https://codepen.io/Irene-Chuang/pen/qEEKBEV?editors=1100) | | 91 | tung | [codepen](https://codepen.io/oltsegon-the-looper/pen/OPPENoB) | | 92 | cheryl | [codepen](https://codepen.io/katrina-the-decoder/pen/LEErxWd) | | 93 | 木乃伊 Kimi | [codepen](https://codepen.io/veqjtzdb-the-lessful/pen/emmKGYo?editors=1100) | | 94 | Chia__ | [Codepen](https://codepen.io/Chia-the-encoder/pen/qEEKBYy) | | 95 | Chuang | [Codepen](https://codepen.io/uidoytjq-the-solid/pen/qEEKVQy?editors=1100) | | 96 | oyll | [Codepen](https://codepen.io/dizzydog-rgb/pen/OPPEdQZ?editors=1100) | | 97 | Rogan | [Codepen](https://codepen.io/RoganHsu/pen/RNNJrLr) | | 98 | 糰子 | [每日任務D4](https://codepen.io/hiyuki-dango/pen/qEEKZvj) | | 99 | JHT | [Codepen](https://codepen.io/juanht/pen/ByyVJBj) | | 100 | yue | [Codepen](https://codepen.io/Ling-the-scripter/pen/azzKqyv) | | 101 | Astrid | [2025/05/08 DAY4-2](https://codepen.io/astrid321654/pen/MYYBwdg) | | 102 | 姜承 | [Codepen](https://codepen.io/Troy0718/pen/NWOaONN?editors=1100) | | 103 | Tou | [Codepen](https://codepen.io/Datou-Huang/pen/pvvOYNB) | | 104 | Sonia | [Codepen](https://codepen.io/YUJOU/pen/ByyqyqN?editors=1100) | | 105 | Acadia | [Codepen](https://codepen.io/Acadia/pen/XJJxmYX?editors=1100) | | 106 | kelsonhouse | [Codepen](https://codepen.io/Kelson-House/pen/QwwZWoe) | | 107 | Apple Pie | [Codepen](https://codepen.io/ymevqzjf-the-builder/pen/pvvxyor?editors=1100) | | 108 | vima | [Codepen](https://codepen.io/chin7004/pen/EaaOjXe) | | 109 | HedyChen | [Codepen](https://codepen.io/hedychen/pen/EaaObjz) | | 110 | Debby Yang | [Codepen](https://codepen.io/Debby-Yang/pen/Joowbop) | | 111 | zhe | [Codepen](https://codepen.io/dotheright/pen/KwwbajJ) | | 112 | DD | [Codepen](https://codepen.io/dorihung/pen/gbbZXvW) | | 113 | 小豬佩奇 | [Codepen](https://codepen.io/HoPeiZhen/pen/RNNEdBo) | | 114 | 孟 | [Codepen](https://codepen.io/Mengru0503/pen/pvvGywb?editors=1100) | | 115 | duchi | [Codepen](https://codepen.io/sqaz0502/pen/azzPaPW) | | 116 | Mic | [Codepen](https://codepen.io/Mic-Pan/pen/RNNvovz) | | 117 | emma8470 | [Codepen](https://codepen.io/emachen/pen/wBBNNgb) | | 118 | ja4071 | [Codepen](https://codepen.io/SHAO-L/pen/myyvPGZ) | | 119 | joker | [Codepen](https://codepen.io/jokersosmart/pen/KwwEQxV) | | 119 | YUN | [Codepen](https://codepen.io/sant220210/pen/vEEMGGW?editors=1100) | | 120 | Lynn | [Codepen](https://codepen.io/Yen-Ling-Peng/pen/OPPGxrq) | | 121 | 禹成林 | [Codepen](https://codepen.io/useirin/pen/JooVOme) | | 122 | .Nonko | [CodePen](https://codepen.io/zqzvgjkd-the-builder/pen/pvvBRLw) | | 123 | taishan_90178 | [CodePen](https://codepen.io/candy99/pen/emmqYVz) | | 124 | Kinkin | [CodePen](https://codepen.io/Kinkin-Yo/pen/raaXZmz) | | 125 | jean_ke| [CodePen](https://codepen.io/Jean-Ke/pen/Pwwrjag) | 126 | Nea| [CodePen](https://codepen.io/neacode/pen/PwqYYGG) | 127 | 富| [CodePen](https://codepen.io/spring40747/pen/YPXKjBY) | 128 | Eva| [CodePen](https://codepen.io/cnbhiapb-the-scripter/pen/MYwgNPJ) | 129 | Katie | [Codepen](https://codepen.io/Katiekatiehsu/pen/gbppaOa?editors=1100) | 130 |Maggie C.|[CodePen](https://codepen.io/Maggie-dev_xo/pen/vEEbMBX) | 131 | 610 |[CodePen](https://codepen.io/YI-LING-LIU/pen/azOveLo) | 132 | waynetrece |[CodePen](https://codepen.io/waynetrece/pen/QwbpzZe) | 133 | nonolog |[CodePen](https://codepen.io/game01-cjcu/pen/yyNXpYx) | 134 | AntarcticaBear | Q-1 Ans:2(A 圖為 CSS，B 圖為 HTML) | 135 | Yanchen16 |[CodePen](https://codepen.io/keyrtlij-the-reactor/pen/qEdpYOY) | 136 | World |[CodePen](https://codepen.io/HexschoolVuePujols/pen/pvJKLVV) | 136 | Ryckie |[CodePen](https://codepen.io/14172/pen/yyYOKBz?editors=1100)