價格表

在這個範例中要練習價格表切版

整理幾個重點:
1.將section_price設為滿版
2.container，做為固定欄寬1200px的區塊，並設定display: flex讓資料橫排顯示
3.text-align: center讓文字置中
4.每個卡片的寬度設為為320px，添加背景色#ffc0c0，使用border-radius導圓角，以及padding調整文字與卡片的內距
5.除了中間的卡片其他的背景顏色為白色，這裡可以使用:nth-child()，之前都是括號內填入項目的順序完成指定，就，這次使用:nth-child(odd)，選取奇數排(奇數「odd」、偶數「even」)，同樣可以在不改變HTML結構下分別修改好效果
6.font-size調整文字大小，font-weight調整文字厚度，line-height調整行高，letter-spacing調整文字間距
7.價格$字號的部分可以使用vertical-align: top，讓他對齊文字上方
8.BEST緞帶ribbon這一塊添加position: absolute讓它獨立出來一層，偏移在適當的位子，然後在card內添加position: relative，作為ribbon定位的依據
9.BEST緞帶的寬高設為140px30px、背景色#ff7f7d，並添加box-shadow讓他看起來比較有立體感
10.使用transform: rotate(45deg)將緞帶旋轉45度，旋轉後會有超出卡片的部分，在card內添加overflow: hidden多出來的地方就會消失，即可完成
11.卡片內的圖片設為寬150px，以及使用vertical-align屬性設為top(頂部對齊)、middle(垂直居中)、bottom(底部對齊)擇一消除圖片的預設空白
12.按鈕設定在超連結a，而a是inline物件，設定尺寸會沒有效果，因此這邊需要添加black的設定，這樣尺寸等等的設定才會有效果
13.滑鼠游標移至按鈕背景顏色會改變寫成.card .btn:hover，而奇數牌顏色會跟中間不一樣，會寫成.card:nth-child(odd) .btn:hover，就可以同時指定多個項目

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

HTML

<section class="section_price">
    <div class="container">
        <div class="card">
            <img src="https://i.ibb.co/QdNtGpx/mini-sport.png" alt="">
            <h2>搖呼拉圈款</h2>
            <span class="money"><span class="symbol">$</span>35<span class="month">/月</span></span>
            <p>想要苗條的身材就易這樣動起來！！！</p>
            <a href="#" class="btn">READ MORE</a>
        </div>
        <div class="card">
            <div class="ribbon">BEST</div>
            <img src="https://i.ibb.co/x6f6j3H/mini-brithday.png" alt="">
            <h2>生日快樂款</h2>
            <span class="money"><span class="symbol">$</span>30<span class="month">/月</span></span>
            <p>祝你生日快樂！！！壽星就是最大的</p>
            <a href="#" class="btn">READ MORE</a>
        </div>
        <div class="card">
            <img src="https://i.ibb.co/Ltb72Mf/mini-sleep.png" alt="">
            <h2>早睡早起款</h2>
            <span class="money"><span class="symbol">$</span>25<span class="month">/月</span></span>
            <p>一日之計在於晨，早睡早起身體好</p>
            <a href="#" class="btn">READ MORE</a>
        </div>
    </div>
</section>

CSS

.section_price{
    width: 100%;
    margin: auto;
}
.container{
    width: 1200px;
    padding:25px;
    margin: auto;
    text-align: center;
    display: flex;
}
.card{
    margin: auto;
    width: 320px;
    padding: 40px 20px;
    background-color: #ffc0c0;
    border-radius: 15px;
    color: #fff;
    position: relative;
    overflow: hidden;
}
.card:nth-child(odd){
    background-color: #ffffff;
    border: 1px solid #eee;
    color: #888;
}
.card .ribbon{
    position: absolute;
    top: 20px;
    right: -40px;
    width: 140px;
    height: 30px;
    background-color: #ff7f7d;
    box-shadow: 0 4px 6px rgba(201, 12, 12, 0.1);
    color: #fff;
    line-height: 2;
    text-align: center;
    letter-spacing: 2px;
    transform: rotate(45deg);
}
.card img{
    width: 150px;
    vertical-align: bottom;
}
.card h2{
    font-size: 24px;
    font-weight: 300;
    letter-spacing: 1.5px;
    padding: 20px 0;
}
.card .money{
    font-size: 50px;
    font-weight: 700;
    letter-spacing: 1.5px;
}
.card .month{
    font-size: 18px;
    font-weight: 100;
}
.card .symbol{
    vertical-align: top;
    font-size: 14px;
    font-weight: 100;
}
.card p{
    font-size: 14px;
    letter-spacing: 1px;
    line-height: 1.5;
    font-weight: 100;
    padding: 20px 0;
}
.card .btn{
    border-radius: 50px;
    width: 150px;
    padding: 15px;
    border: 1px solid #fff;
    margin: 0 auto;
    display: block;
    margin-top: 10px;
}
.card a{
    text-decoration: none;
    color: #fff;
    font-size: 14px;
    font-weight: 400;
}
.card .btn:hover{
    background-color: #fff;
    color: #f7b1b1;
    transition: .3s;
}
.card:nth-child(odd) .btn{
    border: 1px solid #eee;
}
.card:nth-child(odd) a{
    color: #888;
}
.card:nth-child(odd) .btn:hover{
    color: #fff;
    background-color: #f7b1b1;
    border: 1px solid #fff;
    transition: .3s;
}