当前位置：网站首页>学生网站模板棕色蛋糕甜品网站设计——棕色蛋糕甜品店(4页) 美食甜品网页制作期末大作业成品_生鲜水果网页设计期末作业
学生网站模板棕色蛋糕甜品网站设计——棕色蛋糕甜品店(4页) 美食甜品网页制作期末大作业成品_生鲜水果网页设计期末作业
2022-06-11 16:06:00 【web前端优质创作者-网页设计】
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>2017年1月27日除夕夜，XXX蛋糕配送及400客服时间最晚至18：00，次日恢复正常服务，敬请谅解。XXX2017年1月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>版权所有 2016-2022公司:苏州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>
四、获取更多源码
~ 关注我，点赞博文~ 每天带你涨知识
边栏推荐
- 推开混合云市场大门，Lenovo xCloud的破局之道
- Opengauss enterprise installation
- WGet command use
- 【剑指Offer】22.链表中倒数第K节点
- CLP information - financial standardization "14th five year plan" highlights data security
- Step 4 of installation in RF: an error is reported when installing the robotframework-selenium 2library
- Nat commun ｜ language model can learn complex molecular distribution
- 项目工作区创建步骤-泽众AR自动化测试工具
- Overview and example analysis of opengauss database performance tuning
- postgresql启动过程
猜你喜欢
postgresql启动过程
High concurrency pseudo sharing and cache line filling (cache line alignment) (@contained)
web网页设计实例作业 ——河南美食介绍(4页) web期末作业设计网页_甜品美食大学生网页设计作业成品
(OJ assignment of Hunan University of science and Technology) problem g: pattern matching of strings
MSDN download win11 method, simple and easy to operate
Using cloud DB to build app quick start - quick application
收藏 |彻底搞懂感受野的含义与计算
Take you in-depth understanding of AGC cloud database
How does the taskbar under the computer display open programs
Zhenxiang, Huawei gives n+1 for voluntary resignation
随机推荐
Yiwenjiaohui your database system tuning
AutoRunner自动化测试工具如何创建项目-Alltesting|泽众云测试
Database design recommendations
Laravel listening mode
laravel8 实现签到功能案例
How the autorunner automated test tool creates a project -alltesting | Zezhong cloud test
搜索与图论：Dijkstra求最短路 I—Dijkstra（最短路径）
Laravel 8 realizes database backup through task scheduling
完整的测试流程【杭州多测师】【杭州多测师_王sir】
Opengauss database ODBC environment connection configuration (Windows)
Classmate, have you heard of mot?
[从零开始学习FPGA编程-17]：快速入门篇 - 操作步骤2-5- VerilogHDL硬件描述语言符号系统与程序框架（软件程序员和硬件工程师都能看懂）
Nat Commun｜語言模型可以學習複雜的分子分布
面试经典题目：怎么做的性能测试？【杭州多测师】【杭州多测师_王sir】
Interview high frequency algorithm question --- longest palindrome substring
Deep separable convolution
Elk enterprise log analysis system
减肥期间可以吃肉吗？会胖吗？
问题 AC: 中国象棋中的跳马问题
如何优化 Compose 的性能？通过「底层原理」寻找答案 | 开发者说·DTalk