美食餐饮
如何创建网页
如何创建在所有设备（台式机、笔记本电脑、平板电脑和手机）上看起来都不错的完全响应式网页：
创建骨架
使用与前一章相同的骨架。
另外，更改默认字体。
示例
<!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://www.91xjr.com/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>
<!-- Start Content -->
<div id="home" class="w3-content">
<!-- Image -->
<img src="img_hamburger.jpg" alt="Catering" style="width:100%">
<!-- End Content -->
</div>
</body>
</html>
添加导航
示例
<!-- Navigation (Sits on top) -->
<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>
<!-- Right-sided navbar links. Hide them on small screens -->
<div class="w3-right w3-hide-small">
<a href="#about" class="w3-bar-item w3-button">About</a>
<a href="#menu" class="w3-bar-item w3-button">Menu</a>
<a href="#contact" class="w3-bar-item w3-button">Contact</a>
</div>
</div>
在图片中换行标题
示例
<!-- Image in Display Container -->
<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>
添加关于
关于餐饮
自 1889 年以来的传统
该餐饮公司由 Smith 先生在 blabla 创立，以 lorem ipsum dolor sat amet、consectetur adipiscing elit consectetur adipiscing elit、sed do eiusmod tempor incididunt ut laboure et dolore magna aliqua。
示例
<!-- About -->
<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">About Catering</h1><br>
<h5 class="w3-center">Tradition since 1889</h5>
<p class="w3-large">
The Catering was founded in blabla by Mr. Smith in 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
我们为任何大型或小型活动提供全方位餐饮服务。我们了解您的需求，我们将提供满足您最大标准的食物，无论是外观还是味道。不要犹豫与我们联系。
示例
<!-- Menu -->
<div id="menu" class="w3-padding-top-64">
<h1 class="w3-center">Our Menu</h1>
<div class="w3-row">
<div class="w3-col l6 m6 w3-padding-large">
<h4>Bread Basket</h4>
<p class="w3-text-grey">
Assortment of fresh baked fruit breads and muffins 5.50</p><br>
<h4>Belgian Waffle</h4>
<p class="w3-text-grey">
Vanilla flavored batter with malted flour 7.50</p><br>
<h4>Scrambled eggs</h4>
<p class="w3-text-grey">
Scrambled eggs, roasted red pepper and garlic, with green onions 7.50</p><br>
<h4>Blueberry Pancakes</h4>
<p class="w3-text-grey">
With syrup, butter and lots of berries 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>We offer full-service catering for any event, large or small. We understand your needs and we will cater the food to satisfy the biggerst criteria of them all, both look and taste. Do not hesitate to contact us.</p>
</div>
</div>
添加联系信息
接触
餐饮服务，42nd Living St, 43043 纽约，NY
您也可以通过电话 00553123-2323 或发送电子邮件至 categorical@pregnant.com 联系我们，或在这里给我们留言：
供电w3.css
示例
<!-- Contact -->
<div id="contact" class="w3-container">
<h1>Contact</h1>
<p class="w3-text-blue-grey w3-large">
<b>Catering Service, 42nd Living St, 43043 New York, NY</b></p>
<p>You can also contact us by phone 00553123-2323 or email catering@catering.com, or send us a message here:</p>
<form action="/action_page.html" target="_blank">
<p><input class="w3-input w3-padding-16" type="text" placeholder="Name" required name="Name"></p>
<p><input class="w3-input w3-padding-16" type="number" placeholder="How many people" required name="People"></p>
<p><input class="w3-input w3-padding-16" type="datetime-local" placeholder="Date and time" required name="date" value="2020-11-16T20:00"></p>
<p><input class="w3-input w3-padding-16" type="text" placeholder="Message \ Special requirements" required name="Message"></p>
<p><button class="w3-button w3-light-grey w3-section" type="submit">SEND MESSAGE</button></p>
</form>
<img src="map.jpg" class="w3-image" style="width:100%">
</div>