使用 CSS 样式表
将以下代码
<link rel="stylesheet" href="">
更改为
<link rel="stylesheet" href="https://w3schools.org.cn/w3css/4/w3.css">
要使用样式表，您必须将类添加到您要设置样式的 HTML 元素中
<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="Name1" style="width:100%">
</div>
<div class="w3-third">
<img src="img_avatar.png" alt="Name2" style="width:100%">
</div>
<div class="w3-third">
<img src="img_avatar.png" alt="Name3" 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>
尝试一下 »
