# T2-v2 code review
###### tags: `好想工作室`
2022.07.07（Thu.）（佳萱）

HTML：
1. FREE SHIPPING WORLDWIDE有打錯字
2. <input type="submit" value="Update Me">可以改成<button>
> 理由放下方

CSS：
1. nav的部份可以想看看T1的做法
2. absolute置中的其他做法 
3. .image__content--cover的display: inline-block可刪除
4. 可以在css使用text-transform: uppercase;
5. <hr>的border-bottom可以刪除
6. <footer>部份，左右兩側可以用.footer__container去推padding
> 子層的.about-us就可以專心只推margin-bottom就好
> 但要注意，推padding想往內推，所以要加上box-sizing:border-box
7. 除了text-align-last:justify; 外的作法要了解
> 不然如果遇到不能用text-align-last:justify;的情況就會不知怎麼辦
8. 底下的<i>的margin可以拿掉
> 因為已經有text-align-last去排版

****

# <font color="#3881a1">HTML</font>
## 2. `<input type="submit" value="Update Me">`可以改成`<button>`
原因是input做成的按鈕裡面的文字，要透過value去做修改，這樣第一眼看到的人會覺得，我現在傳出的資料是跟「Update Me」有關（但其實這裡要送出的是email）

而button做成的按鈕，文字更改的部份是寫在兩個button tags之間（如其他一般tag作法），而且button也可以設置成type="submit"（一樣可以送資料出去）。

****

# <font color="#3881a1">CSS</font>

## 1. nav的部份可以想看看T1的作法
現在的作法如下，是用mrgin去推開兩邊：

但是我們的想法應該是把nav裡面的a之間隔開就好，等於nav的左右兩邊的margin，就不符合我們的想法了

所以應該改成用T1當時的寫法，用a+a的方式，去讓後面的a往左推開：

nav a+a{
    margin-left: 10px;
}

## 2. absolute置中的其他做法
[更多的作法看這裡](2. absolute置中的其他做法 )
**第一步驟**：父層先用position: relative;

.section__content--banner{
    margin-bottom: 80px;
    position: relative;
    text-align: center;

    font-size: 0;
}

**第二步驟**：在子層使用position: absolute;
然後先把上下左有皆設為0：

.banner__content{
    padding: 30px 50px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    
    background-color: #ffffff73;
}

會長這樣：

**第三步驟**：之後再給他寬高：

.banner__content{
    padding: 30px 50px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 500px;
    height: 100px;
    
    background-color: #ffffff73;
}


**第四步驟**：最後加上margin: auto;讓他自己去上下左右均分對齊：

.banner__content{
    padding: 30px 50px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 500px;
    height: 100px;
    margin: auto;
    
    background-color: #ffffff73;
}

就成功了！（而且更好記憶）

## 6. `<footer>`部份，左右兩側可以用.footer__container去推padding
> 子層的.about-us就可以專心只推margin-bottom就好
> 但要注意，推padding想往內推，所以要加上box-sizing:border-box

原先的樣子，外層（footer__container）只推上下的padding，左右兩側則是由內層（about-us）用margin推：

改成如下圖，外層（footer__container）負責推所有的padding，內層（about-us）就只需要往下推margin：

讓切版更乾淨！