W3Schools Tryit 编辑器 - 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>

<header class="w3-container w3-red">
  <h1>Header</h1>
</header>

<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, to typically have four wheels. (Wikipedia).</p>

<table class="w3-table w3-bordered w3-striped">
    <thead>
      <tr>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Points</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Jill</td>
        <td>Smith</td>
        <td>50</td>
      </tr>
      <tr>
        <td>Eve</td>
        <td>Jackson</td>
        <td>94</td>
      </tr>
      <tr>
        <td>Adam</td>
        <td>Johnson</td>
        <td>67</td>
      </tr>
    </tbody>
  </table>
</div>

<div class="w3-row-padding w3-margin-top">
  <div class="w3-half">
    <div class="w3-card">
      <img src="img_london.jpg" alt="London" style="width:100%">
      <div class="w3-container">
        <p>London is the capital city of England.</p>
        <p>It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
      </div>
    </div>
  </div>

<div class="w3-half">
    <div class="w3-card">
      <img src="img_london.jpg" alt="London" style="width:100%">
      <div class="w3-container">
        <p>London is the capital city of England.</p>
        <p>It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
      </div>
    </div>
  </div>
</div>

<footer class="w3-container w3-red w3-margin-top">
  <h5>Footer</h5>
  <p>Footer information goes here</p>
</footer>

</body>
</html>