美食餐飲
如何建立網頁
如何建立完全響應式的網頁，使其在所有裝置（桌面、筆記本、平板電腦和手機）上都能美觀顯示
建立骨架
使用上一章中的相同骨架。
此外，更改預設字型。
示例
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>Catering</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="https://w3schools.tw/w3css/4/w3.css">
<style>
body {font-family:"Times New Roman", serif}
h1,h2,h3,h4,h5,h6 {font-family:serif; letter-spacing:5px}
</style>
<body>
<!-- 開始內容 -->
<div id="home" class="w3-content">
<!-- 圖片 -->
<img src="img_hamburger.jpg" alt="Catering" style="width:100%">
<!-- 結束內容 -->
</div>
</body>
</html>
新增導航
示例
<!-- 導航（位於頂部） -->
<div class="w3-top w3-bar w3-white w3-padding w3-card w3-wide">
<a href="#home" class="w3-bar-item w3-button">Gourmet au Catering</a>
<!-- 右側導航欄連結。在小螢幕上隱藏它們 -->
<div class="w3-right w3-hide-small">
<a href="#about" class="w3-bar-item w3-button">關於</a>
<a href="#menu" class="w3-bar-item w3-button">選單</a>
<a href="#contact" class="w3-bar-item w3-button">聯絡</a>
</div>
</div>
將標題包裹在圖片中
示例
<!-- 顯示容器中的圖片 -->
<div class=" w3-padding-top-48">
<div class="w3-display-container">
<img src="img_hamburger.jpg" alt="Catering" style="width:100%">
<div class="w3-display-bottomleft w3-padding-small w3-opacity w3-hide-small">
<h2>Le Catering</h2>
</div>
</div>
</div>
新增關於
關於 Catering
始於 1889 年
Catering 公司於 blabla 年由 Smith 先生創立，位於 lorem ipsum dolor sit amet, consectetur adipiscing elit consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。
示例
<!-- 關於 -->
<div id="about" class="w3-padding-top-64">
<div class="w3-row">
<div class="w3-half w3-padding-large w3-hide-small">
<img src="img_tablesetting2.jpg" class="w3-round w3-image w3-opacity-min" alt="Table" style="width:100%">
</div>
<div class="w3-half w3-padding-large">
<h1 class="w3-center">關於 Catering</h1><br>
<h5 class="w3-center">始於 1889 年</h5>
<p class="w3-large">
Catering 公司於 blabla 年由 Smith 先生創立，位於 lorem ipsum dolor sit amet, consectetur adipiscing elit consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。</p>
<p class="w3-large w3-text-grey w3-hide-medium">
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod temporincididunt ut labore et dolore magna aliqua。</p>
</div>
</div>
</div>
新增選單
我們的選單
麵包籃
各種新鮮烘烤的水果麵包和鬆餅 5.50
比利時華夫餅
香草味麵糊，麥芽粉 7.50
炒雞蛋
炒雞蛋，烤紅椒和蒜，配細香蔥 7.50
藍莓煎餅
配糖漿、黃油和大量漿果 8.50
我們為任何規模的活動提供全方位餐飲服務。我們瞭解您的需求，並將為您提供滿足最大標準的食物，無論是在外觀還是口味上。請隨時與我們聯絡。
示例
<!-- 選單 -->
<div id="menu" class="w3-padding-top-64">
<h1 class="w3-center">我們的選單</h1>
<div class="w3-row">
<div class="w3-col l6 m6 w3-padding-large">
<h4>麵包籃</h4>
<p class="w3-text-grey">
各種新鮮烘烤的水果麵包和鬆餅 5.50</p><br>
<h4>比利時華夫餅</h4>
<p class="w3-text-grey">
香草味麵糊，麥芽粉 7.50</p><br>
<h4>炒雞蛋</h4>
<p class="w3-text-grey">
炒雞蛋，烤紅椒和蒜，配細香蔥 7.50</p><br>
<h4>藍莓煎餅</h4>
<p class="w3-text-grey">
配糖漿、黃油和大量漿果 8.50</p>
</div>
<div class="w3-col l6 m6 w3-padding-large">
<img src="img_tablesetting.jpg" class="w3-round w3-image w3-opacity-min" alt="Menu" style="width:100%">
</div>
</div>
<div class="w3-container w3-text-grey">
<p>我們為任何規模的活動提供全方位餐飲服務。我們瞭解您的需求，並將為您提供滿足最大標準的食物，無論是在外觀還是口味上。請隨時與我們聯絡。</p>
</div>
</div>
新增聯絡資訊
聯絡
Catering Service, 42nd Living St, 43043 New York, NY
您也可以透過電話 00553123-2323 或電子郵件 catering@catering.com 與我們聯絡，或在此處傳送訊息給我們
由 w3.css 提供支援
示例
<!-- 聯絡 -->
<div id="contact" class="w3-container">
<h1>聯絡</h1>
<p class="w3-text-blue-grey w3-large">
<b>Catering Service, 42nd Living St, 43043 New York, NY</b></p>
<p>您也可以透過電話 00553123-2323 或電子郵件 catering@catering.com 與我們聯絡，或在此處傳送訊息：</p>
<form action="/action_page.php" target="_blank">
<p><input class="w3-input w3-padding-16" type="text" placeholder="姓名" required name="Name"></p>
<p><input class="w3-input w3-padding-16" type="number" placeholder="多少人" required name="People"></p>
<p><input class="w3-input w3-padding-16" type="datetime-local" placeholder="日期和時間" required name="date" value="2020-11-16T20:00"></p>
<p><input class="w3-input w3-padding-16" type="text" placeholder="訊息 \ 特殊要求" required name="Message"></p>
<p><button class="w3-button w3-light-grey w3-section" type="submit">傳送訊息</button></p>
</form>
<img src="map.jpg" class="w3-image" style="width:100%">
</div>
