學過的內容沒有實際在VS CODE上寫過，很難不去忘記。
透過切版練習，逼自己每天都進步一點點，相信有一天，自己也可以寫出結構清楚又不跑版的網頁。

運用到的觀念:

1. 使用box-sizing:border-box;調整容器寬度和高度
2. 使用align-self個別調整子元素在交錯軸線的位置
3. 使用object-fit調整變形的圖片
4. 使用linear-gradient將背景顏色設成漸層色
5. 使用box-shadow作出陰影效果
6. 使用rgba設定有透明度的色彩
7. 按鈕搭配:hover作出互動效果

HTML結構

先作一個wrap區塊
在做一個container區塊來固定內容寬度
container內放三個item區塊
item區塊分別有放圖片的pic區塊和放文字的txt區塊

   <div class="wrap">
      <div class="container">
        <div class="item">
          <div class="pic">
            <img src="https://picsum.photos/400/400?random=11">
          </div>
          <div class="txt">
            <h2>金魚都能懂的網頁入門</h2>
            <p>年度最佳網頁入門教學影片，輕鬆學會網頁製作，原始碼原來如此有趣啊。</p>
            <a href="" class="btn">more</a>
          </div>
        </div>
        <div class="item">
          <div class="pic">
            <img src="https://picsum.photos/400/400?random=12">
          </div>
          <div class="txt">
            <h2>金魚都能懂的網頁切版</h2>
            <p>沒想到切版竟然如此簡單，以往的困難迎刃而解，技巧原來這般單純。</p>
            <a href="" class="btn">more</a>
          </div>
        </div>
        <div class="item">
          <div class="pic">
            <img src="https://picsum.photos/400/400?random=13">
          </div>
          <div class="txt">
            <h2>金魚都能懂的CSS選取器</h2>
            <p>CSS選取器原來是這道理啊，其實之前都誤解她了，對不起 9523 !</p>
            <a href="" class="btn">more</a>
          </div>
        </div>
      </div>
    </div>

CSS結構

1. 設定css reset 並設定各個區塊的寬度和排列方式

*{
  margin: 0;
  padding: 0;
  list-style: none;
}

.wrap{
  height:100vh;
  display:flex;
  align-items:center;
}

.container{
  width:1200px;
  margin: auto;
  display: flex;
}

.item{
  width: 370px;
  margin: 0 15px;
}

2.將item區塊內的pic和txt區塊設為橫向並排
且寬度各佔item區塊的一半

.item{
  width: 370px;
  margin: 0 15px;
  display:flex; 
}
.item .pic{
  width:50%;
}
.item .txt{ 
  width:50%; 
}

因為圖片的尺寸超出了item區塊的尺寸 將圖片尺寸設為填滿pic區塊

.item .pic img{
  width:100%;
  height:100%;
}

4. 設定padding讓圖片和文字有一些距離
   因為新增了padding，寬度會有改變，所以使用box-sizing:border-box;來調整

.item .txt{ 
  width:50%; 
  padding: 20px;
  box-sizing: border-box; 
}

5. 經過上面調整後，會發現圖片有點變形了，這時可以使用object-fit: cover;來調整

.item .pic img{
  width:100%;
  height:100%;
  object-fit: cover;

} 

相關資料:新手前端也不該犯的錯：圖片變形

6. 將txt區塊內的文字設為垂直居中

.item .txt{ 
  width:50%; 
  padding: 20px;
  box-sizing: border-box; 
  display: flex;
  flex-direction: column;
  justify-content: center;
} 

7. 設定btn的樣式

.item .txt .btn{
line-height: 1.5em;
border: 1px solid #ccc;
padding: 0 1em;
}

因為設定成從上到下排列(主軸/資料流向)，預設狀態下(交錯軸/與資料流垂直)會整個填滿(align-items:stretch;)，因此設定的border就變成了滿版了

8. 設定align-self: flex-end; 調整btn的樣式

.item .txt .btn{
line-height: 1.5em;
border: 1px solid #ccc;
padding: 0 1em;
align-self: flex-end;
}

相關資料:align-self 屬性介紹

在調整邊框及去掉a連結預設的底線樣式和文字內容的距離

.item .txt .btn{
line-height: 1.5em;
border: 1px solid #ccc;
padding: 0 1em;
align-self: flex-end;
text-decoration: none;
border-radius: 200px;
margin-top: 1em;
}

9. 設定h2和p之間有一些距離
   在wrap及設定item區塊設定背景色彩

.item .txt h2{
  margin-bottom: .4em;
}

.wrap{
  height:100vh;
  display:flex;
  align-items:center;
  background: linear-gradient(-30deg, #fdaecb, #e7597f , #fe8556);
}

.item{
  width: 370px;
  margin: 0 15px;
  display:flex;  
  background-color: #fff;
}

10. 設定btn區塊在滑鼠碰到時，有變色的效果

.item .txt .btn{
line-height: 1.5em;
border: 1px solid #ccc;
padding: 0 1em;
align-self: flex-end;
text-decoration: none;
border-radius: 200px;
margin-top: 1em;
color:#aaa;
}
.item .txt .btn:hover{
  background-color: #ccc;
  color:#fff;
}

11. 因為新增border會增加寬度2px(1px左border+1px右border)，所以本來的寬度要扣掉2px
    使用box-shadow屬性作出陰影的效果
    box-shadow: x軸 y軸 模糊程度 色彩;
    box-shadow 色彩可以帶和本來背景相似又較深顏色 會比較有層次感
    目前的背景是紅色系，所以設定成透紅色的深色
    rgba(red 值, green 值, blue 值, alpha 值);
    red, green, blue 值的設定範圍: 0 ~ 255 的整數值或是0% ~ 100% 的百分比值
    alpha 值的設定範圍: 0.0 ~ 1.0， 0 →完全透明， 1 →完全不透明， 0.7 → 70% 不透明

  .item{
  width: 368px;
  margin: 0 15px;
  display:flex;  
  background-color: #fff;
  border:1px solid #888;
  box-shadow: 0 10px 30px rgba(160,0,0,.5); 
  font-family: 'Noto Sans TC',serif;
}

}

參考資料:金魚都能懂的這個網頁畫面怎麼切 : 超通用橫式版面

以上為個人學習筆記整理
若有錯誤，歡迎指正