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

举报
IT司马青衫 发表于 2022/08/13 15:51:37 2022/08/13
【摘要】 👨‍🎓静态网站的编写主要是用HTML DIV+CSS JS等来完成页面的排版设计👩‍🎓,常用的网页设计软件有Dreamweaver、EditPlus、HBuilderX、VScode 、Webstorm、Animate等等,用的最多的还是DW,当然不同软件写出的前端Html5代码都是一致的,本网页适合修改成为各种类型的产品展示网页,比如美食、旅游、摄影、电影、音乐等等多种主题,希望对...

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


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

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

@TOC


一、网站题目👨‍🎓

🥧 美食网页介绍、🍰甜品蛋糕、🦐地方美食小吃文化、🍺餐饮文化、等网站的设计与制作。


二、网站描述✍️

🍧美食主题网站 主要对各种美食进行展示,让浏览者清晰地了解到各种美食的详细信息,便于浏览者进行选择。该模块的左侧有个美食分类,用户可以选择自己喜欢的种类,当点击种类后,就会在右侧出现该分类下的各种美食,用户可以点击自己感兴趣的食品,从而看到它的具体信息。它的具体信息包括配料、产地及它的一些功能,使用户对该食品有着全面的认识。


三、网站介绍📚

📔网站布局方面:计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

📓网站程序方面:计划采用最新的网页编程语言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.以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻🔥
!


💂【获取方式】

gitee码云源码仓库-欢迎Star: https://gitee.com/zhanyuqiu2022/my-app

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

举报
请填写举报理由
0/200