# T1-new-v4 code review ###### tags: `好想工作室` 2022.03.11(Fri.)(Sherry) ``` HTML: 1.<h1>去包<a>即可 2.footer的社群連結可以不用ul、li CSS: 1.nav的width可以用百分比,不須a+a去推margin-left (不用抓數字,抓比例) 2.main有背景色 3.main-container上的text-align只作用到image-content > 把text-align改放到image-content就好 4.paragraph-content裡的p若改設margin-top會發生margin-collapse > 可以改display為inline-block 5.fontawesome的部份再下text-align-last: center; > 因為在footer-container下了text-align-last: justify; > 影響到了裡面的fontawesome ``` **** # <font color="#3881a1">HTML</font> ## 1. `<h1>`去包`<a>`即可 ## 2. footer的社群連結可以不用ul、li 太多層了(沒有必要) **** # <font color="#3881a1">CSS</font> ## 1. nav的width可以用百分比,不須a+a去推margin-left (不用抓數字,抓比例) 因為有在header-container上下了text-align-last: justify; ,所以nav也繼承到了此屬性,會自行推開間距。 ## 2. main有背景色 ## 3. main-container上的text-align只作用到image-content > 把text-align改放到image-content就好 ## 4. paragraph-content裡的p若改設margin-top會發生margin-collapse > 參考網址: > 1. [box model w3c](https://www.w3.org/TR/CSS22/box.html#collapsing-margins) > 2. [CSS Margin Collapse w3c](https://www.w3schools.com/css/css_margin_collapse.asp) > 3. [Margin Collapse w3c規範](https://www.w3.org/TR/CSS21/box.html#propdef-margin) > 4. [CSS collapsing margins 重疊問題](https://z3388638.medium.com/%E7%AD%86%E8%A8%98%E4%B8%80%E4%B8%8B-css-collapsing-margins-%E9%87%8D%E7%96%8A%E5%95%8F%E9%A1%8C-a35fd838f1ae) > 5. [CSS 原理 - Block Formatting Context](https://yachen168.github.io/article/Block-formatting-context.html) * 可以改display為inline-block * Margin Collapse只會發生在上下(不會發生在左右) ## 5. fontawesome的部份再下text-align-last: center; > 因為在footer-container下了text-align-last: justify; > 影響到了裡面的fontawesome
×
Sign in
Email
Password
Forgot password
or
By clicking below, you agree to our
terms of service
.
Sign in via Facebook
Sign in via Twitter
Sign in via GitHub
Sign in via Dropbox
Sign in with Wallet
Wallet (
)
Connect another wallet
New to HackMD?
Sign up