HTML5期末大作业
文章目录
HTML5期末大作业一、作品展示二、文件目录三、代码实现四、获取更多源码一、作品展示
二、文件目录
三、代码实现
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>XXX蛋糕</title><link rel="stylesheet" type="text/css" href="css/style.css"><link rel="stylesheet" href="css/swiper.min.css"></head><body id="index"><div class="header"><div id="headerCen"><div id="logo"><img src="picture/logo.jpg"></div><div class="headerTop"><div id="notice"><div class="notice"><span>1月27日除夕夜，XXX蛋糕配送及400客服时间最晚至18：00，次日恢复正常服务，敬请谅解。XXX1月27日除夕夜，XXX蛋糕配送及400客服时间最晚至18：00，次日恢复正常服务，敬请谅解。XXX</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="picture/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">XXX物语</a></li><li><a href="#">最新活动</a></li><li><a href="love.html">因为爱情</a></li><span><img src="picture/shou_dinahua.png"><a href="#"> XXX（服务时间：8:30-22:30）</a></span></ul></div></div><!-- header --><div class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide"><img src="picture/bnner.jpg" alt=""></div><div class="swiper-slide"><img src="picture/bnner.jpg" alt=""></div></div><div class="swiper-pagination"></div></div><!-- swiper --><div class="content"><div id="content"><h2><img src="picture/shou_nr1.png"></h2><ul class="contentMenu"><li><img src="picture/shou_n1.jpg" class="pro"><div class="menuOpen"><div class="menu_l"><p>6寸/227RMB</p><span>甜度:</span><img src="picture/tian_du.png"><img src="picture/tian_du.png"><img src="picture/tian_du.png"></div><div class="mune_r"><img src="picture/shou_car.png"></div></div><div class="menuBut"><p>香柠马斯卡邦</p><p>Lemon mascarpone cake</p></div></li><li><img src="picture/shou_n2.jpg" class="pro"><div class="menuOpen"><div class="menu_l"><p>6寸/227RMB</p><span>甜度:</span><img src="picture/tian_du.png"><img src="picture/tian_du.png"><img src="picture/tian_du.png"></div><div class="mune_r"><img src="picture/shou_car.png"></div></div><div class="menuBut"><p>香柠马斯卡邦</p><p>Lemon mascarpone cake</p></div></li><li><img src="picture/shou_n3.jpg" class="pro"><div class="menuOpen"><div class="menu_l"><p>6寸/227RMB</p><span>甜度:</span><img src="picture/tian_du.png"><img src="picture/tian_du.png"><img src="picture/tian_du.png"></div><div class="mune_r"><img src="picture/shou_car.png"></div></div><div class="menuBut"><p>香柠马斯卡邦</p><p>Lemon mascarpone cake</p></div></li><li><img src="picture/shou_n4.jpg" class="pro"><div class="menuOpen"><div class="menu_l"><p>6寸/227RMB</p><span>甜度:</span><img src="picture/tian_du.png"><img src="picture/tian_du.png"><img src="picture/tian_du.png"></div><div class="mune_r"><img src="picture/shou_car.png"></div></div><div class="menuBut"><p>香柠马斯卡邦</p><p>Lemon mascarpone cake</p></div></li><li><img src="picture/shou_n5.jpg" class="pro"><div class="menuOpen"><div class="menu_l"><p>6寸/227RMB</p><span>甜度:</span><img src="picture/tian_du.png"><img src="picture/tian_du.png"><img src="picture/tian_du.png"></div><div class="mune_r"><img src="picture/shou_car.png"></div></div><div class="menuBut"><p>香柠马斯卡邦</p><p>Lemon mascarpone cake</p></div></li><li><img src="picture/shou_n6.jpg" class="pro"><div class="menuOpen"><div class="menu_l"><p>6寸/227RMB</p><span>甜度:</span><img src="picture/tian_du.png"><img src="picture/tian_du.png"><img src="picture/tian_du.png"></div><div class="mune_r"><img src="picture/shou_car.png"></div></div><div class="menuBut"><p>香柠马斯卡邦</p><p>Lemon mascarpone cake</p></div></li><li><img src="picture/shou_n7.jpg" class="pro"><div class="menuOpen"><div class="menu_l"><p>6寸/227RMB</p><span>甜度:</span><img src="picture/tian_du.png"><img src="picture/tian_du.png"><img src="picture/tian_du.png"></div><div class="mune_r"><img src="picture/shou_car.png"></div></div><div class="menuBut"><p>香柠马斯卡邦</p><p>Lemon mascarpone cake</p></div></li><li><img src="picture/shou_n8.jpg" class="pro"><div class="menuOpen"><div class="menu_l"><p>6寸/227RMB</p><span>甜度:</span><img src="picture/tian_du.png"><img src="picture/tian_du.png"><img src="picture/tian_du.png"></div><div class="mune_r"><img src="picture/shou_car.png"></div></div><div class="menuBut"><p>香柠马斯卡邦</p><p>Lemon mascarpone cake</p></div></li><li><img src="picture/shou_n9.jpg" class="pro"><div class="menuOpen"><div class="menu_l"><p>6寸/227RMB</p><span>甜度:</span><img src="picture/tian_du.png"><img src="picture/tian_du.png"><img src="picture/tian_du.png"></div><div class="mune_r"><img src="picture/shou_car.png"></div></div><div class="menuBut"><p>香柠马斯卡邦</p><p>Lemon mascarpone cake</p></div></li><li><img src="picture/shou_n10.jpg" class="pro"><div class="menuOpen"><div class="menu_l"><p>6寸/227RMB</p><span>甜度:</span><img src="picture/tian_du.png"><img src="picture/tian_du.png"><img src="picture/tian_du.png"></div><div class="mune_r"><img src="picture/shou_car.png"></div></div><div class="menuBut"><p>香柠马斯卡邦</p><p>Lemon mascarpone cake</p></div></li><li><img src="picture/shou_n11.jpg" class="pro"><div class="menuOpen"><div class="menu_l"><p>6寸/227RMB</p><span>甜度:</span><img src="picture/tian_du.png"><img src="picture/tian_du.png"><img src="picture/tian_du.png"></div><div class="mune_r"><img src="picture/shou_car.png"></div></div><div class="menuBut"><p>香柠马斯卡邦</p><p>Lemon mascarpone cake</p></div></li><li><img src="picture/shou_n12.jpg" class="pro"><div class="menuOpen"><div class="menu_l"><p>6寸/227RMB</p><span>甜度:</span><img src="picture/tian_du.png"><img src="picture/tian_du.png"><img src="picture/tian_du.png"></div><div class="mune_r"><img src="picture/shou_car.png"></div></div><div class="menuBut"><p>香柠马斯卡邦</p><p>Lemon mascarpone cake</p></div></li></ul><div id="clear"></div><div class="more"><p>更多美味</p></div></div><!-- list menu --><div id="try"><div class="tryL"><img src="picture/shichi.jpg"></div><ul class="tryR"><li><p>公司名称:</p><input type="text" placeholder="请输入公司名称(*必填)"></li><li><p>企业地址:</p><input type="text" placeholder="请填写企业地址"></li><li><p>试吃人数:</p><input type="text" placeholder="请填写试吃人数"></li><li><p>预约人姓名:</p><input type="text" placeholder="请填写预约人姓名"></li><li><p>联系电话:</p><input type="text" placeholder="请填写联系电话"></li><li class="Xopen"><p>蛋糕品种:</p><input type="text" placeholder="鲜奶系列"><ul class="Xhide"><li>焦糖香草慕斯</li><li>树莓慕斯类</li><li>榴莲芝士</li><li>焦糖香草慕斯</li><li>树莓慕斯类</li><li>榴莲芝士</li><li>焦糖香草慕斯</li><li>树莓慕斯类</li><li>榴莲芝士</li></ul></li><button class="refer">提交申请</button></ul><div id="clear"></div><div class="try_b"><p class="try_bL"><i>< 1 ></i>.企业试吃人数超过3人，可申请试吃。<br><i>< 2 ></i>.申请信息提交后，XXX会统一进行汇总，并电联预约人确认相关信息以便确认是否申请成功</p><p class="try_bR"><i>< 3 ></i>.申请试吃企业需提供一个能容纳5-10人左右的试吃空间。<br><i>< 4 ></i>.试吃结束，我们期待您宝贵的反馈意见。</p></div></div><ul class="intr"><li><img src="picture/xiangqing.jpg" alt="heihei"><span>查看详情<i><img src="picture/xiangqing_logo.png"></i></span></li><li><img src="picture/xiangqing.jpg" alt="heihei"><span>查看详情<i><img src="picture/xiangqing_logo.png"></i></span></li><li><img src="picture/xiangqing.jpg" alt="heihei"><span>查看详情<i><img src="picture/xiangqing_logo.png"></i></span></li></ul><ul class="serve"><li><img src="picture/b_1.png"><span>全年无休<br>送货上门</span></li><li><img src="picture/b_2.png"><span>专业挑选<br>品质认证</span></li><li><img src="picture/b_3.png"><span>安全配送<br>专人专区</span></li><li><img src="picture/b_4.png"><span>专业客服<br>贴心服务</span></li></ul></div><!-- content --><div class="footerTop"><div id="footerTop"><div class="footerL"><img src="picture/weixin.jpg"><p>微信订购流程<br><span>关注微信公众号－点击［微信订购］ - ［蛋糕预定］<br>- 选择蛋糕磅数［立即购买］ - 点击［去结算］<br>- 确认订单信息 - 选择［支付方式］<br>- 输入优惠券密码 - 提交订单</span></p></div><div class="footerR"><p class="footerR_l">苏州范围内免费配送<br><span>[ 订购专线 ] XXX（服务时间：8:30-22:30）<br>[ 客服邮箱 ] XXX<br>[ 公司地址 ] XXX</span></p><div class="footerR_r"><p>官网动态</p><img src="picture/xinlang.png"><br><img src="picture/small_weiixn.png"></div></div></div></div><div class="footer"><div id="footer"><p>版权所有 © -公司:苏州XXX电子商务有限公司 苏ICP备XXX号</p></div></div></body></html><script src="js/jquery-1.7.2.js"></script><script src="js/swiper.min.js"></script><script src="js/js.js"></script>
四、获取更多源码
~ 关注我，点赞博文~ 每天带你涨知识
学生网站模板棕色蛋糕甜品网站设计——棕色蛋糕甜品店(4页) 美食甜品网页制作期末大作业成品_生鲜水果网页设计期末作业
如果觉得《学生网站模板棕色蛋糕甜品网站设计——棕色蛋糕甜品店(4页) 美食甜品网页制作期末大》对你有帮助，请点赞、收藏，并留下你的观点哦！
