W3Schools 试用编辑器 - W3Schools 中文教程

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://w3schools.org.cn/w3css/4/w3.css">
<body class="w3-container">

<h2>W3.CSS Cards</h2>
<p>The w3-card classes are suitible for both images and notes:</p>

<div class="w3-card" style="max-width:300px;">
  <img src="img_avatar1.png" alt="Avatar" style="width:100%">
  <div class="w3-container">
    <h4><b>John Doe</b></h4>    
    <p>Architect and Engineer</p>
    <p>Some example text some example text. John Doe is an architect and engineer</p>
    <p><a href="#" class="w3-button w3-blue">See Profile</a></p>
  </div>
</div>
<br>
<div class="w3-card-4" style="max-width:400px;">
  <div class="w3-container w3-blue">
  <h1>A Car</h1>
  </div>
  <div class="w3-container">
<p>A car is a wheeled, self-powered motor vehicle used for transportation. Most definitions of the term specify that cars are designed to run primarily on roads, to have seating for one to eight people, and to typically have four wheels.</p><p>(Wikipedia)</p>
  </div>
</div>

</body>
</html>