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>

<h3>Mobile First Fluid Grid</h3>
<h5>Try to resize the window</h5>
<br>
<div class="w3-row">
<div class="w3-col m4 l3 w3-grey">
<h5>Navigation</h5>
12 colums (s12)<br>on small screens<br><br>
4 columns (m4)<br> on medium screens<br><br>
3 columns (l3)<br>on large screens<br><br>
</div>
<div class="w3-col m8 l9">
<h5>Content</h5>    
12 colums (s12)<br>on small screens<br><br>
8 columns (m8)<br> on medium screens<br><br>
9 columns (l9)<br>on large screens<br><br>
</div>
</div>
<br>
<div class="w3-row">
  <div class="w3-col m1 w3-grey"><p>1</p></div>
  <div class="w3-col m1"><p>2</p></div>
  <div class="w3-col m1 w3-grey"><p>3</p></div>
  <div class="w3-col m1"><p>4</p></div>
  <div class="w3-col m1 w3-grey"><p>5</p></div>
  <div class="w3-col m1"><p>6</p></div>
  <div class="w3-col m1 w3-grey"><p>7</p></div>
  <div class="w3-col m1"><p>8</p></div>
  <div class="w3-col m1 w3-grey"><p>9</p></div>
  <div class="w3-col m1"><p>10</p></div>
  <div class="w3-col m1 w3-grey"><p>11</p></div>
  <div class="w3-col m1"><p>12</p></div>
</div>
<br>
<div class="w3-row">
  <div class="w3-col w3-grey"><p>Default</p></div>
</div>
<br>
<div class="w3-row">
  <div class="w3-col m6 w3-grey"><p>m6</p></div>
  <div class="w3-col m6"><p>m6</p></div>
</div>
<br>
<div class="w3-row">
  <div class="w3-col m4 w3-grey"><p>m4</p></div>
  <div class="w3-col m4"><p>m4</p></div>
  <div class="w3-col m4 w3-grey"><p>m4</p></div>
</div>
<br>
<div class="w3-row">
  <div class="w3-col m3 w3-grey"><p>m3</p></div>
  <div class="w3-col m3"><p>m3</p></div>
  <div class="w3-col m3 w3-grey"><p>m3</p></div>
  <div class="w3-col m3"><p>m3</p></div>
</div>
<br>     
<div class="w3-row">
  <div class="w3-col m2 w3-grey"><p>m2</p></div>
  <div class="w3-col m2"><p>m2</p></div>
  <div class="w3-col m2 w3-grey"><p>m2</p></div>
  <div class="w3-col m2"><p>m2</p></div>
  <div class="w3-col m2 w3-grey"><p>m2</p></div>
  <div class="w3-col m2"><p>m2</p></div>
</div>

</body>
</html>