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

<!DOCTYPE html>
<html>
<title>W3.CSS 模板</title>
<meta charset="UTF-8">
<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://fonts.googleapis.com/css?family=Raleway">
<style>body,h1,h5 {font-family: "Raleway", sans-serif}
body, html {height: 100%}
.bgimg {
  background-image: url('../w3images/onepage_restaurant.jpg');
  min-height: 100%;
  background-position: center;
  background-size: cover;
}
</style>
<body>

<div class="bgimg w3-display-container w3-text-white">
  <div class="w3-display-middle w3-jumbo">
    <p>logo</p>
  </div>
  <div class="w3-display-topleft w3-container w3-xlarge">
    <p><button onclick="document.getElementById('menu').style.display='block'" class="w3-button w3-black">菜单</button></p>
    <p><button onclick="document.getElementById('contact').style.display='block'" class="w3-button w3-black">联系方式</button></p>
  </div>
  <div class="w3-display-bottomleft w3-container">
    <p class="w3-xlarge">周一至周五 10-23 | 星期六 14-02</p>
    <p class="w3-large">42 village St, New York</p>
    <p>采用 <a href="https://www.cainiaomax.com/w3css/default.asp" target="_blank">w3.css</a></p>
  </div>
</div>

<div id="menu" class="w3-modal">
  <div class="w3-modal-content w3-animate-zoom">
    <div class="w3-container w3-black w3-display-container">
      <span onclick="document.getElementById('menu').style.display='none'" class="w3-button w3-display-topright w3-large">x</span>
      <h1>Starters</h1>
    </div>
    <div class="w3-container">
      <h5>番茄汤 <b>2.50 美元</b></h5>
      <h5>鸡肉沙拉 <b>3.50 美元</b></h5>
      <h5>面包和黄油 <b>1.00 美元</b></h5>
    </div>
    <div class="w3-container w3-black">
      <h1>主要课程</h1>
    </div>
    <div class="w3-容器">
      <h5>烤鱼和土豆 <b>8.50 美元</b></h5>
      <h5>意大利披萨 <b>5.50 美元</b></h5>
      <h5>素食意大利面 <b>4.00 美元</b></h5>
      <h5>鸡肉和土豆 <b>6.50 美元</b></h5>
      <h5>豪华汉堡 <b>5.00 美元</b></h5>
    </div>
    <div class="w3-container w3-black">
      <h1>甜点</h1>
    </div>
    <div class="w3-容器">
      <h5>水果沙拉 <b>2.50 美元</b></h5>
      <h5>冰淇淋 <b>2.00 美元</b></h5>
      <h5>巧克力蛋糕 <b>4.00 美元</b></h5>
      <h5>奶酪 <b>5.50 美元</b></h5>
    </div>
  </div>
</div>

<div id="contact" class="w3-modal">
  <div class="w3-modal-content w3-animate-zoom">
    <div class="w3-container w3-black">
      <span onclick="document.getElementById('contact').style.display='none'" class="w3-button w3-display-topright w3-large">x</span>
      <h1>联系方式</h1>
    </div>
    <div class="w3-container">
      <p>预订餐桌、索取今日特价或仅向我们发送消息：</p>
      <form action="https://www.cainiaomax.com/action_page.php" target="_blank">
        <p><input class="w3-input w3-padding-16 w3-border" type="text" placeholder="Name" required name="Name"></p>
        <p><input class="w3-input w3-padding-16 w3-border" type="number" placeholder="How many people" required name="People"></p>
        <p><input class="w3-input w3-padding-16 w3-border" type="datetime-local" placeholder="Date and time" required name="date" value="2017-11-16T20:00"></p>
        <p><input class="w3-input w3-padding-16 w3-border" type="text" placeholder="Message \ Special requirements" required name="Message"></p>
        <p><button class="w3-button" type="submit">SEND MESSAGE</button></p>
      </form>
    </div>
  </div>
</div>

</body>
</html>

报个问题: