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

<h2>手风琴按钮</h2>
<p>您可以使用任何 HTML 元素打开手风琴内容。 我们更喜欢带有 w3-block 类的按钮，因为它跨越了其父元素的整个宽度，就像手风琴内容（100% 宽度）一样。 请记住，W3.CSS 中的按钮默认居中。 如果您希望它们左对齐，请使用 w3-left-align 类。 但是，您不必遵循我们的方法。</p>

<div id="Demo1" class="w3-hide w3-container w3-light-grey">
  <p>Lorem ipsum...</p>
</div>
<button onclick="myFunction('Demo2')" class="w3-button w3-block w3-left-align w3-green">
左对齐且全宽</button>

<div id="Demo2" class="w3-hide w3-container">
  <p>Lorem ipsum...</p>
</div>

<button onclick="myFunction('Demo3')" class="w3-btn w3-block w3-red">
居中和全宽</button>

<div id="Demo3" class="w3-hide w3-container w3-center w3-pale-red">
  <p>内容也居中！</p>
</div>

</div>
<script>
function myFunction(id) {
  var x = document.getElementById(id);
  if (x.className.indexOf("w3-show") == -1) {
    x.className += " w3-show";
  } else { 
    x.className = x.className.replace(" w3-show", "");
  }
}
</script>

</body>
</html>

报个问题: