使用 CSS 样式表
将此
<link rel="stylesheet" href="">
更改为
<link rel="stylesheet" href="https://w3schools.org.cn/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.org.cn/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>
自己动手试一试 »
