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=Inconsolata">
<style>body, html {
  height: 100%;
  font-family: "Inconsolata", sans-serif;
}

.bgimg {
  background-position: center;
  background-size: cover;
  background-image: url("../w3images/coffeehouse.jpg");
  min-height: 75%;
}

.menu {
  display: none;
}
</style>
<body>

<div class="w3-top">
  <div class="w3-row w3-padding w3-black">
    <div class="w3-col s3">
      <a href="#" class="w3-button w3-block w3-black">首页</a>
    </div>
    <div class="w3-col s3">
      <a href="#about" class="w3-button w3-block w3-black">关于</a>
    </div>
    <div class="w3-col s3">
      <a href="#menu" class="w3-button w3-block w3-black">菜单</a>
    </div>
    <div class="w3-col s3">
      <a href="#where" class="w3-button w3-block w3-black">在哪里</a>
    </div>
  </div>
</div>

<header class="bgimg w3-display-container w3-grayscale-min" id="home">
  <div class="w3-display-bottomleft w3-center w3-padding-large w3-hide-small">
    <span class="w3-tag">营业时间为早上 6 点至下午 5 点</span>
  </div>
  <div class="w3-display-middle w3-center">
    <span class="w3-text-white" style="font-size:90px"><br>咖啡馆</span>
  </div>
  <div class="w3-display-bottomright w3-center w3-padding-large">
    <span class="w3-text-white">15 Adr 街，5015</span>
  </div>
</header>

<div class="w3-sand w3-grayscale w3-large">

<div class="w3-container" id="about">
  <div class="w3-content" style="max-width:700px">
    <h5 class="w3-center w3-padding-64"><span class="w3-tag w3-wide">关于咖啡厅</span></h5 >
    <p>The Cafe 由 Smith 先生在 blabla 创立，在 lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua 中。 Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    <p>除了我们完整的意式浓缩咖啡和酿造酒吧菜单外，我们还提供新鲜定制的早餐和午餐三明治，以及精选的配菜和沙拉以及其他美食。</p>
    <div class="w3-panel w3-leftbar w3-light-grey">
      <p><i>“物有所值地使用来自大自然的产品——但永远不要太早，也不要太晚。” 新鲜是新的甜蜜。</i></p>
      <p>厨师、咖啡师和老板：Liam Brown</p>
    </div>
    <img src="../w3images/coffeeshop.jpg" style="width:100%;max-width:1000px" class="w3-margin-top">
    <p><strong>营业时间</strong>：每天早上 6 点到下午 5 点。</p>
    <p><strong>地址：</strong> 15 Adr street, 5015, NY</p>
  </div>
</div>

<div class="w3-container" id="menu">
  <div class="w3-content" style="max-width:700px">
 
    <h5 class="w3-center w3-padding-48"><span class="w3-tag w3-wide">THE MENU</span></h5>
  
    <div class="w3-row w3-center w3-card w3-padding">
      <a href="javascript:void(0)" onclick="openMenu(event, 'Eat');" id="myLink">
        <div class="w3-col s6 tablink">Eat</div>
      </a>
      <a href="javascript:void(0)" onclick="openMenu(event, 'Drinks');">
        <div class="w3-col s6 tablink">Drink</div>
      </a>
    </div>

<div id="Eat" class="w3-container menu w3-padding-48 w3-card">
      <h5>面包篮</h5>
      <p class="w3-text-grey">各种新鲜出炉的水果面包和松饼 5.50</p><br>
    
      <h5>蜂蜜杏仁格兰诺拉麦片配水果</h5>
      <p class="w3-text-grey">蜂蜜烤燕麦、葡萄干、杏仁和枣的天然谷物 7.00</p><br>
    
      <h5>比利时华夫饼</h5>
      <p class="w3-text-grey">香草味面糊加麦芽面粉 7.50</p><br>
    
      <h5>炒鸡蛋</h5>
      <p class="w3-text-grey">炒鸡蛋，烤红辣椒和大葱 7.50</p><br>
    
      <h5>蓝莓煎饼</h5>
      <p class="w3-text-grey">含糖浆、黄油和大量浆果 8.50</p>
    </div>

<div id="Drinks" class="w3-container menu w3-padding-48 w3-card">
      <h5>咖啡</h5>
      <p class="w3-text-grey">普通咖啡 2.50</p><br>
    
      <h5>巧克力</h5>
      <p class="w3-text-grey">巧克力浓缩咖啡加牛奶 4.50</p><br>
    
      <h5>Corretto</h5>
      <p class="w3-text-grey">威士忌和咖啡 5.00</p><br>
    
      <h5>冰茶</h5>
      <p class="w3-text-grey">热茶，除了不热 3.00</p><br>
    
      <h5>汽水</h5>
      <p class="w3-text-grey">可乐、雪碧、芬达等2.50</p>
    </div>  
    <img src="../w3images/coffeehouse2.jpg" style="width:100%;max-width:1000px;margin-top:32px;">
  </div>
</div>

<div class="w3-container" id="where" style="padding-bottom:32px;">
  <div class="w3-content" style="max-width:700px">
    <h5 class="w3-center w3-padding-48"><span class="w3-tag w3-wide">在哪里可以找到我们</span></h5>
    <p>在某个地方的某个地址找到我们。</p>
    <img src="../w3images/map.jpg" class="w3-image" style="width:100%">
    <p><span class="w3-tag">仅供参考！</span>我们为任何规模的活动提供全方位的餐饮服务。 我们了解您的需求，我们将提供满足所有最大标准的食品，无论是外观还是口味。</p>
    <p><strong>预订</strong>一张桌子，要求今天的特价或只是给我们发消息：</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="需要多少人" name="People"></p>
      <p><input class="w3-input w3-padding-16 w3-border" type="datetime-local" placeholder="日期和时间" required name="date" value="2017-11-16T20:00 "></p>
      <p><input class="w3-input w3-padding-16 w3-border" type="text" placeholder="消息\特殊要求" required name="Message"></p>
      <p><button class="w3-button w3-black" type="submit">发送消息</button></p>
    </form>
  </div>
</div>

</div>

<footer class="w3-center w3-light-grey w3-padding-48 w3-large">
  <p>Powered by <a href="https://www.cainiaomax.com/w3css/default.asp" title="W3.CSS" target="_blank" class="w3-hover-text-green">w3.css</a></p>
</footer>

</body>
</html>

报个问题: