前幾天有提到RWD以及排版的功能，接下來就是應用排版的能力來實際製作出成品，首先來嘗試透過製作卡片來熟悉目前所學的語法和排版。

思考卡片版面配置

首先要思考卡片大概要有幾個區塊，本次的案例大概只會區分成四個部分，大致上可以分成：卡片主體、卡片圖片、卡片文字、卡片按鈕。

HTML網頁結構

如同前面思考的卡片配置，可以參考以下HTML語法：

<div class="card">
  <div class="card-picture">卡片圖片</div>
  <div class="card-text">卡片文字</div>
  <div class="button"><a href="按鈕的連結"> <button>卡片按鈕</button></a></div>
</div>

放入圖片

接著一步一步來，首先Day 3有說明過放入圖片的方法，可將案例中「卡片圖片」取代成圖片連結與相關語法，可參可以下HTML語法：

  <div class="card-picture">
    <img  src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/25/Siam_lilacpoint.jpg/220px-Siam_lilacpoint.jpg" alt="喵~~~~~">
  </div>

文字輸入並區分標題與內文

接著是卡片文字的部分，這邊簡單區分標題與內文的部分，可以將案例中「卡片文字」取代成文字內文，可以參考以下HTML語法：

<div class="card-text">
    <h2>暹羅貓</h2>
    <p>暹羅貓（英語：Siamese cat）是很早便被承認的東方短毛貓品種之一，品種的由來尚未確定…。暹羅貓在現今已成為歐美最受歡迎的貓品種之一。</p>
  </div>

按鈕製作

這部分之前沒有說過，按鈕製作除了之前HTML內建灰底的按鈕(使用button這個語法)，這邊可以用a這個語法，放入按鈕連結，之後再將按鈕語法夾在中間即可，可將案例中「按鈕的連結」取代成想要輸入的連結，該按鈕即有超連結的功能。可參考以下語法：

<div class="button"><a href="按鈕的連結"> <button>卡片按鈕</button></a></div>

CSS樣式套用

接下來只要套用樣式，就可以讓卡片有完整的樣子了，可以嘗試套用以下2種CSS的語法，看看卡片會變成什麼樣子：

CSS樣式1

.card{
  width:700px;
  background-color:#FFFDE7;
}
.card-picture{
  padding-top: 30px;
  display:flex;
  justify-content: center; 
  align-items: center; 
}
.card-text{
  padding:0px 150px;
  }
.card-text h2{
  color:#0D47A1;
}
.more-information{
  margin-left:150px;
  margin-bottom:50px;
}

CSS樣式2

.card{
  flex-wrap:wrap;
  display:flex;
  width:1400px;
  background-color:#000000;
}
.card-picture{
  float:left;
  width:40%;
  padding: 30px;
  display:flex;
  justify-content: center; 
  align-items: center; 
}
.card-text{
  float:right;
  width:50%;
  padding:15px;
}
.card-text h2{
  color:#BBDEFB;
}
.card-text p{
  color:#FFD600;
}
.button{
  float:left;
  width:100%;
  display:flex;
  justify-content: center; 
  align-items: center; 
  padding-bottom:30px;
}

範例參考

以下範例為今天說明內容的實作頁面，包含前述所有案例的演示，請參考：
https://codepen.io/hamagawa76/pen/dymrOOe

是不是很簡單！明天會說明Bootstrap 5卡片製作的部分了，我們明天見囉！