試一試 - W3.CSS examples

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/lib/w3.css">
<link rel="stylesheet" href="../lib/w3-theme-teal.css">
<link rel="stylesheet" href="../../cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css"><style>
.w3-sidenav a {padding:16px}
</style>
<body>

<nav class="w3-sidenav w3-collapse w3-white w3-animate-left w3-large" style="z-index:3;width:300px;">
<ul class="w3-navbar w3-black w3-center">
  <li style="width:33.33% !important" class="w3-left">
   <a href="javascript:void(0)" onclick="openNav('nav01')">
   <i class="fa fa-bars w3-xlarge"></i></a></li>
  <li style="width:33.33% !important" class="w3-left">
   <a href="javascript:void(0)" onclick="openNav('nav02')">
   <i class="fa fa-camera w3-xlarge"></i></a></li>
  <li style="width:33.33% !important" class="w3-left">
   <a href="javascript:void(0)" onclick="openNav('nav03')">
   <i class="fa fa-file w3-xlarge"></i></a>
  </li>
</ul>

<div id="nav01">
  <a href="#" class="w3-border-bottom w3-large"><img src="../images/w3schools.png" style="width:80%;"></a>
  <a href="javascript:void(0)" onclick="w3_close()" class="w3-text-teal w3-hide-large w3-closenav w3-large">Close ×</a>
  <a href="#" class="w3-light-grey">Home</a>
  <a href="#">Products</a>
  <a href="#">Customers</a>
  <a href="#">Suppliers</a>
  <a href="#">Shippers</a>
  <a href="#">Categories</a>
  <a href="#">Employees</a>
</div>

<div id="nav02">
  <a target="_blank" href="tryw3css_templates_black.htm"><img src="img_demo_black.png" style="width:100%;"></a>
  <a target="_blank" href="tryw3css_examples_album.htm"><img src="img_demo_summer.png" style="width:100%;"></a>
  <a target="_blank" href="tryw3css_examples_blog.htm"><img src="img_demo_blog.png" style="width:100%;"></a>
</div>

<div id="nav03">
  <div class="w3-container w3-border-bottom">
   <h1 class="w3-text-theme">W3.CSS</h1>
  </div>
  <ul class="w3-ul w3-large">
   <li class="w3-padding-hor-16">Smller and faster</li>
   <li class="w3-padding-hor-16">Esier to use</li>
   <li class="w3-padding-hor-16">Esier to learn</li>
   <li class="w3-padding-hor-16">CSS only</li>
   <li class="w3-padding-hor-16">Speeds up apps</li>
   <li class="w3-padding-hor-16">CSS equality for all</li>
   <li class="w3-padding-hor-16">PC Laptop Tablet Mobile</li>
  </ul>
</div>
</nav>

<div class="w3-overlay w3-hide-large" onclick="w3_close()" style="cursor:pointer"></div>

<div class="w3-main" style="margin-left:300px;">

<div id="myTop" class="w3-top w3-container w3-padding-hor-16 w3-theme w3-large w3-hide-large">
  <i class="fa fa-bars w3-opennav w3-xlarge w3-margin-left w3-margin-right" onclick="w3_open()"></i>
</div>

<header class="w3-container w3-theme w3-padding-hor-64 w3-center">
  <h1 class="w3-xxxlarge w3-padding-hor-16">W3Schools.com</h1>
</header>

<div class="w3-container w3-padding-large w3-light-grey">
  <h1 class="w3-jumbo">HTML</h1>
  <p class="w3-xlarge">The Language for Building Web Pages</p>
  <a href="../html/default.html" class="w3-btn w3-theme w3-hover-white">LEARN HTML</a>
  <a href="../tags/default.html" class="w3-btn w3-theme w3-hover-white">HTML REFERENCE</a>
  <p><div class="w3-code htmlHigh notranslate">
  <!DOCTYPE html><br>
  <html><br>
  <title>HTML Tutorial</title><br>
  <body><br><br>
  <h1>This is a heading</h1><br>
  <p>This is a paragraph.</p><br><br>
  </body><br>
  </html>
  </div>
  <a href="../html/tryit.asp-filename=tryhtml_default.html" target="_blank" class="w3-btn w3-theme w3-hover-white">Try it Yourself</a>
</div>

<div class="w3-container w3-padding-large w3-section w3-light-grey">
  <h1 class="w3-jumbo">CSS</h1>
  <p class="w3-xlarge">The Language for Styling Web Pages</p>
  <a class="w3-btn w3-theme w3-hover-white" href="../css/default.html">LEARN CSS</a>
  <a class="w3-btn w3-theme w3-hover-white" href="../ccsref/default.html">CSS REFERENCE</a>
  <p class="w3-large">
  <p><div class="w3-code cssHigh notranslate">
  body {<br>
      background-color: #d0e4fe;<br>}<br>h1 {<br>
      color: orange;<br>
      text-align: center;<br>}<br>p {<br>
      font-family: "Times New Roman";<br>
      font-size: 20px;<br>}
  </div>
  <a class="w3-btn w3-theme w3-hover-white" href="../css/tryit.asp-filename=trycss_default.html" target="_blank">Try it Yourself</a>
</div>

<div class="w3-container w3-padding-large w3-section w3-light-grey">
  <h1 class="w3-jumbo">JavaScript</h1>
  <p class="w3-xlarge">The Language for Programming Web Pages</p>
  <a href="../js/default.html" class="w3-btn w3-theme w3-hover-white">LEARN JS</a>
  <a href="../jsref/default.html" class="w3-btn w3-theme w3-hover-white">JS REFERENCE</a>

  <p><div class="w3-code jsHigh notranslate">
   // Click the button to change the color of this paragraph<br><br>function myFunction() {<br>
      var x;<br>
      x = document.getElementById("demo");<br>
      x.style.fontSize = "25px"; <br>
      x.style.color = "red"; <br>}
  </div>
  <a class="w3-btn w3-theme w3-hover-white" href="../js/tryit.asp-filename=tryjs_default.html" target="_blank">Try it Yourself</a>
</div>

<div class="w3-container w3-section w3-padding-large w3-light-grey">
  <h1 class="w3-jumbo">W3.CSS</h1>
  <p class="w3-xlarge">The Framework for Building Responsive Sites</p>
  <a href="../w3css/default.html" class="w3-btn w3-theme w3-hover-white">LEARN W3.CSS</a>
  <a href="../w3css/w3css_reference.html" class="w3-btn w3-theme w3-hover-white">W3.CSS REFERENCE</a>
  <p><div class="w3-code w3-white htmlHigh notranslate">
  <div class="w3-container w3-teal"><br>
      <h1>My Header</h1><br>
  </div><br><br>
  <img src="img_car.jpg" alt="Car" style="width:100%"><br><br>
  <div class="w3-container"><br>
      <p>A car is a wheeled, self-powered motor vehicle used for transportation.</p><br>
  </div><br><br>
  <div class="w3-container w3-teal"><br>
      <p>My Footer</p><br>
  </div></div>
  <a class="w3-btn w3-theme w3-hover-white" href="../w3css/tryit.asp-filename=tryw3css_intro.html" target="_blank">Try it Yourself</a>
</div>

<footer class="w3-container w3-padding-large w3-light-grey w3-justify w3-opacity">
  <p><nav>
  <a href="../forum/default.html" target="_blank">FORUM</a> |
  <a href="../about/default.html" target="_top">ABOUT</a>
  </nav></p>
  <p>
  W3Schools is optimized for learning, testing, and training. Examples might be simplified to improve reading and basic understanding.
  Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content.</p>
  <p>
  While using this site, you agree to have read and accepted our <a href="../about/about_copyright.html">terms of use</a>,
  <a href="../about/about_privacy.html">cookie and privacy policy</a>.<br><br>
  <a href="../about/about_copyright.html">Copyright 1999-2016</a> by Refsnes Data. All Rights Reserved.<br>
  </p>
</footer>

</div>

<script>
function w3_open() {
   document.getElementsByClassName("w3-sidenav")[0].style.display = "block";
   document.getElementsByClassName("w3-overlay")[0].style.display = "block";
}
function w3_close() {
   document.getElementsByClassName("w3-sidenav")[0].style.display = "none";
   document.getElementsByClassName("w3-overlay")[0].style.display = "none";
}
openNav("nav01");
function openNav(id) {
   document.getElementById("nav01").style.display = "none";
   document.getElementById("nav02").style.display = "none";
   document.getElementById("nav03").style.display = "none";
   document.getElementById(id).style.display = "block";
}
</script>
<script src="../lib/w3codecolors.js"></script>

</body>
</html>

<div id="nav01">
  <a href="#" class="w3-border-bottom w3-large"><img src="../images/w3schools.png" style="width:80%;"></a>
  <a href="javascript:void(0)" onclick="w3_close()" class="w3-text-teal w3-hide-large w3-closenav w3-large">Close ×</a>
  <a href="#" class="w3-light-grey">Home</a>		
  <a href="#">Products</a>		
  <a href="#">Customers</a>		
  <a href="#">Suppliers</a>		
  <a href="#">Shippers</a>		
  <a href="#">Categories</a>	
  <a href="#">Employees</a>		
</div>

<div id="nav03">
  <div class="w3-container w3-border-bottom">
    <h1 class="w3-text-theme">W3.CSS</h1>
  </div>
  <ul class="w3-ul w3-large">  
   <li class="w3-padding-hor-16">Smller and faster</li>
   <li class="w3-padding-hor-16">Esier to use</li>
   <li class="w3-padding-hor-16">Esier to learn</li>
   <li class="w3-padding-hor-16">CSS only</li>
   <li class="w3-padding-hor-16">Speeds up apps</li>
   <li class="w3-padding-hor-16">CSS equality for all</li>
   <li class="w3-padding-hor-16">PC Laptop Tablet Mobile</li>
  </ul>
</div>
</nav>

<header class="w3-container w3-theme w3-padding-hor-64 w3-center">
  <h1 class="w3-xxxlarge w3-padding-hor-16">W3Schools.com</h1>
</header>

<div class="w3-container w3-padding-large w3-light-grey">
  <h1 class="w3-jumbo">HTML</h1>
  <p class="w3-xlarge">The Language for Building Web Pages</p>
  <a href="../html/default.html" class="w3-btn w3-theme w3-hover-white">LEARN HTML</a>
  <a href="../tags/default.html" class="w3-btn w3-theme w3-hover-white">HTML REFERENCE</a>
  <p><div class="w3-code htmlHigh notranslate">
  <!DOCTYPE html><br>
  <html><br>
  <title>HTML Tutorial</title><br>
  <body><br><br>
  <h1>This is a heading</h1><br>
  <p>This is a paragraph.</p><br><br>
  </body><br>
  </html>
  </div>
  <a href="../html/tryit.asp-filename=tryhtml_default.html" target="_blank" class="w3-btn w3-theme w3-hover-white">Try it Yourself</a>
</div>

<div class="w3-container w3-padding-large w3-section w3-light-grey">
  <h1 class="w3-jumbo">CSS</h1>
  <p class="w3-xlarge">The Language for Styling Web Pages</p>
  <a class="w3-btn w3-theme w3-hover-white" href="../css/default.html">LEARN CSS</a>
  <a class="w3-btn w3-theme w3-hover-white" href="../ccsref/default.html">CSS REFERENCE</a>
  <p class="w3-large">
  <p><div class="w3-code cssHigh notranslate">
  body {<br>
      background-color: #d0e4fe;<br>}<br>h1 {<br>
      color: orange;<br>
      text-align: center;<br>}<br>p {<br>
      font-family: "Times New Roman";<br>
      font-size: 20px;<br>}
  </div>
  <a class="w3-btn w3-theme w3-hover-white" href="../css/tryit.asp-filename=trycss_default.html" target="_blank">Try it Yourself</a>
</div>

<div class="w3-container w3-padding-large w3-section w3-light-grey">
  <h1 class="w3-jumbo">JavaScript</h1>
  <p class="w3-xlarge">The Language for Programming Web Pages</p>
  <a href="../js/default.html" class="w3-btn w3-theme w3-hover-white">LEARN JS</a>
  <a href="../jsref/default.html" class="w3-btn w3-theme w3-hover-white">JS REFERENCE</a>

<p><div class="w3-code jsHigh notranslate">
   // Click the button to change the color of this paragraph<br><br>function myFunction() {<br>
      var x;<br>
      x = document.getElementById("demo");<br>
      x.style.fontSize = "25px"; <br>
      x.style.color = "red"; <br>}
  </div>
  <a class="w3-btn w3-theme w3-hover-white" href="../js/tryit.asp-filename=tryjs_default.html" target="_blank">Try it Yourself</a>
</div>

<div class="w3-container w3-section w3-padding-large w3-light-grey">
  <h1 class="w3-jumbo">W3.CSS</h1>
  <p class="w3-xlarge">The Framework for Building Responsive Sites</p>
  <a href="../w3css/default.html" class="w3-btn w3-theme w3-hover-white">LEARN W3.CSS</a>
  <a href="../w3css/w3css_reference.html" class="w3-btn w3-theme w3-hover-white">W3.CSS REFERENCE</a>
  <p><div class="w3-code w3-white htmlHigh notranslate">
  <div class="w3-container w3-teal"><br>
      <h1>My Header</h1><br>
  </div><br><br>
  <img src="img_car.jpg" alt="Car" style="width:100%"><br><br>
  <div class="w3-container"><br>
      <p>A car is a wheeled, self-powered motor vehicle used for transportation.</p><br>
  </div><br><br>
  <div class="w3-container w3-teal"><br>
      <p>My Footer</p><br>
  </div></div>
  <a class="w3-btn w3-theme w3-hover-white" href="../w3css/tryit.asp-filename=tryw3css_intro.html" target="_blank">Try it Yourself</a>
</div>

<footer class="w3-container w3-padding-large w3-light-grey w3-justify w3-opacity">
  <p><nav>
  <a href="../forum/default.html" target="_blank">FORUM</a> |
  <a href="../about/default.html" target="_top">ABOUT</a>
  </nav></p>
  <p>
  W3Schools is optimized for learning, testing, and training. Examples might be simplified to improve reading and basic understanding.
  Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content.</p>
  <p>
  While using this site, you agree to have read and accepted our <a href="../about/about_copyright.html">terms of use</a>,
  <a href="../about/about_privacy.html">cookie and privacy policy</a>.<br><br>
  <a href="../about/about_copyright.html">Copyright 1999-2016</a> by Refsnes Data. All Rights Reserved.<br>
  </p>
</footer>

</div>

</body>
</html>