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">
<body>

<div class="w3-sidebar w3-bar-block w3-collapse w3-card w3-animate-right" style="width:200px;right:0;" id="mySidebar">
  <button class="w3-bar-item w3-button w3-large w3-hide-large" onclick="w3_close()">Close &times;</button>
  <a class="w3-bar-item w3-button" href="#">链接 1</a>
  <a class="w3-bar-item w3-button" href="#">链接 2</a>
  <a class="w3-bar-item w3-button" href="#">链接 3</a>
</div>

<div class="w3-main" style="margin-right:200px">
<div class="w3-teal">
  <button class="w3-button w3-teal w3-xlarge w3-hide-large w3-right" onclick="w3_open()">&#9776;</button>
  <div class="w3-container">
    <h2>响应式侧边栏</h2>
  </div>
</div>

<div class="w3-container">
  <p>在此示例中，侧边导航将始终在台式机和笔记本电脑（屏幕宽度大于 992px）上显示，而在平板电脑和手机（屏幕宽度小于 992px）上隐藏。</p>
  <p>在平板电脑和手机上，侧边导航被替换为菜单图标，单击该图标会打开导航窗格：然后它将覆盖/位于页面内容的顶部。</p>
  <p><b>调整浏览器窗口大小以了解其工作原理。</b></p>
</div>

</div>

报个问题: