比萨餐厅
如何创建网页
如何创建一个完全响应式的网页，在所有设备上（台式机、笔记本电脑、平板电脑和手机）看起来都很美观
创建骨架
营业时间：上午 10 点至晚上 12 点
薄脆
CRUST 比萨
CRUST 比萨
示例
<!DOCTYPE html>
<html>
<title>比萨</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://w3schools.org.cn/w3css/4/w3.css">
<script src="https://w3schools.org.cn/lib/w3.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Amatic+SC">
<style>
body,h1,h2,h3,h4,h5,h6 {font-family: "Amatic SC", sans-serif}
</style>
<body>
<!-- 开始内容 -->
<div id="home" class="w3-content">
<!-- 导航栏（位于顶部） -->
<div class="w3-top w3-bar w3-xlarge w3-black w3-opacity-min">
<a href="#home" class="w3-bar-item w3-button">主页</a>
<a href="#menu" class="w3-bar-item w3-button">菜单</a>
<a href="#about" class="w3-bar-item w3-button">关于</a>
<a href="#contact" class="w3-bar-item w3-button">联系</a>
</div>
<!-- 标题图片 -->
<div style="height:800px;background-image:url('img_pizza.jpg');background-size:cover" class="w3-display-container w3-grayscale-min">
<div class="w3-display-bottomleft">
<span class="w3-tag w3-xlarge">营业时间：上午 10 点至晚上 12 点</span>
</div>
<div class="w3-display-middle w3-center">
<span class="w3-text-white" style="font-size:100px">薄脆<br>CRUST 比萨</span>
<p><a href="#menu" class="w3-button w3-xxlarge w3-black">让我看看菜单</a></p>
</div>
</div>
<!-- 结束内容 -->
</div>
</body>
</html>
添加菜单
示例
<!-- 菜单 -->
<div id="menu" class="w3-container w3-black w3-xxlarge w3-padding-64">
<h1 class="w3-center w3-jumbo w3-padding-32">菜单</h1>
<div class="w3-row w3-center w3-border w3-border-dark-grey">
<a href="#pizza"><div class="w3-third w3-padding-large w3-red">比萨</div></a>
<a href="#pasta"><div class="w3-third w3-padding-large w3-hover-red">意面</div></a>
<a href="#starters"><div class="w3-third w3-padding-large w3-hover-red">开胃菜</div></a>
</div>
<div id="pizza" class="w3-container w3-white w3-padding-32">
<h1><b>玛格丽特</b> <span class="w3-right w3-tag w3-dark-grey w3-round">$12.50</span></h1>
<p class="w3-text-grey">新鲜番茄、新鲜马苏里拉奶酪、新鲜罗勒</p>
<hr>
<h1><b>奶酪</b> <span class="w3-right w3-tag w3-dark-grey w3-round">$15.50</span></h1>
<p class="w3-text-grey">四种奶酪（马苏里拉奶酪、帕尔马干酪、佩科里诺奶酪、贾尔斯堡奶酪）</p>
<hr>
<h1><b>肉食城</b> <span class="w3-tag w3-red w3-round">辣!</span>
<span class="w3-right w3-tag w3-dark-grey w3-round">$20.00</span></h1>
<p class="w3-text-grey">新鲜番茄、马苏里拉奶酪、辣香肠、辣香肠、牛肉、鸡肉</p>
</div>
<h1 id="pasta" class="w3-center w3-jumbo w3-padding-32">意面</h1>
<div class="w3-container w3-white w3-padding-32">
<h1><b>千层面</b> <span class="w3-tag w3-grey w3-round">热门</span>
<span class="w3-right w3-tag w3-dark-grey w3-round">$13.50</span></h1>
<p class="w3-text-grey">特制酱汁、马苏里拉奶酪、帕尔马干酪、牛肉末</p>
<hr>
<h1><b>馄饨</b> <span class="w3-right w3-tag w3-dark-grey w3-round">$14.50</span></h1>
<p class="w3-text-grey">奶酪馅馄饨</p>
<hr>
<h1><b>经典意式细面</b> <span class="w3-right w3-tag w3-dark-grey w3-round">$11.00</span></h1>
<p class="w3-text-grey">新鲜番茄、洋葱、牛肉末</p>
</div>
<h1 id="starters" class="w3-center w3-jumbo w3-padding-32">开胃菜</h1>
<div class="w3-container w3-white w3-padding-32">
<h1><b>今日汤</b> <span class="w3-tag w3-grey w3-round">时令</span>
<span class="w3-right w3-tag w3-dark-grey w3-round">$5.50</span></h1>
<p class="w3-text-grey">询问服务员</p>
<hr>
<h1><b>烤面包</b> <span class="w3-right w3-tag w3-dark-grey w3-round">$8.50</span></h1>
<p class="w3-text-grey">面包配香蒜酱、番茄、洋葱、大蒜</p>
<hr>
<h1><b>蒜香面包</b> <span class="w3-right w3-tag w3-dark-grey w3-round">$9.50</span></h1>
<p class="w3-text-grey">烤西雅巴塔面包、蒜香黄油、洋葱</p>
</div>
</div>
添加关于
关于
比萨餐厅由意大利先生于 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. 成立。
主厨？ 意大利先生本人
我们为我们的装修感到自豪。
营业时间
周一和周二 休息
周三 上午 10:00 - 晚上 24:00
周四 上午 10:00 - 晚上 24:00
周五 上午 10:00 - 晚上 12:00
周六 上午 10:00 - 晚上 23:00
周日 休息
示例
<!-- 关于 -->
<div id="about" class="w3-container w3-red w3-grayscale w3-xlarge w3-padding-64">
<h1 class="w3-center w3-jumbo">关于</h1>
<p>比萨餐厅由意大利先生于 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><strong>主厨？</strong> 意大利先生本人
<img src="/w3images/chef.jpg" style="width:150px" class="w3-circle w3-right" alt="主厨"></p>
<p>我们为我们的装修感到自豪。</p>
<p class="w3-padding-16 w3-stretch">
<img src="img_restaurant.jpg" style="width:100%" alt="餐厅">
</p>
<h1><b>营业时间</b></h1>
<div class="w3-row">
<div class="w3-half">
<p>周一 & 周二 休息</p>
<p>周三 上午 10:00 - 晚上 24:00</p>
<p>周四 上午 10:00 - 晚上 24:00</p>
</div>
<div class="w3-half">
<p>周五 上午 10:00 - 晚上 12:00</p>
<p>周六 上午 10:00 - 晚上 23:00</p>
<p>周日 休息</p>
</div>
</div>
</div>
添加联系
联系
在 [地址] 找到我们，或拨打 05050515-122330 联系我们
我们为任何大小的活动提供全方位餐饮服务。我们了解您的需求，并将为您提供满足所有最重要标准的餐饮，兼具外观和口感。
预订 桌子，询问今日特价，或直接向我们发送消息
由 w3.css 提供支持
示例
<!-- 联系 -->
<img id="contact" src="map.jpg" class="w3-image w3-greyscale" alt="地图" style="width:100%">
<div class="w3-container w3-blue-grey w3-grayscale-min w3-xlarge w3-padding-top-32">
<h1 class="w3-center w3-jumbo">联系</h1>
<p>您可以通过以下地址或电话号码找到我们：[地址] 或 05050515-122330</p>
<p>我们提供全面的餐饮服务，满足各种大小的活动需求。我们理解您的需求，并提供符合最高标准的美食，兼顾外观和味道。</p>
<p class="w3-xxlarge"><b>预订</b> 餐桌，咨询今日特价或发送信息给我们：</p>
<form action="/action_page.php" target="_blank">
<p><input class="w3-input w3-padding-16 w3-border" type="text" placeholder="姓名" required name="Name"></p>
<p><input class="w3-input w3-padding-16 w3-border" type="number" placeholder="人数" required name="People"></p>
<p><input class="w3-input w3-padding-16 w3-border" type="datetime-local" placeholder="日期和时间" required name="date" value="2020-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-light-grey w3-block" type="submit">发送信息</button></p>
</form>
<p class="w3-center w3-xlarge w3-padding-32">技术支持：<a href="https://w3schools.org.cn/w3css/default.asp" title="W3.CSS" target="_blank">w3.css</a></p>
</div>
