卡片版面6

在這個範例中要練習卡片版面的切版

整理幾個小重點如下方：

1.將section設為滿版，添加背景色#ffc6c6
2.container，做為固定欄寬1200px的區塊，並設定display: flex讓資料橫排顯示
3.此範例一行只放置兩個欄位，但在使用flex效果時無論子層數量多寡，內容常會被壓縮以及擠在同一行，可以使用flex-wrap來完成換行，超過盒模型範圍將會自動換到下一行呈現
4.li寬度設定為360px而不是600px的原因是為了設定與內文的距離，添加了padding內距的設定，360px+120px+120px=600px
5.這裡的小圖示icon是使用Font Awesome來製作，如果不知道如何使用，在 [DAY15]網頁切版入門及版面實作_ Font Awesome 這裡有介紹
6.icon的標籤為i，使用屬性position: absolute (絕對定位)讓他抽出來獨立一層，偏移至適當的位子，以及在i的父層li內添加position: relative (相對定位)，做為子層定位的依據
7.每個卡片的背景顏色要不一樣，需要分開設定每一塊地色票，這時候可以使用:nth-child()，括號內填入項目的順序即可完成指定，就可以在不改變HTML結構下分別修改好效果

想直接看效果可以點擊連結>>>https://codepen.io/ocqyfixe/pen/gOzwREJ

HTML

<section class="section_card">
    <ul class="container">
        <li>
            <i class="fa-sharp fa-solid fa-house"></i>
            <h2>胖胖西瓜小白人</h2>
            <p>因為小白人太愛吃了，體重伴隨著年齡一起增長，來到了無法控制的地步，逐漸長成跟西瓜很像的胖胖肚子，看不下去的小白人想要開始減肥了</p>
        </li>
        <li>
            <i class="fa-sharp fa-solid fa-house"></i>
            <h2>健身壯壯小白人</h2>
            <p>因為小白人真的很不喜歡跑步，為了提升減肥的動力，開始報名了健身房課程，並且一周去運動六次，逐漸地變成充滿腹肌的壯壯小白人(是不是運動的太超過了)。</p>
        </li>
        <li>
            <i class="fa-sharp fa-solid fa-house"></i>
            <h2>小白人的生活 第2彈
            </h2>
            <p>第二彈的小白人著重在職場生活，常常遇到很多哭笑不得的事情，異想天開的上司，患難見真情的同事，不知道要改幾次的稿件，只想準時下班的小白人，一起來看看吧。</p>
        </li>
        <li>
            <i class="fa-sharp fa-solid fa-house"></i>
            <h2>小白人的生活 第1彈</h2>
            <p>可愛的小白人，進入你的日常生活，是一隻從十幾歲開始寫卡片後會畫的可愛小圖，不知不覺就成了簽名的小標誌。</p>
        </li>
    </ul>
</section>

CSS

.section_card{
    width: 100%;
    margin: auto;
    background-color: #ffc6c6;
}
.container{
    width: 1200px;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
}
li{
    width: 360px;
    background-color: #f5aaaa;
    padding: 100px 120px;
    color: #ffffff;
    line-height: 2;
    position: relative;
}
li:nth-child(2){
    background-color: #f8a0a0;
}
li:nth-child(3){
    background-color: #f1a3a3;
}
h2{
    font-size: 24px;
    font-weight: 700;
}
p{
    font-size: 16px;
}
i{
    position: absolute;
    left: 80px;
    top: 105px;
    font-size: 30px;
    color: #fce88f;
}