披薩餐廳
如何建立網頁
如何建立完全響應式的網頁，使其在所有裝置（桌面、筆記本、平板電腦和手機）上都能美觀顯示
建立骨架
開放時間：上午10點至下午12點
thin
CRUST PIZZA
CRUST PIZZA
示例
<!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.tw/w3css/4/w3.css">
<script src="https://w3schools.tw/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>脆皮披薩</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>Formaggio</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>Meat Town</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>
新增關於
關於
The Pizza Restaurant 由 Italiano 先生於 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.
主廚？ Italiano 先生本人 
我們為我們的室內設計感到自豪。
營業時間
週一和週二 休息
週三 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>The Pizza Restaurant 由 Italiano 先生於 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> Italiano 先生本人
<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">由 w3.css 提供支援</p>
</div>
