圖文版面1

今天要練習最上方主BANNER的切版

整理幾個小重點如下方：

1.將section_kv設為滿版，添加背景色#FFEBF2
2.添加一個container，做為固定欄寬1200px的區塊
3.排版方式為左文右圖，因此在container設定display: flex讓資料橫排顯示
4.使用align-items: center讓資料可以置中對齊
5.h2的文字為了要讓他換行，在裡面添加span標籤，但span是inline物件，需要將它設定display: block讓物件占滿整個空間，即可完成文字換行
6.img要設定width: 100%及消除圖片的預設空白，使用vertical-align屬性設為top(頂部對齊)、middle(垂直居中)、bottom(底部對齊)擇一就可以解決
7.使用line-height調整行距
8.使用font-weight調整文字粗細，100~900：數字越大越厚，數字小於500的話效果比較不明顯

提供格線圖如下所示:

可參考程式碼如下方:

HTML

<section class="section_kv">
    <div class="container">
        <div class="text">
            <h2>Premium<span>小白人的生活</span></h2>
            <p>可愛的小白人，進入你的日常生活，是一隻從十幾歲開始寫卡片後會畫的可愛小圖，不知不覺就成了簽名的小標誌。</p>
           <div class="btn_more">
               <a href="#">了解更多</a>
            </div>
         </div>
         <div class="pic">
             <img src="https://i.ibb.co/8cCzvc5/mini-kv.png" alt="mini-kv">
         </div>
    </div>
</section>

CSS

.section_kv{
    padding-top: 100px;
    background-color: #FFEBF2;
}

.section_kv .container{
    padding: 40px 0;
    display: flex;
    align-items: center;
}
.section_kv .text{
    width: 600px;
}
.section_kv .text h2{
    font-size: 48px;
    color: #464646;
    font-weight: 600;
    line-height: 1.5;
}
.section_kv .text span{
    display: block;
}
.section_kv .text p{
    font-size: 16px;
    margin-top: 20px;
    line-height: 1.5;
    font-weight:100;
}
.section_kv .pic{
    width: 400px;
    margin-left: auto;
}
.section_kv .pic img{
    width: 100%;
    vertical-align: bottom;
}