HTML5期末大作业：餐饮网站设计——餐饮店铺(1页)
一、作品展示
二、文件目录
三、代码实现
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>首页</title>
<link href="css/base.min.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/idangerous.swiper.css">
</head>
<body>
<div id="header">
<div class="header-con">
<a class="logo"><img src="img/logo.png" alt="logo"></a>
<div class="nav">
<a href="javascript:void(0);">私宴介绍</a><a href="javascript:void(0);">解决方案</a><a href="javascript:void(0);">服务项目</a><a href="javascript:void(0);">关于我们</a>
<b>私人宴请</b>
<i>咨询热线：023-62791234</i>
</div>
</div>
</div>
<div class="clear"></div>
<div id="banner">
<div class="banner">
<div class="banner-bg">
<div class="banner-con">
<h1>如需私宴定制请联系</h1>
<div class="line"></div>
<ul>
<li>
<a href="tel:023-62799534">
<div class="banner-img tel"></div>
</a>
<p>电话：023-62799534</p>
</li>
<li class="m-l-r-36">
<div class="banner-img erwei"></div>
<p>微信扫一扫咨询</p>
</li>
<li>
<a href="mailto:jubao@vip.sina.com">
<div class="banner-img email"></div>
</a>
<p>点击发送邮件</p>
</li>
</ul>
</div>
</div>
</div>
</div>
<div id="two">
<div class="two-con">
<h1>私宴介绍</h1>
<div class="line"></div>
<ul class="about">
<li>
<div class="about-img imgone"></div>
<span class="bgo">历史久远 贵族尊享</span>
<p>现在很多人想跳出普通的饭局，来一次超然的吃喝体验，烹制独属自己的美食。其实，美食定制历史久远。太史蛇羹、历家菜、谭家菜、陆文夫在《美食家》中提到的苏州堂子菜，都是世家贵族玩得最高级的私人定制，出现在历史的长河里。</p>
</li>
<li class="m-l-r-80">
<div class="about-img imgtwo"></div>
<span class="bgo">量身打造 私人定制</span>
<p>这是一个崇尚个性的“私”时代，人人都想脱颖而出。每个人都想让自己的生活独一无二。不在意有多奢华，但必须恰当、舒心，我们无法做到真正物质上的私人定制，选择“私人定制”，只是一种新的生活方式。</p>
</li>
<li>
<div class="about-img imgthree"></div>
<span class="bgo">简单有内涵 永远的私人领域</span>
<p>选择一种新的生活方式，是对自己最大的放松，现在，人们不再希望与他人攀比，而是希望与别人不同，不同的体现不仅是私密还是特殊和唯一看似简单的用餐，要吃得最有品位、最有文化、最有内涵及最具传统，永远是私人领域。</p>
</li>
</ul>
</div>
</div>
<div id="three">
<div class="three-con">
<h1>解决方案</h1>
<div class="white-line"></div>
<p>
为您提供私宴定制服务。我们专注于高品质的食材以及精湛的烹饪技艺，蓝带大厨将为您量身定制各类国际化的高端专属私宴，<br> 我们将以在私宴定制方面丰富的经验以及完善的服务，在所有的细节处为您和您的贵宾创造与传统晚宴迥然不同的高尚风格、优雅品位、独特享受。
<br> 我们为您解决以下问题：
</p>
<ul class="plan">
<li>
<div class="plan-img"></div>
<p>商业宴会专属定制</p>
</li>
<li>
<div class="plan-img plan-img1"></div>
<p>生日宴会专属定制</p>
</li>
<li>
<div class="plan-img plan-img2"></div>
<p>婚宴专属定制</p>
</li>
<li>
<div class="plan-img plan-img3"></div>
<p>主题宴专属定制</p>
</li>
<li>
<div class="plan-img plan-img4"></div>
<p>客户回馈宴专属定制</p>
</li>
<li class="last">
<div class="plan-img plan-img5"></div>
<p>纪念派对专属定制</p>
</li>
</ul>
</div>
</div>
<div id="four">
<div class="four-con">
<h1>服务项目</h1>
<div class="line"></div>
<ul class="title-tab">
<li class="active"><span class="icon cs"></span>餐式</li>
<li><span class="icon cd"></span>菜单</li>
<li><span class="icon fw"></span>服务</li>
<li><span class="icon cj"></span>餐具</li>
<li><span class="icon addre"></span>场地</li>
<li class="last"><span class="icon hd"></span>活动</li>
</ul>
<div class="table-con">
<div class="tab-con tab-con1">
<div class="swiper-container swiper-container1">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="cs-con">
<img src="img/cs/cs_1.jpg" width="250">
<div class="cs-z">
<h2>自助餐</h2>
<h3>非正式的西餐宴会</h3>
<p>常见于大型的商务活动中。不预备正餐，由就餐者随意选择就餐食物然后自由的与他人分享美食。</p>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="cs-con">
<img src="img/cs/cs_2.jpg" width="250">
<div class="cs-z">
<h2>定制菜单</h2>
<h3>真正的个性化消费</h3>
<p>“定制”一词就起源于萨维尔街。迎合了人们追求品质和个性的心理，定制才是真正的个性化消费。</p>
</div>
</div>
</div>
</div>
</div>
<a class="arrow-left" href="javascript:void(0);" style="display:none;"><</a>
<a class="arrow-right" href="javascript:void(0);" style="display:none;">></a>
</div>
<div class="tab-con tab-con2">
<div class="swiper-container swiper-container2">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="cs-con">
<img src="img/cd/cd_1.jpg" width="250">
<div class="cs-z">
<h2>中餐</h2>
<h3>“八大菜系”影响深远</h3>
<p>中国风味的餐食菜肴。除了最为出名的八大菜系之外，还有东北菜、冀菜、豫菜、鄂菜、本帮菜、客家菜、赣菜、京菜、清真菜等。</p>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="cs-con">
<img src="img/cd/cd_2.jpg" width="250">
<div class="cs-z">
<h2>西餐</h2>
<h3>西方国家的餐食</h3>
<p>一般使用橄榄油、黄油、亨氏番茄酱、沙拉酱等调味料。不同的主食搭配上一些蔬菜，西餐的准确称呼应为欧洲美食。</p>
</div>
</div>
</div>
</div>
</div>
<a class="arrow-left" href="javascript:void(0);" style="display:none;"><</a>
<a class="arrow-right" href="javascript:void(0);" style="display:none;">></a>
</div>
<div class="tab-con tab-con3">
<div class="swiper-container swiper-container3">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="cs-con">
<img src="img/fw/fw_1.jpg" width="250">
<div class="cs-z">
<h2>中式服务</h2>
<h3>热情周到的服务</h3>
<p>中国式服务讲究的是热情周到，在宴会中你可以清楚的体会到服务主人的身份。</p>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="cs-con">
<img src="img/fw/fw_2.jpg" width="250">
<div class="cs-z">
<h2>法式服务</h2>
<h3>最豪华细密的服务</h3>
<p>法式服务注重服务程序和礼节礼貌，注重服务表演，注重吸引客人的注意力，服务周到每位顾客都能得到充分的照顾。</p>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="cs-con">
<img src="img/fw/fw_3.jpg" width="250">
<div class="cs-z">
<h2>美式服务</h2>
<h3>分享服务 快乐延续</h3>
<p>美国人把服务当成一种无限的快乐，一种无上的荣幸， 一个被服务周到的顾客，会把他的愉快经历分享出去，被分享的人再来享受服务，这就是优质服务的延续作用。</p>
</div>
</div>
</div>
</div>
</div>
<a class="arrow-left" href="javascript:void(0);"><</a>
<a class="arrow-right" href="javascript:void(0);">></a>
</div>
<div class="tab-con tab-con4">
<div class="swiper-container swiper-container4">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="cs-con">
<img src="img/cj/cj_1.jpg" width="250">
<div class="cs-z">
<h2>自备餐具</h2>
<h3>自备餐具使用</h3>
<p>事先和宾迪朗沟通好餐具的准备情况宾迪朗允许顾客自备餐具，省钱放心。</p>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="cs-con">
<img src="img/cj/cj_2.jpg" width="250">
<div class="cs-z">
<h2>购买餐具</h2>
<h3>全新餐具购买</h3>
<p>宾迪朗准备了全新的餐具供顾客购买，省去了您挑选餐具的时间，更为您的宴会保证了最恰当的餐具使用，更能多次使用。</p>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="cs-con">
<img src="img/cj/cj_3.jpg" width="250">
<div class="cs-z">
<h2>租用餐具</h2>
<h3>提供安全卫生的餐具租用</h3>
<p>宾迪朗为您准备了安全卫生的餐具供您租用，让您不用为餐具而烦恼，省心省事。</p>
</div>
</div>
</div>
</div>
</div>
<a class="arrow-left" href="javascript:void(0);"><</a>
<a class="arrow-right" href="javascript:void(0);">></a>
</div>
<div class="tab-con tab-con5">
<div class="swiper-container swiper-container5">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="cs-con">
<img src="img/add/add_1.jpg" width="250">
<div class="cs-z">
<h2>租赁场地</h2>
<h3>租赁最适合您的场地</h3>
<p>我们为顾客选择最适合您的场地，自有场地不适合的情况下，租赁场地供您宴请宾客。</p>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="cs-con">
<img src="img/add/add_2.jpg" width="250">
<div class="cs-z">
<h2>自有场地</h2>
<h3>拥有多类型场地</h3>
<p>我们拥有多类型的场地，能满足大多数顾客的场地需求。</p>
</div>
</div>
</div>
</div>
</div>
<a class="arrow-left" href="javascript:void(0);" style="display:none;"><</a>
<a class="arrow-right" href="javascript:void(0);" style="display:none;">></a>
</div>
<div class="tab-con tab-con6">
<div class="swiper-container swiper-container6">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="cs-con">
<img src="img/hd/hd_1.jpg" width="250">
<div class="cs-z">
<h2>自娱活动</h2>
<h3>宴请亲朋好友</h3>
<p>生日约上朋友小聚，结婚接受亲朋好友的祝福，我们让您的宴会更加丰富多彩刻骨铭心。</p>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="cs-con">
<img src="img/hd/hd_2.jpg" width="250">
<div class="cs-z">
<h2>第三方活动</h2>
<h3>宴请商业伙伴回馈客户</h3>
<p>一个宴请有可能改变很多东西，安排客户一同享用一次愉快的用餐对建立起长久的人际关系有很大的帮助。</p>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="cs-con">
<img src="img/hd/hd_3.jpg" width="250">
<div class="cs-z">
<h2>定制活动</h2>
<h3>专属于您的私人宴请</h3>
<p>专业的定制服务团队为您量身打造专属于您的私人宴会，让你远离那些纷杂的餐厅，专心享受只属于你的欢乐时光，岂不是人生最大乐事？</p>
</div>
</div>
</div>
</div>
</div>
<a class="arrow-left" href="javascript:void(0);"><</a>
<a class="arrow-right" href="javascript:void(0);">></a>
</div>
</div>
</div>
</div>
<div id="five">
<div class="five-con">
<div class="about-con">
<img src="img/about.jpg" width="618">
<div class="about-z">
<h1>关于我们</h1>
<div class="line"></div>
<p>我们为您提供私宴定制服务。我们专注于高品质的食材以及精湛的烹饪技艺顶级大厨将为您量身定制各类国际化的高端专属私宴，为您各种规模的商务宴请、客户回馈、私人特别纪念派对等提供精致以及美味的食物。<br><br>我们将以在私宴定制方面丰富的经验以及完善的服务，在所有的细节处为您和您的贵宾创造与传统晚宴迥然不同的高尚风格、优雅品位、独特享受。
</p>
</div>
</div>
</div>
</div>
<div id="six">
<div class="six-con">
<h1>如需私宴定制请联系</h1>
<div class="line"></div>
<ul>
<li>
<a href="tel:023-62799534">
<div class="banner-img tel"></div>
</a>
<p>电话：023-62799534</p>
</li>
<li class="m-l-r-36">
<div class="banner-img erwei"></div>
<p>微信扫一扫咨询</p>
</li>
<li>
<a href="mailto:jubao@vip.sina.com">
<div class="banner-img email"></div>
</a>
<p>点击发送邮件</p>
</li>
</ul>
</div>
</div>
<div id="footer">私人宴请定制 版权所有 201603041008</div>
</body>
</html>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/idangerous.swiper.min.js" type="text/javascript"></script>
<script src="js/main.min.js" type="text/javascript"></script>
四、获取更多源码
~ 关注我，点赞博文~ 每天带你涨知识
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
