Web大学生网页作业成品——美食餐饮网站设计与实现(HTML+CSS+JavaScript)
原创
©著作权归作者所有：来自51CTO博客作者html网页设计的原创作品，请联系作者获取转载授权，否则将追究法律责任
👨🎓静态网站的编写主要是用HTML DIV+CSS JS等来完成页面的排版设计👩🎓,常用的网页设计软件有Dreamweaver、EditPlus、HBuilderX、VScode 、Webstorm、Animate等等，用的最多的还是DW，当然不同软件写出的前端Html5代码都是一致的，本网页适合修改成为各种类型的产品展示网页，比如美食、旅游、摄影、电影、音乐等等多种主题，希望对大家有所帮助。
文章目录📂
- 一、网站题目👨🎓
- 二、网站描述✍️
- 三、网站介绍📚
- 四、网站效果🌐
- 五、代码实现 🪓
- HTML结构代码🧱
- CSS样式代码💒
一、网站题目👨🎓
🥧 美食网页介绍、🍰甜品蛋糕、🦐地方美食小吃文化、🍺餐饮文化、等网站的设计与制作。
二、网站描述✍️
🍧美食主题网站 主要对各种美食进行展示，让浏览者清晰地了解到各种美食的详细信息，便于浏览者进行选择。该模块的左侧有个美食分类，用户可以选择自己喜欢的种类，当点击种类后，就会在右侧出现该分类下的各种美食，用户可以点击自己感兴趣的食品，从而看到它的具体信息。它的具体信息包括配料、产地及它的一些功能，使用户对该食品有着全面的认识。
三、网站介绍📚
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。
📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。
📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。
📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
📙网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
其中：
（1）📜html文件包含：其中index.html是首页、其他html为二级页面；
（2）📑 css文件包含：css全部页面样式,文字滚动, 图片放大等；
（3）📄 js文件包含：js实现动态轮播特效, 表单提交, 点击事件等等（个别网页中运用到js代码）。
四、网站效果🌐
五、代码实现 🪓
HTML结构代码🧱
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>不急蛋糕</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="swiper/swiper.min.css">
</head>
<body id="index">
<div class="header">
<div id="headerCen">
<div id="logo"><img src="images/logo.jpg"></div>
<div class="headerTop">
<div id="notice">
<div class="notice">
<span>2017年1月27日除夕夜，不急蛋糕配送及400客服时间最晚至18：00，次日恢复正常服务，敬请谅解。不急2017年1月27日除夕夜，不急蛋糕配送及400客服时间最晚至18：00，次日恢复正常服务，敬请谅解。不急</span>
</div>
</div>
<ul id="ures">
<li><a href="#">登录</a> <span></span></li>
<li><a href="#">注册</a> <span></span></li>
<li><a href="#">订单</a> <span></span></li>
<li><img src="images/shou_car.png"></li>
</ul>
</div>
<!-- <div id="claer"></div> -->
<ul class="headerBut">
<li class="hover"><a href="#">首页</a></li>
<li><a href="about.html">蛋糕家谱</a></li>
<li><a href="tale.html">不急物语</a></li>
<li><a href="#">最新活动</a></li>
<li><a href="love.html">因为爱情</a></li>
<span><img src="images/shou_dinahua.png"><a href="#"> 4006 666 666（服务时间：8:30-22:30）</a></span>
</ul>
</div>
</div>
<!-- header -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="images/bnner.jpg" alt=""></div>
<div class="swiper-slide"><img src="images/bnner.jpg" alt=""></div>
</div>
<div class="swiper-pagination"></div>
</div>
<!-- swiper -->
<div class="content">
<div id="content">
<h2><img src="images/shou_nr1.png"></h2>
<ul class="contentMenu">
<li>
<img src="images/shou_n1.jpg" class="pro">
<div class="menuOpen">
<div class="menu_l">
<p>6寸/227RMB</p>
<span>甜度:</span>
<img src="images/tian_du.png">
<img src="images/tian_du.png">
<img src="images/tian_du.png">
</div>
<div class="mune_r"><img src="images/shou_car.png"></div>
</div>
<div class="menuBut">
<p>香柠马斯卡邦</p>
<p>Lemon mascarpone cake</p>
</div>
</li>
<li>
<img src="images/shou_n2.jpg" class="pro">
<div class="menuOpen">
<div class="menu_l">
<p>6寸/227RMB</p>
<span>甜度:</span>
<img src="images/tian_du.png">
<img src="images/tian_du.png">
<img src="images/tian_du.png">
</div>
<div class="mune_r"><img src="images/shou_car.png"></div>
</div>
<div class="menuBut">
<p>香柠马斯卡邦</p>
<p>Lemon mascarpone cake</p>
</div>
</li>
<i>< 4 ></i>
.试吃结束，我们期待您宝贵的反馈意见。
</p>
</div>
</div>
<ul class="intr">
<li>
<img src="images/xiangqing.jpg" alt="heihei">
<span>查看详情<i><img src="images/xiangqing_logo.png"></i></span>
</li>
<li>
<img src="images/xiangqing.jpg" alt="heihei">
<span>查看详情<i><img src="images/xiangqing_logo.png"></i></span>
</li>
<li>
<img src="images/xiangqing.jpg" alt="heihei">
<span>查看详情<i><img src="images/xiangqing_logo.png"></i></span>
</li>
</ul>
<ul class="serve">
<li>
<img src="images/b_1.png">
<span>全年无休<br>送货上门</span>
</li>
<li>
<img src="images/b_2.png">
<span>专业挑选<br>品质认证</span>
</li>
<li>
<img src="images/b_3.png">
<span>安全配送<br>专人专区</span>
</li>
<li>
<img src="images/b_4.png">
<span>专业客服<br>贴心服务</span>
</li>
</ul>
</div>
<!-- content -->
<div class="footerTop">
<div id="footerTop">
<div class="footerL">
<img src="images/weixin.jpg">
<p>微信订购流程<br>
<span>
关注微信公众号－点击［微信订购］ - ［蛋糕预定］<br>
- 选择蛋糕磅数［立即购买］ - 点击［去结算］<br>
- 确认订单信息 - 选择［支付方式］<br>
- 输入优惠券密码 - 提交订单
</span>
</p>
</div>
<div class="footerR">
<p class="footerR_l">苏州范围内免费配送<br>
<span>
[ 订购专线 ] 4006 666 666（服务时间：8:30-22:30）<br>
[ 客服邮箱 ] sales@cake.com<br>
[ 公司地址 ] 江苏省苏州市姑苏区花莲路30号
</span>
</p>
<div class="footerR_r">
<p>官网动态</p>
<img src="images/xinlang.png"><br>
<img src="images/small_weiixn.png">
</div>
</div>
</div>
</div>
<div class="footer">
<div id="footer">
<p>版权所有 © 2016-2022公司:苏州凯客电子商务有限公司 苏ICP备14323234号</p>
</div>
</div>
</body>
</html>
<script src="js/jquery-1.7.2.js"></script>
<script src="swiper/swiper.min.js"></script>
<script src="js/js.js"></script>
CSS样式代码💒
*{
margin: 0;
padding: 0;
}
a{
text-decoration: none;
}
ul,li{
list-style: none;
}
#clear{
clear: both;
}
.header{
width: 100%;
height: 80px;
background: #fff;
position: relative;
}
#headerCen{
width: 1100px;
margin: 0 auto;
height: 100%;
}
#logo{
padding: 12px 0;
float: left;
width: 196px;
height: 57px;
cursor: pointer;
}
.headerTop{
height: 38px;
float: left;
width: 904px;
border-bottom: 1px dashed #e8d7cb;
line-height: 38px;
}
#notice{
width: 686px;
height: 100%;
overflow: hidden;
position: relative;
float: left;
}
.notice{
width: 200%;
height: 100%;
color: red;
font-size: 12px;
position: absolute;
left: 0;
top: 0;
}
#ures{
width: 184px;
height: 100%;
float: left;
margin-left: 20px;
}
#ures
