w3css 在线编辑器 | w3css代码测试

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.cainiaomax.com/w3css/4/w3.css">
<style>.city {display:none}
</style>
<body>

<div class="w3-container">
<h2>模态选项卡式</h2>
<p>在此示例中，我们在模态框内添加选项卡式内容。</p>

<button onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-black">打开选项卡式模态</button>

<div id="id01" class="w3-modal">
 <div class="w3-modal-content w3-card-4 w3-animate-zoom">
  <header class="w3-container w3-blue"> 
   <span onclick="document.getElementById('id01').style.display='none'" 
   class="w3-button w3-blue w3-xlarge w3-display-topright">&times;</span>
   <h2>页眉</h2>
  </header>

<div id="London" class="w3-container city">
   <h1>伦敦</h1>
   <p>伦敦是英国人口最多的城市，大都市区有超过 900 万居民。</p>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>

<div id="巴黎" class="w3-container city">
   <h1>巴黎</h1>
   <p>巴黎是法国的首都。</p>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>

<div id="Tokyo" class="w3-container city">
   <h1>东京</h1>
   <p>东京是日本的首都。</p><br>
  </div>

<div class="w3-container w3-light-grey w3-padding">
   <button class="w3-button w3-right w3-white w3-border" 
   onclick="document.getElementById('id01').style.display='none'">Close</button>
  </div>
 </div>
</div>

</div>

报个问题: