Web大学生网页作业成品——美食餐饮网站设计与实现(HTML+CSS+JavaScript)

news2024/12/29 13:20:40

👨‍🎓静态网站的编写主要是用HTML DIV+CSS JS等来完成页面的排版设计👩‍🎓,常用的网页设计软件有Dreamweaver、EditPlus、HBuilderX、VScode 、Webstorm、Animate等等，用的最多的还是DW，当然不同软件写出的前端Html5代码都是一致的，本网页适合修改成为各种类型的产品展示网页，比如美食、旅游、摄影、电影、音乐等等多种主题，希望对大家有所帮助。

🎀 精彩专栏推荐👇🏻👇🏻👇🏻

🧡 【作者主页——🔥获取更多优质源码】
🧡 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】

文章目录📂

  • 一、网站题目👨‍🎓
  • 二、网站描述✍️
  • 三、网站介绍📚
  • 四、网站效果🌐
  • 五、代码实现 🪓
    • 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

八、更多干货🎁

1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！

2.💗【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！

3.以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻🔥
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/77068.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

java SpringMVC 之 表现层与前端数据传输 SSM整合 异步处理前后台处理联调 拦截器

java SpringMVC 之 表现层与前端数据传输 SSM整合 异步处理前后台处理联调 拦截器

SSM整合 项目结构配置搭建 pom的依赖&#xff1a; <dependencies><dependency><groupId>junit</groupId><artifactId>junit</artifactId><version>3.8.1</version><scope>test</scope></dependency><de…
阅读更多...
如何使用 Python 实现彩票自由（双色球）

如何使用 Python 实现彩票自由（双色球）

福彩双色球也是购买次数最多的彩种之一&#xff0c;相比大乐透&#xff0c;双色球更容易中小奖 下面将介绍 Python 实习双色球彩票自由的流程 1. 随机一注 福彩双色球一注同样包含 7 个数字&#xff0c;包含 6 个红球和 1 个篮球 其中 红球是从 1 - 33 中选择 6 个不同的数…
阅读更多...
【Keras+计算机视觉+Tensorflow】生成对抗神经网络中DCGAN、CycleGAN网络的讲解（图文解释 超详细）

【Keras+计算机视觉+Tensorflow】生成对抗神经网络中DCGAN、CycleGAN网络的讲解（图文解释 超详细）

觉得有帮助麻烦点赞关注收藏~~~ 一、生成对抗网络简介 生成对抗网络(GANs&#xff0c;Generative Adversarial Nets),由Ian Goodfellow在2014年提出的,是当今计算机科学中最有趣的概念之一。GAN最早提出是为了弥补真实数据的不足&#xff0c;生成高质量的人工数据。GAN的主要思…
阅读更多...
数据宝藏“淘金热”，腾讯云大数据愿做“卖铲人”

数据宝藏“淘金热”，腾讯云大数据愿做“卖铲人”

‍‍数据智能产业创新服务媒体——聚焦数智 改变商业大数据产业作为数字化时代的基础设施之一&#xff0c;正在成为新时代经济发展的重要动能之一。11月30日&#xff0c;在2022腾讯全球数字生态大会大数据专场上&#xff0c;腾讯云大数据重磅发布了两款具有高频应用场景的产品…
阅读更多...
晶品特装科创板上市：市值68亿 主打地面无人装备研发与产销

晶品特装科创板上市：市值68亿 主打地面无人装备研发与产销

雷递网 雷建平 12月9日北京晶品特装科技股份有限公司&#xff08;简称&#xff1a;“晶品特装”&#xff0c;证券代码&#xff1a;688084&#xff09;昨日在科创板上市。晶品特装本次发行1900万股&#xff0c;发行价为60.98元&#xff0c;募资总额11.59亿元。晶品特装昨日收盘价…
阅读更多...
R语言从经济时间序列中用HP滤波器，小波滤波和经验模态分解等提取周期性成分分析

R语言从经济时间序列中用HP滤波器，小波滤波和经验模态分解等提取周期性成分分析

经济时间序列的分析通常需要提取其周期性成分。最近我们被客户要求撰写关于经济时间序列的研究报告&#xff0c;包括一些图形和统计输出。这篇文章介绍了一些方法&#xff0c;可用于将时间序列分解为它们的不同部分。它基于《宏观经济学手册》中Stock和Watson&#xff08;1999&…
阅读更多...
TypeScript和JavaScript的区别,全面解读超详细（二）

TypeScript和JavaScript的区别,全面解读超详细（二）

了解基础篇&#xff1a;请跳转 3.4.3 TS的编译 点击跳转 TypeScript和JavaScript的区别,全面解读超详细 我们知道.js的文件可以直接在浏览器中运行的&#xff0c;而.ts或者.tsx却不行&#xff0c;所以我们在运行TS项目时需要编译成浏览器引擎可以识别的JS语言。同时为了提高编…
阅读更多...
体验最近火爆的ChatGPT

体验最近火爆的ChatGPT

体验最近火爆的ChatGPT演示前言体验1. 回答问题2. 写方案、写作3. 写代码4. 各种古怪刁钻问题回答国内用户如何注册ChatGPT账号并在线体验如果不能在官网体验&#xff0c;可以在我的网站上体验演示 体验最近火爆的ChatGPT 前言 前几天OpenAI公布了ChatGPT算是火爆朋友圈&…
阅读更多...
基于Java+Swing+mysql图书管理系统

基于Java+Swing+mysql图书管理系统

基于JavaSwingmysql图书管理系统一、系统介绍二、功能展示1.用户登陆2.系统主页3.图书查询4.图书添加5.图书修改6.图书删除7.办理借书8.办理还书9.历史查询10.用户查询、删除&#xff08;管理员&#xff09;三、数据库四、其它1.其他系统实现一、系统介绍 该系统实现了 用户: …
阅读更多...
基于多目标灰狼算法的冷热电联供型微网低碳经济调度附Matlab代码

基于多目标灰狼算法的冷热电联供型微网低碳经济调度附Matlab代码

✅作者简介&#xff1a;热爱科研的Matlab仿真开发者&#xff0c;修心和技术同步精进&#xff0c;matlab项目合作可私信。 &#x1f34e;个人主页&#xff1a;Matlab科研工作室 &#x1f34a;个人信条&#xff1a;格物致知。 更多Matlab仿真内容点击&#x1f447; 智能优化算法 …
阅读更多...
天翼物联获2022年移动物联网“先进企业”

天翼物联获2022年移动物联网“先进企业”

近日&#xff0c;由工信部指导、中国信通院等单位主办的“首届移动物联网大会”在无锡圆满落幕。天翼物联获2022年移动物联网“先进企业”奖。 今年&#xff0c;我国移动物联网终端用户16.98亿户&#xff0c;超越移动电话16.78亿用户数&#xff0c;正式进入“物超人”时代&…
阅读更多...
C++-变量

C++-变量

目录定义变量使用变量全局变量与局部变量作用域和生存期存储类typedefconst符号常量C11的变量初始化列表定义变量 1、存储类 类型名 变量名<初值表达式> 2、存储类 auto,register,static,extern 3、类型名 数据类型&#xff0c;自己定义的或系统存在的 4、变量名 用户自…
阅读更多...
[carla] carla-ros-bridge 修改信号灯行为。

[carla] carla-ros-bridge 修改信号灯行为。

本教程适用于采用编译下载安装方式安装carla-ros-bridge 的用户。 1.修改信号灯 1.1 修改原理 我们要通过API过滤出所有绿灯的actor信息&#xff0c;然后修改他们的状态为常绿。 查阅API网站可知traffic_light具有set_state&#xff08;self,state&#xff09;方法 https:/…
阅读更多...
说一说刚拿下BIRTV推荐的中国8K摄像机新品

说一说刚拿下BIRTV推荐的中国8K摄像机新品

“从边缘走向中心&#xff0c;从跟随逐渐引领&#xff0c;变化已经在发生。” —————————————————————————————————————————— 2022年发生了很多事情&#xff0c;但有一件事&#xff0c;无可比拟&#xff0c;那就是冬奥。 2022北京…
阅读更多...
ADI Blackfin DSP处理器-BF533的开发详解16：KEY按键的实现（含源代码）

ADI Blackfin DSP处理器-BF533的开发详解16：KEY按键的实现（含源代码）

硬件准备 ADSP-EDU-BF533&#xff1a;BF533开发板 AD-HP530ICE&#xff1a;ADI DSP仿真器 软件准备 Visual DSP软件 硬件链接 实现原理 ADSP-EDU-BF53x 开发板上的按键连接到了 CPLD&#xff0c;通过 CPLD 将按键信号与 EBIU 总线和中断管脚 PF0 连接&#xff0c;并将中断…
阅读更多...
Python做曲线拟合（一元多项式拟合及任意函数拟合）

Python做曲线拟合（一元多项式拟合及任意函数拟合）

目录 1. 一元多项式拟合 使用方法 np.polyfit&#xff08;x, y, deg&#xff09; 2. 任意函数拟合 使用 curve_fit() 方法 实例&#xff1a; &#xff08;1&#xff09;初始化 x 和 y 数据集 &#xff08;2&#xff09;建立自定义函数 &#xff08;3&#xff09;使用自…
阅读更多...
数字滤波算法 在数字信号处理应用中使用微控制器

数字滤波算法 在数字信号处理应用中使用微控制器

提示&#xff1a;数字滤波算法 在数字信号处理应用中使用微控制器 文章目录1.介绍1.1. 关键点2. 数字FIR滤波器2.1. 数字滤波器算法2.1.1. IIR滤波器算法2.1.2. FIR滤波器算法2.2. C8051F12x和C8051F36x的FIR算法实现2.2.1. 实施优化2.2.2. FIR滤波器示例2.3. 运行FIR演示2.3.1…
阅读更多...
ML.NET 奇异谱分析（SSA Singular spectrum analysis）预测实践

ML.NET 奇异谱分析（SSA Singular spectrum analysis）预测实践

一、奇异谱分析(Singular Spectrum Analysis, SSA) 简介 奇异谱分析(Singular Spectrum Analysis, SSA)是一种处理非线性时间序列数据的方法&#xff0c;通过对所要研究的时间序列的轨迹矩阵进行分解、重构等操作&#xff0c;提取出时间序列中的不同成分序列(长期趋势&#xff…
阅读更多...
Linux命令_ps 进程管理

Linux命令_ps 进程管理

简介 ps通过读取 /proc 中的虚拟文件来工作&#xff0c;不需要 setuid kmem 或有任何特权来运行。 CPU使用率目前表示为进程整个生命周期中运行所花费时间的百分比。这是不理想的&#xff0c;它不符合ps在其他方面所符合的标准。CPU使用率加起来不太可能达到100%。 SIZE和RSS字…
阅读更多...
ORB-SLAM2 ---- ORBmatcher::SearchForInitialization函数

ORB-SLAM2 ---- ORBmatcher::SearchForInitialization函数

目录 1.函数作用 2.执行流程 3.函数参数解析 4.code 5.函数解析 5.1 旋转直方图的构建与作用 5.2 遍历帧1中的特征点在帧2中找出候选匹配特征点 5.3 第一层筛选 -- 阈值、最优/次优比例、重复匹配 5.4 第二层筛选 -- 旋转直方图 5.5 final 将最后通过筛选的匹…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023