使用 CSS 樣式表
將此
<link rel="stylesheet" href="">
更改為
<link rel="stylesheet" href="https://w3schools.tw/w3css/4/w3.css">
要使用樣式表，您必須為您要設定樣式的 HTML 元素新增一個 class
<div class="w3-container w3-black">
<h1>這是一個標題</h1>
<p>這是一個段落。</p>
<p>這是另一個段落。</p>
</div>
HTML / CSS 骨架
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>頁面標題</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="https://w3schools.tw/w3css/4/w3.css">
<style>
</style>
<script src=""></script>
<body>
<img src="img_la.jpg" alt="LA" style="width:100%">
<div class="w3-container w3-black">
<h1>這是一個標題</h1>
<p>這是一個段落。</p>
<p>這是另一個段落。</p>
</div>
</body>
</html>
點選“自己嘗試”按鈕檢視其工作原理！
嘗試將容器的背景顏色從青色更改為黑色。
您做到了嗎？
恭喜！
您剛剛學習了使用樣式表的基礎知識。
繼續閱讀！
如何實現響應式設計
HTML 程式碼
<div class="w3-row">
<div class="w3-third">
<img src="img_avatar.png" alt="姓名1" style="width:100%">
</div>
<div class="w3-third">
<img src="img_avatar.png" alt="姓名2" style="width:100%">
</div>
<div class="w3-third">
<img src="img_avatar.png" alt="姓名3" style="width:100%">
</div>
</div>
自己動手試一試 »
如何建立卡片
準備好迎接真正高階的內容了嗎？
來一張 HTML 名片怎麼樣？
包括圖片和文字。
請先嚐試下面的程式碼，直到您覺得掌握了它。
之後，我們將開始編寫真正棒的 HTML 頁面。
John Doe
工程師
HTML 程式碼
<div class="w3-card" style="width:200px">
<img src="img_avatar.png" style="width:100%">
<div class="w3-container w3-center">
<p class="w3-xlarge">John Doe</p>
<p>工程師</p>
</div>
</div>
自己動手試一試 »
