# T1-new-v5 code review ###### tags: `好想工作室` 2022.03.18（Thu.）（Rex） ``` HTML： 1.<head>中的viewport與RWD有關 2.<link>的順序：自己的放最下面 3.<h1>包<a>：可連帶logo一起搜尋到 4.<h1><a><img alt="zerotype"></a></h1> 5.最底下莫名其妙的<script>處理一下 6.現在的命名方式會跟T3用boostrape有衝突 7.命名：.paragraph-content > .article-content 8.命名：.link > .social-media 或 .about-us會更貼切 CSS： 1.為什麼要用text-aign-last，而不是text-align？ 2.<section>部份，為什麼需要設置vertical-align: top;？ 3..image-content裡面再包一層<div>，讓<div>包住<img> > <div>去改大小，不要直接動圖片的大小 4.<header>的border-bottom有顏色/<footer>的border-top有顏色 5.column為什麼是分3段2行？ 6..article-container的font-size: 0沒作用 > 拿掉 7.引用google font（否則到其他人電腦可能無法顯示字體） 其他： 1.不用術語去解釋（再試試看 > 打出來 > 例如說：text-aign-last: justify是『左右均分』 2.footer a+a可以拿掉（讓他跟<nav>的作法一致會更好） ``` **** # <font color="#3881a1">HTML</font> ## 1. `<head>`中的viewport與RWD有關 ## 2. `<link>`的順序：自己的放最下面 才不會被影響到 ## **** # <font color="#3881a1">CSS</font> ## 1. 為什麼要用text-aign-last，而不是text-align？ text-align只能針對行內內容（文字）去控制對齊，對最後一行無作用，因此text-align-last就是用來針對最後一行做對齊的。 所以.header-container用text-align-last，而不使用text-align的原因，就是因為.header-container只有一行，可以作為第一行，但同時他也為最後一行，因此這裡必須使用text-align-last才有作用。 ## 2. `<section>`部份，為什麼需要設置vertical-align: top;？ 若不設置的話，vertical-align的預設為baseline，因此會貼齊baseline。 **** # <font color="#3881a1">OTHER</font> ## 1. 不用術語去解釋 header的部分： 先給外圍區塊一個寬度，然後讓這個外圍區塊對整個頁面置中，讓他對齊中心 裡面又分成了兩區塊 水平的部分，這兩個區塊讓他在這外圍區塊裡面去左右均分、貼齊兩側 垂直的部分，是對齊外圍區塊高度的中心 右邊的區塊裡面又再切了五個小區塊，這五個小區塊一樣的在裡面左右均分、貼齊兩側