圖文版面

在這個範例中要練習圖文版面的切版

整理幾個小重點如下方：

1.將section設為滿版
2.添加一個container，做為固定欄寬1200px的區塊，並設定display: flex讓資料橫排顯示
3.使用justify-content: space-around讓資料可以平均排列每個物件，讓每個物件周圍分配相同的空間
4.使用align-items: center讓圖片板塊及文字版塊對齊交錯軸線正中間
5.添加box-sizing: border-box屬性，目的是調整盒模型的內距與外框的尺寸計算，設定物件的的寬高時，所設定的數值還要再加上padding和border，最後才會是物件的實際尺寸，使用box-sizing: border-box就省去了計算尺寸的步驟，可以更直覺的進行數值的設定
6. font-size調整文字大小，font-weight調整文字厚度，line-height調整行高，letter-spacing調整文字間距，text-align: center文字置中
7. 消除圖片的預設空白，使用vertical-align屬性設為top(頂部對齊)、middle(垂直居中)、bottom(底部對齊)擇一就可以解決
8.在超連結a添加text-decoration: none的設定，目的是消除一個超連結預設的底線
9.標題h2下方的橫線使用偽元素.txt h2::after去製作，使用偽元素要添加content: ''接下來的調整才會顯示，偽元素是inline物件，需要添加設定display: block，接下來尺寸的設定才會有效果，在這邊調整為寬70px、2px的實心粉色橫線
10.按鈕的部分使用的是a標籤去設定外觀尺寸，但a是inline物件而設定blcok又會自動占滿一行造成換行，這裡可以使用display: inline-block同時兼具兩者的特性，設定尺寸、內距外距都會有作用，也可以水平排列
11.使用border-radius將按鈕導圓角
12.滑鼠游標移至按鈕後，按鈕會等比例放大，使用transform: scale(1.1)，來製作此效果，scale指的是縮放比例(scale)，根據設定的數值顯示放大或縮小，只設定一個數值時，使用相同的比例縮放，如果設定兩個值，則分別為水平放大或垂直放大，大於1代表放大，小於1代表縮小

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

HTML

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

CSS

section{
    width: 100%;
    margin:auto;
}        
.container{
    width: 1200px;
    margin: auto;
    display: flex;
    padding-top: 60px;
    justify-content: space-around;
    align-items: center;
    box-sizing: border-box;
}
.container .pic{
    width: 250px;
    padding: 30px;
    border-radius: 50%;
    background-color: #f7b1b1;
    overflow: hidden;
}
.container img{
    width: 100%;
    vertical-align: middle;
}
.container .txt{
    width: 550px;
}
.txt h2{
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 2px;
    color: #42474c;
    padding:0 20px;
}        
.txt h2::after{
    content: '';
    display: block;
    border-bottom: 2px solid #f7b1b1;
    padding-bottom: 30px;
    width: 70px;
}
.txt p{
    font-size: 14px;
    letter-spacing: 1.5px;
    line-height: 2;
    color: #42474c;
    padding: 20px;
}
.txt a{
    text-decoration: none;
    width:150px ;
    margin: 10px 20px;
    padding: 20px;
    display: inline-block;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.5px;
}
.txt .about{
    background-color: #ffffff;
    border: 1px solid #f7b1b1;
    border-radius: 5px;
    color: #42474c;
}
.txt .more{
    background-color: #f7b1b1;
    border: 1px solid #f7b1b1;
    border-radius: 5px;
    color: #ffffff;
}
.txt .about:hover{
    background-color: #f7b1b1;
    border: 1px solid #f7b1b1;
    color: #ffffff;
    transition: .3s;
    transform: scale(1.1);
}
.txt .more:hover{
    background-color: #ffffff;
    border: 1px solid #f7b1b1;
    color: #42474c;
    transition: .3s;
    transform: scale(1.1);
}