FF03HTML+CSS静态页面网页设计作业——餐饮美食-武昌鱼(8页) HTML+CSS+JavaScript 使用html+css实现一个静态页面（含源码）

最新推荐文章于 2022-11-14 20:37:24 发布
最新推荐文章于 2022-11-14 20:37:24 发布
阅读量216 收藏
点赞数
分类专栏： web大学生个人网站作业模 HTML5期末大作业 html网页设计作业 文章标签： css html javascript 美食 零食
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_524614081/article/details/122398906
版权

HTML5期末大作业：餐饮美食网站设计——餐饮美食-武昌鱼(8页) HTML+CSS+JavaScript 使用html+css实现一个静态页面（含源码）

常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!

作品介绍

1.网页作品简介 ：HTML期末大学生网页设计作业 A+水平 ,喜欢的可以下载，文章页支持手机PC响应式布局。

2.网页作品编辑：作品下载后可使用任意HTML编辑软件（如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++ 等任意HTML软件编辑修改网页）。

3.网页作品技术：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频、 音频元素 、Flash，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。

文章目录

一、作品展示

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

二、文件目录

在这里插入图片描述

三、代码实现

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<title>模板</title>
	<meta name="keyword" content="">
	<meta name="description" content="">
	<meta name="author" content="">
	<link rel="stylesheet" href="css/common.css">
	<link rel="stylesheet" href="css/style.css">
    <script src="js/jquery.min.1.11.3.js"></script>
	<script src="js/SuperSlide.2.1.1.js"></script>
    <script src="js/js.js"></script>
    <link type="text/css" rel="stylesheet" href="css/skitter.styles.css">
	<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">
	<script type="text/javascript" src="js/jquery-1.6.4.js"></script>
	<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
	<script type="text/javascript" src="js/jquery.skitter.min.js"></script>
	<script type="text/javascript" src="js/jquery.haiwon.js"></script>
	<script type="text/javascript" src="js/css.js"></script>
	<script type="text/javascript" src="js/js.js"></script>
<!--[if lt IE 9]>
<script src="js/html5.js"></script>
<![endif]-->
<!--[if IE 6]>
<script src="js/png.js"></script>
<script>
<![endif]-->
</head>
<body>
	<header class="index_header">
		<div class="style">
			<ul class="index_logo">
				<li><a href="about.html">关于我们</a></li>
				<li><a href="fendian.html">门店分布</a></li>
				<li><a href="injon.html">招商加盟</a></li>
				<div><a href=""><img src="images/index_03.png" alt="" title="首页"></a></div>
				<li><a href="">在线商城</a></li>
				<li><a href="zp.html">人才招聘</a></li>
				<li><a href="contact.html">联系我们</a></li>
			</ul>
		</div>
	</header>
	<nav class="index_nav">
		<div style="width:100%;  overflow:hidden; height:633px; position:relative;  z-index:0; ">
		  <div style=" width:1920px; height:633px; position:relative; left:50%; ">
		    <div style="position:relative;width:1920px;height:633px; z-index:1;   left:-50%;">
				<div class="banner box_skitter skitter-default" style="height:633px">
					<ul style="display: none;">
						<li><a target="_blank" href=""><img src="images/index_06.png"></a></li>
						<li><a target="_blank" href=""><img src="images/index_06.png"></a></li>
						<li><a target="_blank" href=""><img src="images/index_06.png"></a></li>
						<li><a target="_blank" href=""><img src="images/index_06.png"></a></li>
					</ul>
					<span class="info_slide_dots" style="left: 926px;">
						<span class="image_number" rel="0" id="image_n_1_0"></span>
						<span class="image_number" rel="1" id="image_n_2_0"></span>
						<span class="image_number" rel="2" id="image_n_3_0"></span>
						<span class="image_number image_number_select" rel="3" id="image_n_4_0"></span>
					</span>
				</div>
			</div>
		</div>
	</div>
	</nav>
	<style type="text/css">
		.poster-main{
			position: absolute;
			top:220px;
			margin-left: 100px;
		}
		.poster-main .poster-list .poster-item{
			border-radius: 50%;
			overflow: hidden;
			position: absolute;
			left: 0;
			top: 0;
		}
		.poster-main .poster-list .poster-item a img{
			border-radius: 50%;
			border:8px solid #fff;
		}
		.poster-main .poster-btn{
			position: absolute;
			top: 0;
			cursor: pointer;
		}
		.poster-main .poster-prev-btn{
			left: -220px;
			background: url("images/btn_l.png") no-repeat center center;
		}
		.poster-main .poster-next-btn{
			right: -220px;
			background: url("images/btn_r.png") no-repeat center center;
		}
	</style>
	<div class="style product">
		<div class="position">
			<span>您所在的位置：首页&gt;</span><a href="">招商加盟</a>
		</div>
		<div class="product_main">
			<section class="join_list">
				<a class="join_list_a" href="injon_show.html"><img src="images/injon_03.png" alt=""></a>
				<dl class="join_list_dl">
					<dt><a href="">市场推广经验与稳健的销售基础</a></dt>
					<dd class="join_list_dd1">2016-11-07</dd>
					<dd class="join_list_dd2">随着消费生活品质和消费意识的不断提高，公司本着让消费者拥有更健康饮食的目标，一直致力于果汁饮品配
方的研究，并开始向草本饮品的配方研究而转变，随着消费者消费观念的更新，国家对食品的严格要求下，我
公司专门聘请了多名专家、教授、进行产品的改革更新。以本草纲目为基础，养生、防病为目的，不使用任何
添加，推出精品系列：“清霏膏”、“秋梨膏”、“无色凉茶”三种高品质的饮品。</dd>
					<dd class="join_list_dd3"><a href="">查看更多&gt;&gt;</a></dd>
				</dl>
				<div class="clear"></div>
			</section>
			<section class="join_list">
				<a class="join_list_a" href="injon_show.html"><img src="images/injon_03.png" alt=""></a>
				<dl class="join_list_dl">
					<dt><a href="">市场推广经验与稳健的销售基础</a></dt>
					<dd class="join_list_dd1">2016-11-07</dd>
					<dd class="join_list_dd2">随着消费生活品质和消费意识的不断提高，公司本着让消费者拥有更健康饮食的目标，一直致力于果汁饮品配
方的研究，并开始向草本饮品的配方研究而转变，随着消费者消费观念的更新，国家对食品的严格要求下，我
公司专门聘请了多名专家、教授、进行产品的改革更新。以本草纲目为基础，养生、防病为目的，不使用任何
添加，推出精品系列：“清霏膏”、“秋梨膏”、“无色凉茶”三种高品质的饮品。</dd>
					<dd class="join_list_dd3"><a href="">查看更多&gt;&gt;</a></dd>
				</dl>
				<div class="clear"></div>
			</section>
			<section class="join_list">
				<a class="join_list_a" href="injon_show.html"><img src="images/injon_03.png" alt=""></a>
				<dl class="join_list_dl">
					<dt><a href="">市场推广经验与稳健的销售基础</a></dt>
					<dd class="join_list_dd1">2016-11-07</dd>
					<dd class="join_list_dd2">随着消费生活品质和消费意识的不断提高，公司本着让消费者拥有更健康饮食的目标，一直致力于果汁饮品配
方的研究，并开始向草本饮品的配方研究而转变，随着消费者消费观念的更新，国家对食品的严格要求下，我
公司专门聘请了多名专家、教授、进行产品的改革更新。以本草纲目为基础，养生、防病为目的，不使用任何
添加，推出精品系列：“清霏膏”、“秋梨膏”、“无色凉茶”三种高品质的饮品。</dd>
					<dd class="join_list_dd3"><a href="">查看更多&gt;&gt;</a></dd>
				</dl>
				<div class="clear"></div>
			</section>
		</div>
		<div class="page">
			<a href="">&lt;&lt;</a>
			<a href="">1</a>
			<a href="">2</a>
			<a href="">3</a>
			<a href="">4</a>
			<a href="">&gt;&gt;</a>
		</div>
	</div>
	<footer class="index_footer">
		<div class="style index_fc">
			<div class="index_fc1">
				友情链接
			</div>
			<div class="index_fc2">
				<ul>
					<li><a href="">新华网湖北频道</a></li>
					<li>|</li>
					<li><a href="">长江网</a></li>
					<li>|</li>
					<li><a href="">福州房产网</a></li>
					<li>|</li>
					<li><a href="">武汉家装</a></li>
					<li>|</li>
					<li><a href="">房地产英才网</a></li>
					<li>|</li>
					<li><a href="">南昌圈圈网</a></li>
					<li>|</li>
					<li><a href="">长江网</a></li>
					<li>|</li>
					<li><a href="">福州房产网</a></li>
					<li>|</li>
					<li><a href="">武汉家装</a></li>
					<li>|</li>
					<li><a href="">福州房产网</a></li>
					<li>|</li>
					<li><a href="">武汉家装</a></li>
					<li>|</li>
					<li><a href="">房地产英才网</a></li>
					<li>|</li>
					<li><a href="">房地产英才网</a></li>
					<div class="clear"></div>
				</ul>
				<div>XXXXXXX商贸发展有限公司 @copy;版权所有</div>
			</div>
			<div class="index_fc3">
				<img src="images/index1_30.png" alt="">
				<span>扫一扫关注</span>
			</div>
		</div>
	</footer>
</body>
</html>

四、获取更多源码

~ 关注我，点赞博文~ 每天带你涨知识!
相关问题可以相互学习，可关注↓公Z号 获取更多源码 !
在这里插入图片描述

五、学习资料

web前端 零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)
适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站
在这里插入图片描述

六、更多源码

HTML5期末考核大作业源码* 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!
在这里插入图片描述

优质内容贡献
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
web前端期末大作业——餐品后台管理系统(html+css+javascript)
HTML网页设计
08-04 2674
🧑‍🎓 学生管理系统网页设计 、OA管理系统、后台管理模板、智能停车系统、等网站的设计与制作。🏷️HTML网页设计，采用DIV+CSS布局，共有多个页面，排版整洁，内容丰富，主题鲜明，首页使用CSS排版比较丰富，色彩鲜明有活力，导航与正文字体分别设置不同字号大小。导航区域设置了背景图。子页面有纯文字页面和图文并茂页面。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新......
HTML5期末大作业：餐饮美食网站设计——餐饮美食-武昌鱼(8页) HTML+CSS+JavaScript 使用html+css实现一个静态页面（含源码）
12-17 1073
HTML5期末大作业：餐饮美食网站设计——餐饮美食-武昌鱼(8页) HTML+CSS+JavaScript 使用html+css实现一个静态页面（含源码） 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计
RainyRoof_Restaurant_Website:用纯HTML，CSS和jQuery构建的餐厅网站。 Omnifood的升级版
05-27
该网站是由纯原始代码编写的：HTML，CSS和JavaScript 您要查看结果吗？ 您是否计划在不久的将来升级此网站？ 我的回答是！ 您也会接受别人的定制吗？ 乐意！
HTML期末大作业——基于HTML+CSS+JavaScript的旅游网站设计与实现
热门推荐
七夕情人节表白网页代码100款 HTML5网页设计与制作1120款 Echarts大屏数据150款
06-23 2万+
HTML期末大作业~基于HTML+CSS+JavaScript的旅游网站设计与实现 HTML期末作业-旅游网页作业HTML+CSS+JavaScript实现，共有登录 首页 预定 套餐 服务 相册 评价 联系我们等页面 旅游网站的页面通常设计得很宽，而且搭配非常有吸引力的图片，目的是为了突出视觉吸引力。今天这篇文章向大家分享最佳旅游网站设计案例，一起欣赏这些精美的网站。 作品演示 1.登录 2.首页 3.预定 4.套餐 5.服务 6.相册 7.评价/联系我们 文件目录 代码实现 头部HTML
HTML期末大作业-仿小米商城官网首页模板(HTML+CSS+JavaScript)
七夕情人节表白网页代码100款 HTML5网页设计与制作1120款 Echarts大屏数据150款
06-21 7212
HTML期末作业作业-仿小米商城官网首页模板(HTML+CSS+JavaScript) 效果演示 小米商城官网首页模板基于HTML+CSS+JavaScript制作，包括导航栏，商品分类菜单等。 文件目录 代码实现 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="sty
HTML+CSS静态页面网页设计作业——餐饮美食-武昌鱼(8页) HTML+CSS+JavaScript 使用html+css实现一个静态页面（含源码）
01-03 503
HTML5期末大作业：餐饮美食网站设计——餐饮美食-武昌鱼(8页) HTML+CSS+JavaScript 使用html+css实现一个静态页面（含源码） 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计
使用html+css+javascript实现一个漂亮、炫酷的表白页面，给出源码
06-03
在这个教程中，我们将探讨如何使用HTML、CSS和JavaScript创建一个美观、动态的表白页面。首先，我们从HTML结构开始。 1. **HTML 结构**： HTML代码提供了一个简单的容器 `.container`，其中包含一个`.heart-bg`...
教育类网站 html+css静态页面.zip
07-30
【教育类网站 html+css静态页面.zip】是一个包含纯HTML和CSS构建的教育类网站的源代码包。这个项目对于初学者来说是一个很好的实践案例，因为它展示了如何利用这两种技术来创建一个具有教育主题的网站布局。以下是这...
HTML+CSS实现渐变风格登录页面(源码)
08-05
在本资源中，我们主要探讨如何使用HTML和CSS来创建一个具有渐变风格的简洁而精美的登录页面。HTML（HyperText Markup Language）是网页内容的结构语言，而CSS（Cascading Style Sheets）则是用于定义这些内容外观和...
十个静态页面展示-练习 HTML-CSS
12-12
在本实践项目中，"十个静态页面展示-练习 HTML-CSS" 是一个为初学者设计的教程，旨在帮助那些刚刚接触前端开发或者对前端技术感兴趣的朋友们掌握基础的 HTML 和 CSS 技能。这个压缩包文件包含了 01-HTML-CSS 这个子...
基于web在线餐饮网站的设计与实现——仿Coco线上订奶茶饮料6个页面(HTML+CSS+JavaScript)
08-10
HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞 蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、游戏、 节日、 戒烟、 电影、 摄影、 文化、 家 乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计作业需求, 喜欢的可以下载! 原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、 Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作） HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部 区域背景色为100%宽度。都是给学生定制的都符合学生考试期末作业的水平,有的有js，有的视频+音乐+flash的等 元素的插入。 【查看更多源码地址】：https://blog.csdn.net/VX_WJ88950106?type=blog
HTML网站源码-美食料理餐厅网页模板-响应式源码.zip
最新发布
03-26
这套HTML源代码文件为您呈现了一个完整的网页模板，适用于各类网站开发需求。它采用了前沿的HTML5和CSS3技术，实现了响应式设计，能够无缝适配各种设备的屏幕尺寸。此外，它还内置了丰富的JavaScript插件，助您轻松实现各种复杂的交互效果。这套源代码文件具有极高的可定制性，您可以根据您的项目需求，对页面布局、颜色和内容进行个性化调整，轻松打造出独具特色的网站。同时，我们的代码结构清晰、注释详细，便于您学习和掌握HTML、CSS和JavaScript等前端技术。无论您是面临课程设计、毕业设计等学术挑战，还是希望在职业发展中展示自己的才华和技能，这套源代码文件都将成为您的得力助手。通过使用这套源代码文件，您将轻松完成网站搭建任务，为您的课程设计或毕业设计增添独特亮点。总之，这套HTML源代码文件是一个高效、实用且易于上手的工具，无论您是专业的网页设计师，还是业余的编程爱好者，都值得一试。
基于html+js+css实现漫天飘爱心的特效.docx
12-29
基于 HTML、JS 和 CSS 实现漫天飘爱心特效的技术要点总结 基于 HTML、JS 和 CSS 实现漫天飘爱心特效是前端开发中常见的一种视觉效果，本文将从技术角度总结该效果的实现要点。 HTML 结构 在 HTML 结构中，我们...
HTML5期末大作业：餐饮饮食网站设计——奶茶(6页) HTML+CSS+JavaScript html大学生网站开发实践作业
七夕情人节表白网页代码100款 HTML5网页设计与制作1120款 Echarts大屏数据150款
10-14 4472
HTML5期末大作业：餐饮饮食网站设计——奶茶(6页) HTML+CSS+JavaScript 期末作业HTML代码 学生网页课程设计期末作业下载 web网页设计制作成品 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大学生
JavaScript-tab栏切换
qq_39111074的博客
09-27 7165
tab栏：点击不同的标签，显示不同的内容，被点击的标签样式发生改变（突出选中的是哪一个） 实现思路： 将tab栏分为上下两部分，上面是导航列表，下面是各部分对应的内容。把标签和内容都写出来，内容按照标签顺序依次顺着写，给标签都添加自定义属性- - -index，属性值从0开始，依次增加1 首先实现上面的效果，点击后样式切换，被点击的字体颜色、背景颜色改变等: ①css定义一个类eg：current，里面定义改变后的样式，先给第一个标签写一个该类名，其他的不写类名， ②js获取所有标签元素对象，- - -f
基于html的美食网站 奶茶网页设计与实现(HTML+CSS+JavaScript)
qq_365392777
10-23 703
????文章目录​​一、????‍????网站题目​​​​二、✍️网站描述​​​​三、????网站介绍​​​​四、????网站效果​​​​五、???? 代码实现​​​​????HTML结构代码​​​​????CSS样式代码​​​​六、???? 如何让学习不再盲目​​​​七、????更多干货​​一、????‍????网站题目???? 美食网页介绍、????甜品蛋糕、????地方美食小吃文化、????餐饮文化、等网站的设...
后台管理系统前端模板（html + CSS + JavaScript）
最爱喝椰奶
06-30 1万+
一个基于 vue 和 Layui 的控制面板 UI 框架，模板包含后台管理系统的常用页面。大家在开发时可以直接套用，非常方便。
Web前端开发技术课程大作业: 关于美食的HTML网页设计——HTML+CSS+JavaScript在线美食订餐网站html模板源码30个页面:
HTML网页设计
07-30 1万+
👨‍🎓静态网站的编写主要是用HTML DIV+CSS JS等来完成页面的排版设计👩‍🎓,常用的网页设计软件有Dreamweaver、EditPlus、HBuilderX、VScode 、Webstorm、Animate等等，用的最多的还是DW，当然不同软件写出的前端Html5代码都是一致的，本网页适合修改成为各种类型的产品展示网页，比如美食、旅游、摄影、电影、音乐等等多种主题，希望对大家有所帮助。 🎀 精彩专栏推荐👇🏻👇🏻👇🏻 🧡 【作者主页——🔥获取更多优质源码】 🧡 【...
HTML+CSS+JS网页设计期末课程大作业 京剧文化水墨风书画
而风不止
11-14 2万+
网页设计题材，DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业，茶文化网站 | 中华传统文化题材 | 京剧文化水墨风书画 | 中国民间年画文化艺术网站 | HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为。
HTML+CSS实现1号店风格前端布局与定位技巧
本资源主要介绍了HTML和CSS在创建1号店界面时的基础布局和样式设置。通过提供的代码片段，我们可以了解以下几个关键知识点： 1. **清除默认样式**: 首先，代码中的`*{padding:0;margin:0;}`设置了所有元素的内边距...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值