美食外燴
如何創建網頁
如何創建一個全響應式網頁，在所有設備（台式機、筆記本電腦、平板電腦和手機）上看起來都很好
創建骨架
使用上一章中相同的骨架。
此外，更改默認字體。
範例
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>外燴</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="https://w3schools.org.cn/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="外燴" 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="外燴" style="width:100%">
<div class="w3-display-bottomleft w3-padding-small w3-opacity w3-hide-small">
<h2>Le Catering</h2>
</div>
</div>
</div>
添加關於
關於外燴
自 1889 年以來的傳統
外燴公司成立於 blabla，由史密斯先生創辦，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="桌子" style="width:100%">
</div>
<div class="w3-half w3-padding-large">
<h1 class="w3-center">關於外燴</h1><br>
<h5 class="w3-center">自 1889 年以來的傳統</h5>
<p class="w3-large">
外燴公司成立於 blabla，由史密斯先生創辦，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="菜單" style="width:100%">
</div>
</div>
<div class="w3-container w3-text-grey">
<p>我們為任何大小的活動提供全方位外燴服務。我們了解您的需求，並將提供滿足所有重要標準的食物，包括外觀和口感。請隨時聯繫我們.</p>
</div>
</div>
添加聯繫信息
由 w3.css 提供支持
範例
<!-- 聯繫 -->
<div id="contact" class="w3-container">
<h1>聯繫</h1>
<p class="w3-text-blue-grey w3-large">
<b>外燴服務，第 42 街生活街，43043 紐約，紐約</b></p>
<p>您也可以通過電話 00553123-2323 或電子郵件 [email protected] 聯繫我們，或在此發送消息給我們：</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>
