接下來就進入到 div ，div 他是一個區塊元素，他可以幫我們整合東西，變成一塊，就像桌上很多玩具，我把這些玩具裝到一個盒子裡面。
<body>
<section>
<div class="card">
<h1>卡片</h1>
<img class="card-img" src="https://picsum.photos/id/250/600/400" alt="">
<div class="card-body">
<h2 class="card-title">卡片標題</h2>
<p class="card-content">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Minima debitis laborum maiores
eaque veritatis
temporibus rerum placeat voluptatibus soluta. Blanditiis.</p>
</div>
</div>
</section>
</body>
我用了先用一個 section 把它包起來，section 通常用來分區塊，就是這一塊 section 是拿來放很多張卡片，然後下一個 section 可能就會放其他東西，然後 section 裡面包了 div div裡面是圖片跟 div class=”card-body”，裡面包的是 h2 和 p ，然後我都有給它們 class ，不過還沒有給他們樣式，他們現在就是一個文章，還蠻醜的。
*{
border: 1px solid black;
}
.card{
width: 350px;
}
上面程式碼是 CSS，* 符號是給所有標籤套上這些樣式，我給所有標籤都附上邊框，這樣比較好看出來。
對，就變這樣了，不過為甚麼 img 他沒有變成 350px 呢？因為圖片本身有寬度高度，所以你只能再另外給他樣式設定一個專屬他的 class。
.card-img{
width: 350px;
}
對，成功的變好看了~~，不過這樣有個麻煩地方是如果我又要調整 card 的寬度的話 img 的寬度又要再調整，所以可以直接給圖片 100%，讓他自由伸縮。
.card{
width: 300px;;
}
.card-img{
width: 350px;
}
.card{
width: 400px;;
}
.card-img{
width: 100%;
}
嘿，就這樣，88。
iThome鐵人賽
看影片追技術