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">
<link rel="stylesheet" href="https://www.cainiaomax.com/lib/w3-theme-teal.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
<link rel="stylesheet" href="https://cdn.cainiaomax.com/cdnjs/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><style>body {font-family: "Roboto", sans-serif}
.w3-bar-block .w3-bar-item {
  padding: 16px;
  font-weight: bold;
}
</style>
<body>

<nav class="w3-sidebar w3-bar-block w3-collapse w3-animate-left w3-card" style="z-index:3;width:250px;" id="mySidebar">
  <a class="w3-bar-item w3-button w3-border-bottom w3-large" href="#"><img src="https://www.cainiaomax.com/images/w3schools.png" style="width:80%;"></a>
  <a class="w3-bar-item w3-button w3-hide-large w3-large" href="javascript:void(0)" onclick="w3_close()">Close <i class="fa fa-remove"></i></a>
  <a class="w3-bar-item w3-button w3-teal" href="#">首页</a>
  <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>
  <a class="w3-bar-item w3-button" href="#">链接 4</a>
  <a class="w3-bar-item w3-button" href="#">链接 5</a>
  <div>
    <a class="w3-bar-item w3-button" onclick="myAccordion('demo')" href="javascript:void(0)">下拉列表 <i class="fa fa-caret-down"></i></a>
    <div id="demo" class="w3-hide">
      <a class="w3-bar-item w3-button" href="#">链接</a>
      <a class="w3-bar-item w3-button" href="#">链接</a>
      <a class="w3-bar-item w3-button" href="#">链接</a>
    </div>
  </div>
</nav>

<div id="myTop" class="w3-container w3-top w3-theme w3-large">
  <p><i class="fa fa-bars w3-button w3-teal w3-hide-large w3-xlarge" onclick="w3_open()"></i>
  <span id="myIntro" class="w3-hide">W3.CSS: Introduction</span></p>
</div>

<p>W3.CSS 是一个具有内置响应能力的现代 CSS 框架：</p>

<ul class="w3-leftbar w3-theme-border" style="list-style:none">
 <li>比其他 CSS 框架更小、更快。</li>
 <li>比其他 CSS 框架更容易学习和使用。</li>
 <li>仅使用标准 CSS（无 jQuery 或 JavaScript 库）。</li>
 <li>加快移动 HTML 应用程序的速度。</li>
 <li>为所有设备提供 CSS 平等。 个人电脑、笔记本电脑、平板电脑和手机：</li>
</ul>
<br>
<img src="img_responsive.png" style="width:100%" alt="Responsive">

<hr>
<h2>W3.CSS 是免费的</h2>
<p>W3.CSS 可免费使用。 无需许可证。</p>

<hr>
<h2>易于使用</h2>
<div class="w3-container w3-sand w3-leftbar">
<p><i>尽可能简单，但不要简单。</i><br>
爱因斯坦</p>
</div>

<p>我们已经创建了一些响应式 W3CSS 模板供您使用。</p>
<p>您可以自由修改、保存、分享、使用它们或对它们做任何您想做的事情：</p>

<div class="w3-panel w3-light-grey w3-padding-16 w3-card">
<h3 class="w3-center">Band Template</h3>
<div class="w3-content" style="max-width:800px">
<a href="tryw3css_templates_band.htm" target="_blank"  title="Band Demo"><img src="img_temp_band.jpg" style="width:98%;margin:20px 0" alt="Band Template"></a><br>
<div class="w3-row">
  <div class="w3-col m6">
    <a href="tryw3css_templates_band.htm" target="_blank" class="w3-button w3-padding-large w3-dark-grey" style="width:98.5%">Demo</a>
  </div>
  <div class="w3-col m6">
    <a href="w3css_templates.asp.html" class="w3-button w3-padding-large w3-dark-grey" style="width:98.5%">More Templates »</a>
  </div>
</div>
</div>
</div>

<div class="w3-container w3-padding-16 w3-card" style="background-color:#eee">
<h3 class="w3-center">Blog Template</h3>
<div class="w3-content" style="max-width:800px">
<img src="img_temp_blog.jpg" style="width:98%;margin:20px 0" alt="Blog Template"><br>
<div class="w3-row">
  <div class="w3-col m6">
    <a href="tryw3css_templates_blog.htm" target="_blank" class="w3-button w3-padding-large w3-dark-grey" style="width:98.5%">Demo</a>
  </div>
  <div class="w3-col m6">
    <a href="w3css_templates.asp.html" class="w3-button w3-padding-large w3-dark-grey" style="width:98.5%">More Templates »</a>
  </div>
</div>
</div>
</div>

</div>

<footer class="w3-container w3-theme" style="padding:32px">
  <p>页脚信息在这里</p>
</footer>
     
</div>

function w3_close() {
  document.getElementById("mySidebar").style.display = "none";
  document.getElementById("myOverlay").style.display = "none";
}

// Change style of top container on scroll
window.onscroll = function() {myFunction()};
function myFunction() {
  if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
    document.getElementById("myTop").classList.add("w3-card-4", "w3-animate-opacity");
    document.getElementById("myIntro").classList.add("w3-show-inline-block");
  } else {
    document.getElementById("myIntro").classList.remove("w3-show-inline-block");
    document.getElementById("myTop").classList.remove("w3-card-4", "w3-animate-opacity");
  }
}

// Accordions
function myAccordion(id) {
  var x = document.getElementById(id);
  if (x.className.indexOf("w3-show") == -1) {
    x.className += " w3-show";
    x.previousElementSibling.className += " w3-theme";
  } else { 
    x.className = x.className.replace("w3-show", "");
    x.previousElementSibling.className = 
    x.previousElementSibling.className.replace(" w3-theme", "");
  }
}
</script>
     
</body>
</html>

报个问题: