使用 HTML 和 CSS 设计响应式餐厅网站

响应式餐厅网站不仅专注于推广各种菜单和服务，还可以帮助您提供高效的点餐和预订系统解决方案。如果您的餐厅网站设计到位，它将成为顾客预订您餐厅的主要原因之一。

在这里，您将学习如何使用 HTML 和 CSS 从头开始创建一个响应式餐厅网站。

创建餐厅网站的理由

  • 提高知名度 - 它也使潜在客户更容易从互联网上找到您的餐厅。
  • 便利性 - 任何人都可以轻松地查看您的菜单，订购食物或直接从您的网站预订餐桌。
  • 品牌推广 - 网站是一个方便的地方来宣告和展示您独特的餐饮风格和氛围。
  • 客户互动 - 网站允许您与受众分享新闻、优惠和变化。
  • 经济高效 - 网站可能比传统广告更便宜，同时还提供互联网推广的额外优势。

构建餐厅网站的先决条件

要构建一个简单的餐厅网站，您需要 -

  • HTML（超文本标记语言） - 您网站将要创建的框架以及您计划如何安排内容。
  • CSS（层叠样式表） - 用于设置 HTML 元素的样式，以匹配您餐厅的设计。
  • 图片 - 您准备好的食物照片、餐厅和您的徽标，需要发布。
  • 文本内容 - 基本内容包括您的食物清单、联系方式和有关您餐厅的信息。
  • 代码编辑器 - 代码可以在 Visual Studio Code、Sublime Text 等软件中编写。您可以从 HTML 编辑器 列表中选择任何代码编辑器。您还可以使用我们的 在线 HTML 编译器 来运行和调试您的代码。

创建餐厅网站的方法

  • 规划网站布局 - 确定您需要的部分/页面，例如：首页、关于我们、我们的菜单、预订、在线订购和联系我们。
  • 使用 HTML 创建结构 - 要构建每个部分和页面，请使用 HTML 代码创建其表单。放置可以点击的链接，以在需要的地方从页面调出网站的其他部分。
  • 使用 CSS 设计布局 - 在设计时，请使用 CSS 来装饰 HTML 元素。确保使用与餐厅一致的合适的字体类型、配色方案和格式。
  • 首页设置 - 突出您餐厅的优势，添加图片、标语和有限的号召性用语，例如“立即在线获取您的食物”或“预订餐桌”。
  • 关于我们页面 - 讲述您餐厅的故事。有关您业务的基本信息应在您的网站上，包括您的业务成立时间、为什么您的业务有某种类型的食物和饮料菜单以及您餐厅的其他独特功能。
  • 菜单页面 - 例如，这就是为什么您应该创建一个专门用于菜单的单独页面。它可以按类别进行划分，例如开胃菜、晚餐、夜宵和甜点菜单、非酒精饮料和酒精饮料。
  • 预订页面 - 根据此想法，公司应允许客户进行餐桌预订。添加一个页面，客户可以在其中填写他们想要的日期、时间以及他们计划邀请的客人人数。
  • 立即订购页面 - 网站应包含一个订单表单，客户可以通过该表单选择他们的订单，输入送货信息并继续进行订单下单。
  • 联系我们页面 - 包括您餐厅的具体信息，例如餐厅的街道地址、电话号码和营业时间。您还可以包含一个联系页面，在该页面上可以有一个联系表单，用于任何类型的请求。
  • 测试和优化 - 设计完网站后，建议您开发的网站应在不同的网络浏览器和不同的设备上进行测试。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

网站布局：餐厅网站的不同页面

首页

首页应包含吸引人的高质量图片、有关餐厅的简短描述以及引导用户在线订购食物或预订餐桌的 CTA 按钮。


关于我们页面

一个简单且信息丰富的页面，描述餐厅、其目的以及可能在任何其他类似餐厅中找不到的东西。


菜单

在向您的客户展示您的菜单时，请确保您有清晰的菜单项描述、价格和图片。此页面是您宣传您的饭菜和菜肴最重要的页面之一。


预订页面

一个引人入胜且易于填写的表单，客户可以通过该表单预订餐桌。创建后，它应要求提供诸如日期、时间、客人人数、联系信息等信息。


立即订购选项

一个订单表单，用户在其中输入食物选择、其联系方式和送货信息，并在网站上提交订单。


联系我们页面

始终添加一个包含电话号码、电子邮件地址和餐厅地址的联系表单。客户在联系工作人员询问他们可能想到的任何问题时不应遇到任何挑战。


设计响应式餐厅网站的 HTML 和 CSS 代码

以下是设计餐厅网站的源代码（HTML 和 CSS）。

文件：index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VIRAT RESTAURANT</title>
<link rel="stylesheet" href="./CSS/style.css">
</head>
<body>

<!-- Nav Section Start -->
<section class="navBar">
   <div class="topNav">
      <div class="logo">
         <a href="#welcome"><span>VIRAT RESTAURANT</span> Delight</a>
      </div>

      <div class="navItems">
         <a href="#welcome">Home</a>
         <a href="#about">About Us</a>
         <a href="#menu">Menu</a>
         <a href="#reservations">Reservations</a>
      </div>
   </div>
</section>

<!-- Nav Section End -->

<!-- Welcome Section Start -->

<section class="welcome" id="welcome">
   <div class="welcomeMain">
      <div class="welcomeLeft">
         <h1>Experience Fine Dining<br>Indulge in Culinary Excellence<br>With <span>VIRAT RESTAURANT</span> Delight</h1>

         <p>Savor the finest dishes crafted by expert chefs.<br>Experience a world of flavor like never before!</p>
         <button><a href="order.html">Order Now</a></button>
      </div>

      <div class="welcomeRight">
         <img src="./img/Group 8425.png" alt="Delicious Food">
      </div>
   </div>
</section>

<!-- Welcome Section End -->

<!-- About Section Start -->

<section class="about" id="about">

   <div class="aboutMain">
      <div class="aboutLeft">
         <img class="img-responsive" src="./img/Person Image.png" alt="Restaurant Owner">
      </div>

      <div class="aboutRight">
         <h1>About Us</h1>
         <p>Welcome to VIRAT RESTAURANT, where passion meets the plate. Our restaurant is known for delivering unforgettable dining experiences with a menu that celebrates both local and international cuisine. Every dish is made with the finest ingredients to guarantee freshness and flavor.</p>
         <button><a href="contact.html">Contact Us</a></button>
      </div>
   </div>

</section>

<!-- About Section End -->

<!-- Menu Section Start -->

<section class="recipies" id="menu">
   <div class="recipiesMain">
      <div class="recipiesHead">
         <h1 class="text-center">Our Menu</h1>
         <p class="text-center">Explore our selection of signature dishes, designed to delight your taste buds.</p>
      </div>

      <div class="recipieControl">
         <div class="recipiesBox">
            <div class="recBox">
               <img class="img-responsive" src="./img/Project Cover1.jpg" alt="Appetizers">

               <div class="imgDesc">
                  <h2>Appetizers</h2>
                  <p>Start your meal with our delicious appetizers, ranging from light salads to savory bites.</p>
               </div>
            </div>
         </div>

         <div class="recipiesBox">
            <div class="recBox">
               <img class="img-responsive" src="./img/Project Cover.png" alt="Main Course">

               <div class="imgDesc">
                  <h2>Main Course</h2>
                  <p>From steaks to pasta, every main course is prepared to perfection for a fulfilling dining experience.</p>
               </div>
            </div>
         </div>

         <div class="recipiesBox">
            <div class="recBox">
               <img class="img-responsive" src="./img/Project Cover1.jpg" alt="Desserts">

               <div class="imgDesc">
                  <h2>Desserts</h2>
                  <p>Indulge in our selection of homemade desserts, the perfect sweet ending to your meal.</p>
               </div>
            </div>
         </div>
      </div>
   </div>
</section>

<!-- Menu Section End -->

<!-- Status Bar Section Start -->

<section class="statusBar">
   <div class="statusMain">
      <div class="status1">
         <h1>5k+</h1>
         <p>Positive Reviews</p>
      </div>
      <div class="status2">
         <h1>1m</h1>
         <p>Happy Customers</p>
      </div>
      <div class="status3">
         <h1>100+</h1>
         <p>Signature Dishes</p>
      </div>
   </div>
</section>

<!-- Status Bar Section End -->

<!-- Food Section Start -->

<section class="foods" id="reservations">
   <div class="foodsMain">
      <div class="foodsHead">
         <h1 class="text-center">Reserve Your Table</h1>
      </div>

      <div class="foodArea">
         <div class="foodsControl">
            <div class="foodBox">
               <div class="foodContainerBox">
                  <img class="img-responsive" src="./img/Project Cover.png" alt="Pizza">
                  <div class="imgDesc">
                     <h2>Private Dining</h2>
                     <p>Book a table for a more intimate experience with friends and family.</p>
                     <button><a href="https://example.com/reserve.html">Reserve Now</a></button>
                  </div>
               </div>
            </div>

            <div class="foodsControl">
               <div class="foodBox">
                  <div class="foodContainerBox">
                     <img class="img-responsive" src="./img/Project Cover1.jpg" alt="Burger">
                     <div class="imgDesc">
                        <h2>Special Events</h2>
                        <p>Host your next event at Gourmet Delight and make it memorable.</p>
                        <button><a href="https://example.com/reserve.html">Reserve Now</a></button>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</section>

<!-- Food Section End -->

<!-- Footer Section Start -->

<section class="footer">
   <h1 class="text-center"><span>VIRAT RESTAURANT</span> Delight</h1>
   <h3 class="text-center">@CopyRight 2024 | All Rights Reserved</h3>
</section>

<!-- Footer Section End -->

</body>
</html>

文件：orders.htm

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Order Food</title>
<style>
*{
   padding: 0;
   margin: 0;
   box-sizing: border-box;
   font-family: 'Quicksand', sans-serif;
}

body{
   height: 100vh;
   width: 100%;
}

.container{
   position: relative;
   width: 100%;
   height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 20px 10px;
    
}

.contact-box{
   max-width: 850px;
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   justify-content: center;
   align-items: center;
   text-align: center;
   background-color: #fff;
   box-shadow: 0px 0px 19px 5px rgba(0,0,0,0.19);
   border-radius: 2%;
}

.left{
   background:  no-repeat center;
   background-size: cover;
   height: 100%;
}

.right{
   padding: 5px 10px;
}

h2{
   position: relative;
   padding: 0 0 10px;
   margin-bottom: 10px;
}


.field{
   width: 100%;
   border: 2px solid rgba(0, 0, 0, 0);
   outline: none;
   background-color: rgba(230, 230, 230, 0.6);
   padding: 0.5rem 1rem;
   font-size: 1.1rem;
   margin-bottom: 22px;
   transition: .3s;
}

.field:hover{
   background-color: rgba(0, 0, 0, 0.1);
}

textarea{
   min-height: 150px;
}

.btn{
   width: 100%;
   padding: 0.5rem 1rem;
   /* background-color: #2ecc71; */
   color: #fff;
   font-size: 1.1rem;
   border: none;
   outline: green;
   cursor: pointer;
   transition: .3s;
   -webkit-text-stroke: #27ae60 2px;
}

.btn:hover{
   /* border: 2px solid green; */
   background-color: aliceblue;
}

.field:focus{
   border: 2px solid rgba(30,85,250,0.47);
   background-color: #fff;
}
</style>
</head>
<body>
<body>
   <div class="container">
      <div class="contact-box">
         <div class="left"><img src="./img/pizza.jpg" alt="" srcset=""></div>
         <div class="right">
            <h2>Place Your Order</h2>
            <input type="text" class="field" placeholder="Food Id">
            <input type="number" name="" class="field"placeholder="Quantity" id="">
            <input type="text" class="field" placeholder="Your Email">
            <input type="text" class="field" placeholder="Phone">
            <textarea placeholder="Address" class="field"></textarea>
            <button class="btn">Order Now</button>
         </div>
      </div>
   </div>
</body>
</body>
</html>

文件：contact.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Me</title>
<style>
*{
   padding: 0;
   margin: 0;
   box-sizing: border-box;
   font-family: 'Quicksand', sans-serif;
}

body{
   height: 100vh;
   width: 100%;
   background-color: #f4f4f4;
}

.container{
   position: relative;
   width: 100%;
   height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 20px 10px;
}

.contact-box{
   max-width: 850px;
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   justify-content: center;
   align-items: center;
   text-align: center;
   background-color: #fff;
   box-shadow: 0px 0px 19px 5px rgba(0,0,0,0.19);
   border-radius: 2%;
}

.left{
   background: url('./img/contact.png') no-repeat center;
   background-size: cover;
   height: 100%;
}

.right{
   padding: 5px 10px;
}

h2{
   position: relative;
   padding: 0 0 10px;
   margin-bottom: 10px;
}

.field{
   width: 100%;
   border: 2px solid rgba(0, 0, 0, 0);
   outline: none;
   background-color: rgba(230, 230, 230, 0.6);
   padding: 0.5rem 1rem;
   font-size: 1.1rem;
   margin-bottom: 22px;
   transition: .3s;
}

.field:hover{
   background-color: rgba(0, 0, 0, 0.1);
}

textarea{
   min-height: 150px;
}

.btn{
   width: 100%;
   padding: 0.5rem 1rem;
   background-color: #2ecc71;
   color: #fff;
   font-size: 1.1rem;
   border: none;
   cursor: pointer;
   transition: .3s;
}

.btn:hover{
   background-color: #27ae60;
}

.field:focus{
   border: 2px solid rgba(30,85,250,0.47);
   background-color: #fff;
}
</style>
</head>
<body>
   <div class="container">
       <div class="contact-box">
          <div class="left"></div>
          <div class="right">
             <h2>Contact Me</h2>
             <form action="mailto:your-email@example.com" method="POST">
                <input type="text" class="field" placeholder="Your Name" name="name" required>
                <input type="email" class="field" placeholder="Your Email" name="email" required>
                <input type="tel" class="field" placeholder="Phone" name="phone" required>
                <textarea placeholder="Message" class="field" name="message" required></textarea>
                <button class="btn" type="submit">Send</button>
             </form>
          </div>
       </div>
   </div>
</body>
</html>

CSS 文件（style.css）

/* Universal Start */

*{
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   scroll-behavior: smooth;
}

.text-center{
   text-align: center;
}

.secondary{
   color: orange;
}

img-responsive{
   width: 100%;
}

h2{
   font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

p{
   font-family: Verdana, Geneva, Tahoma, sans-serif;
   color: gray;
}

button{
   color: #fff;
   padding: 2.5%;
   background-image: linear-gradient(to right, orange ,rgb(243, 70, 70));
   border-radius: 25px;
   cursor: pointer;
   border: transparent;
}

button:hover{
   background-image: linear-gradient(to left, orange ,rgb(243, 70, 70));
}

button a{
   text-decoration: none;
   color: #fff;
}

/* Universal End*/
/* <!-- -- 
----
------
--------
----------- --> */
/* <!-- Nav Section Start --> */

.navBar{
   position: sticky;
   top: 0;
   background-color: rgba(221, 205, 150, 0.5);
   padding-bottom: 1%;
 }

.topNav{
   display: flex;
   justify-content: space-between;
   padding: 2%;
   height: 10vh;
}

.navBar a{
   text-decoration: none;
   font-weight: 800;
}

.topNav .logo a{
   color: #111;
   font-weight: 900;
   letter-spacing: 0.1em;
   font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.topNav .logo a span{
   color: orange;
}

.topNav .navItems{
   margin-right: 1%;
}

.topNav .navItems a{
   margin-right: 1em;
   color: #111;
}

.topNav .navItems a:hover{
   color: orange;
}

/* <!-- Nav Section End --> */
/* <!-- -- 
----
------
--------
----------- -- !> */
/* Welcome Section Start */

.welcomeMain{
   display: flex;
   /* border: 2px solid; */
   margin: 0 5%;
}

.welcomeMain .welcomeLeft{
   padding-top: 10%; 
   width: 50%;
} 

.welcomeMain .welcomeRight{
   width: 50%;
}

.welcomeMain .welcomeRight img{
   max-width: 100%;
   max-height: 80vh;
} 

.welcomeLeft h1{
   font-size: 2em;
   padding-bottom: 3%;
   letter-spacing: 2px;
   font-weight: 800;
   font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.welcomeLeft h1 span{
   color: orange;
}

.welcomeLeft p{
   color: gray;
   padding-bottom: 7%;
}

/* Welcome Section End */
/* <!-- -- 
----
------
--------
----------- -- !> */
/* About Section Start */

section.about{
   background-image: url('../img/7.png');
   background-repeat: no-repeat;
   /* background-position: center; */
   /* width: 100vw; */
   /* border: 2px solid; */
   background-size: cover;
}

.aboutMain{
   display: flex;
   /* border: 2px solid; */
   margin: 0 5%;
   margin-top: 10%;
}

.aboutMain .aboutLeft{
   width: 50%;
   margin-top: 10%;
}

.aboutMain .aboutRight{
   width: 50%;
   margin-top: 10%;
}

.aboutMain .aboutRight h1{
   padding-bottom: 4%;
}

.aboutMain .aboutRight p{
   padding-bottom: 10%;
}

.aboutMain .aboutLeft img {
   max-width: 100%;
   max-height: 80vh;
   /* width: 100px; */
}

/* About Section End */
/* <!-- -- 
----
------
--------
----------- -- !> */
/* Recipies Section Start */

.recipies{
   margin-top: 5%;
}

.recipieControl{
   display: flex;
}

.recBox{
   /* border: 2px solid; */
   padding: 5%;
   margin: 5%;
   box-shadow:5px 10px 10px 5px rgba(0, 0, 0, 0.1) ;
   border-radius: 4%;
}

.recBox img{
   max-width: 100%;
   margin-bottom: 20%;
}

/* Recipies Section End */
/* <!-- -- 
----
------
--------
----------- -- !> */
/* Status Bar Start */

.statusBar{
   /* border: 2px solid; */
   margin: 4% 2%;
   padding: 3%;
   box-shadow:10px 10px 10px 10px  rgba(0, 0, 0, 0.2) ;
   border-radius: 20px;
}

.statusMain{
   display: flex;
   justify-content: space-between;
}

/* Status Bar End */
/* <!-- -- 
----
------
--------
----------- -- !> */
/* Food Setcion Start */

.foods{
   margin-top: 5%;
}

.foodArea{
   display: flex;
}

.foodBox{
   /* border: 2px solid; */
   padding: 5%;
   margin: 5%;
   box-shadow:5px 10px 10px 5px rgba(0, 0, 0, 0.1) ;
   border-radius: 4%;
   border: 2px solid;
}

.foodBox img{
   max-width: 100%;
}

.imgDesc h2 {
   width: 100%;
   font-size: 20px;
   font-weight: 900;
   padding-bottom: 2%;
}


/* Food Setcion End */
/* footer Start */
section.footer{
   background-color: #111;
   margin-top: 5%;
}

.footer h1 span{
   color: orange;
}

.footer h1{
   color: gray;
   padding-top: 3%;
}

.footer h3{
   color: #fff;
   padding: 2% 0;
}

/* footer end */

输出


更新于： 2024年10月3日

263 次查看

启动您的 职业生涯

通过完成课程获得认证

开始学习
广告