基于html+css+js的美食网站

已于 2022-05-30 13:25:42 修改
阅读量4.4k 收藏 98
点赞数 21
分类专栏： 前端 文章标签： html javascript 美食
于 2022-05-30 13:23:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46820017/article/details/125044734
版权

首页index.html

首页页面效果：

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

首页代码：

<html>
<head>
<meta charset="utf-8">
<title>潮汕美食攻略</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<div class="main-top">
<div class="top">
<div class="logo"><img src="images/cc.png" width="250px" height="100px"/></div>
<div class="navMenu">

<a href="首页.html" class="navMenu1">首页</a>
<a href="美食攻略.html">美食攻略</a>
<a href="美食菜谱.html">美食菜谱</a>
<a href="美食视频.html">美食视频</a>
<a href="美食铺子.html">美食铺子</a>
<a href="留言板.html">留言板</a>

</div>
<div class="enter">
<p><a href="登录.html">登录</a>&nbsp;|
<a href="注册.html">注册</a></p>
</div>
</div>
<div class="main-middle">
<img src="images/bg_01.jpg" width="1500px" height="350px"/>
</div>
<div class="main-a">
	<div class="main1">
		<div style="text-align:center;margin-bottom:10px">菜谱</div>
		<div class="food-left">
			<div class="food-text">私房菜</div>
			<div class="food-text">烘焙</div>
		</div>
	</div>
	<div class="main2">
		<div class="jinri_tab_left">
			<ul style="margin-right:50px">
				<li><span><a href="美食菜谱.html"><img src="./images/food1.jpg" style="width:300px;height:200px"/></a></span></li>
				<li class="shi_text"><sapn>爆炒菜花</sapn></li>
			</ul>
			<ul style="margin-right:50px">
				<li><span><a href="美食菜谱.html"><img src="./images/food2.jpg" style="width:300px;height:200px"/></a></span></li>
				<li class="shi_text"><sapn>宫保鸡丁</sapn></li>
			</ul>
			<ul style="margin-right:50px">
				<li><span><a href="美食菜谱.html"><img src="./images/food3.jpg" style="width:300px;height:200px"/></a></span></li>
				<li class="shi_text"><sapn>鸡肉沙拉</sapn></li>
			</ul>
		</div>
		<div class="jinri_tab_left">
			<ul style="margin-right:50px">
				<li><span><a href="美食菜谱.html"><img src="./images/food4.jpg" style="width:300px;height:200px"/></a></span></li>
				<li class="shi_text"><sapn>脆皮仙贝</sapn></li>
			</ul>
			<ul style="margin-right:50px">
				<li><span><a href="美食菜谱.html"><img src="./images/food5.jpg" style="width:300px;height:200px"/></a></span></li>
				<li class="shi_text"><sapn>剁椒鱼头</sapn></li>
			</ul>
			<ul style="margin-right:50px">
				<li><span><a href="美食菜谱.html"><img src="./images/food6.jpg" style="width:300px;height:200px"/></a></span></li>
				<li class="shi_text"><sapn>清蒸鱼</sapn></li>
			</ul>
		</div>
	</div>
</div>

<div class="main-a">
	<div class="main2-left">
		<div style="text-align:center;border:2px solid #cccccc;padding:10px 0px">写食派</div>
		<div style="font-size:20px;margin-top:30px;text-align:center">每道食物都有它的故事</div>
		<ul style="margin-top:100px">
			<li><span><a href="美食攻略.html"><img src="./images/food1.jpg" style="width:300px;height:200px"/></a></span></li>
			<li class="shi_text_1"><sapn>美食日记：抹不去的味道</sapn></li>
		</ul>
	</div>
	<div class="main2">
		<div class="jinri_tab_left">
			<ul style="margin-right:50px">
				<li><span><a href="美食攻略.html"><img src="./images/food10.jpg" style="width:300px;height:400px"/></a></span></li>
				<li class="shi_text_1"><sapn>美食日记：旅行的意义</sapn></li>
			</ul>
			<ul style="margin-right:50px">
				<li><span><a href="美食攻略.html"><img src="./images/food8.jpg" style="width:300px;height:400px"/></a></span></li>
				<li class="shi_text_1"><sapn>美食日记：品尝不一样的味道</sapn></li>
			</ul>
			<ul style="margin-right:50px">
				<li><span><a href="美食攻略.html"><img src="./images/food9.jpg" style="width:300px;height:400px"/></a></span></li>
				<li class="shi_text_1"><sapn>美食日记：人生的感悟</sapn></li>
			</ul>
		</div>
	</div>
</div>
<div class="main-a">
	<div class="main2-left">
		<div style="text-align:center;border:2px solid #cccccc;padding:10px 0px">美食视频</div>
		<div style="font-size:20px;margin-top:30px;text-align:center">用光影记录生活的故事</div>
		<ul style="margin-top:100px">
			<li><span><a href="#"><img src="./images/shipin.jpg" style="width:300px;height:200px"/></a></span></li>
			<li class="shi_text_1"><sapn>红烧排骨</sapn></li>
		</ul>
	</div>
	<div class="main2">
		<div class="jinri_tab_left">
			<ul style="margin-right:50px">
				<li><span><a href="#"><video src="./images/红烧排骨.mp4" width="1000" height="420" controls="controls">
      </video></a></span></li>
				<li class="shi_text_1"><sapn>美食视频：红烧排骨做法</sapn></li>
			</ul>
		</div>
	</div>
</div>

<div class="main-a">
	<div class="main2-left">
		<div style="text-align:center;border:2px solid #cccccc;padding:10px 0px">铺子</div>
		<div style="font-size:20px;margin-top:30px;text-align:center">让你的世界照亮</div>
		<ul style="margin-top:100px">
			<li><span><a href="美食铺子.html"><img src="./images/c1.jpg" style="width:300px;height:200px"/></a></span></li>
			<li class="shi_text_1"><sapn>美食日记：抹不去的味道</sapn></li>
		</ul>
	</div>
	<div class="main2">
		<div class="jinri_tab_left">
			<ul style="margin-right:50px">
				<li><span><a href="美食铺子.html"><img src="./images/pu1.jpg" style="width:300px;height:400px"/></a></span></li>
				<li style="width:280px;margin:20px 0px;background: #f9f9f9;">
					<span style="font-size:24px;padding-left:30px">红烧排骨</span>
					<span style="margin-left:80px;color:red;font-size:24px">￥33</span >		
				</li>
			</ul>
			<ul style="margin-right:50px">
				<li><span><a href="美食铺子.html"><img src="./images/pu2.jpg" style="width:300px;height:400px"/></a></span></li>
				<li style="width:280px;margin:20px 0px;background: #f9f9f9;">
					<span style="font-size:24px;padding-left:30px">红烧排骨</span>
					<span style="margin-left:80px;color:red;font-size:24px">￥33</span >		
				</li>
			</ul>
			<ul style="margin-right:50px">
				<li><span><a href="美食铺子.html"><img src="./images/pu3.jpg" style="width:300px;height:400px"/></a></span></li>
				<li style="width:280px;margin:20px 0px;background: #f9f9f9;">
					<span style="font-size:24px;padding-left:30px">红烧排骨</span>
					<span style="margin-left:80px;color:red;font-size:24px">￥33</span >		
				</li>
			</ul>
		</div>
	</div>
</div>

美食攻略页面效果：

在这里插入图片描述

美食菜谱页面效果：

在这里插入图片描述

美食视频页面效果：

在这里插入图片描述

美食铺子页面效果：

在这里插入图片描述

留言页面效果：

在这里插入图片描述

登录页面效果：

在这里插入图片描述

注册页面效果：

在这里插入图片描述

喜欢的博友，关注一下博主

需要资源的请自行私信博主，或加qq:1020366562

@逆风boy
关注
  • 21
    点赞
  • 踩
  • 98
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 20
    评论
专栏目录
基于HTML+CSS+JS的美食网站设计.docx
03-22
基于HTML+CSS+JS的美食网站设计.docx
HTML5作业：美食网站设计(浮动的使用)
coding加油站
06-21 9749
美食网站作业，适合练习浮动布局的时候使用
HTML+CSS美食静态网页设计——简单牛排美食餐饮(9个页面)公司网站模板企业网站实现
weixin__BJ050106的博客
06-18 377
👨‍🎓静态网站的编写主要是用HTML DIV+CSS JS等来完成页面的排版设计👩‍🎓,常用的网页设计软件有Dreamweaver、EditPlus、HBuilderX、VScode 、Webstorm、Animate等等，用的最多的还是DW，当然不同软件写出的前端Html5代码都是一致的，本网页适合修改成为各种类型的产品展示网页，比如美食、旅游、摄影、电影、音乐等等多种主题，希望对大家有所帮助。 🎀 精彩专栏推荐👇🏻👇🏻👇🏻 🧡 【作者主页——🔥获取更多优质源码】 🧡 【
【网页设计】基于HTML+CSS+JavaScript制作美食网站舌尖上的美食
网页设计与制作
01-09 5360
🎀 精彩专栏推荐👇🏻👇🏻👇🏻 🥧 美食网页介绍、🍰甜品蛋糕、🦐地方美食小吃文化、🍺餐饮文化、等网站的设计与制作。🍧美食主题网站 主要对各种美食进行展示，让浏览者清晰地了解到各种美食的详细信息，便于浏览者进行选择。该模块的左侧有个美食分类，用户可以选择自己喜欢的种类，当点击种类后，就会在右侧出现该分类下的各种美食，用户可以点击自己感兴趣的食品，从而看到它的具体信息。它的具体信息包括配料、产地及它的一些功能，使用户对该食品有着全面的认识。👨‍🎓静态网站的编写主要是用HTML DIV
HTML作业04——简易美食页面
qq_64395556的博客
11-20 5917
目标：实现鼠标悬停到某个食物上，会出现食物的名称和食物的介绍等，并且有一个过渡的动画效果。
基于HTML5的美食网站(源码+开题)
2301_81685385的博客
02-22 986
HTML5作为现代网页开发的重要标准，以其强大的兼容性、丰富的功能及优秀的用户体验，在美食类网站的设计与开发中扮演着关键角色。基于HTML5的美食网站不仅能够展示丰富多样的美食内容，还能通过互动功能增强用户参与感，进而促进美食文化的交流与传承。通过构建包含用户管理、美食分类、网站介绍及美食分享等核心功能的系统，本研究期望为用户提供一个一站式的美食信息平台，既能满足用户浏览美食信息的需求，又能提供便捷的分享与互动体验。同时，通过用户反馈和数据分析，不断优化网站功能和用户体验，进一步提升网站的影响力和竞争力。
基于HTML+CSS+JS的美食网站设计
05-12
**基于HTML+CSS+JS的美食网站设计** 在Web程序设计的课程中，学生们被要求设计一个基于HTML、CSS和JavaScript的美食网站。这个项目旨在锻炼学生的实际操作能力，包括前端开发技能、文档编写规范以及问题解决技巧。...
html+CSS+JS美食网站素材+源码
10-17
总的来说，这个"html+css+js美食网站素材+源码"项目展示了如何综合运用前端三大核心技术，构建一个功能丰富、交互性强的美食主题网站。通过学习和分析这个项目，开发者不仅可以提升HTML布局能力、CSS美化技巧，还能...
基于HTML+CSS+JS开发的网站-美食日志发布响应式网页.7z
最新发布
07-10
HTML构建信息架构，CSS塑造视觉风格，JavaScript与jQuery联手打造动态交互，而Bootstrap则以响应式设计为核心，确保网站在任何设备上都能呈现出色的用户体验。源码中详细注释每一个关键点，助力开发者深刻理解代码...
基于HTML+CSS+JS开发的网站-披萨美食餐厅响应式网页.7z
07-10
HTML构建信息架构，CSS塑造视觉风格，JavaScript与jQuery联手打造动态交互，而Bootstrap则以响应式设计为核心，确保网站在任何设备上都能呈现出色的用户体验。源码中详细注释每一个关键点，助力开发者深刻理解代码...
毕业设计：美食网站(源代码)
05-24
本论文含针对毕业设计程序的相关说明，但不是软件系统的使用说明书。本论文不单单介绍系统的各组成部分及操作方法，更强调系统的应用前景，以及能给餐厅带来的益处，从提高经济利益、提升服务质量、合理安排人力、扩大商店影响、增进消费者口碑等方面进行全方位介绍。 而网上销售平台，业已发展多年，大的如阿里巴巴、淘宝网，小的就更不胜数了，和地面销售一样，竞争异常激烈。但是，一如地面销售一样，只要是能另辟蹊径、努力创新的销售商，都会在竞争中立于不败之地。 所以，网上餐饮预定平台，就是要在网络商海上，保持创新，并且与地面门店保持动作协调一到，以期在两处惨烈的战场中搏得一线生机。 现在生活节奏越来越快，工作压力也随着越来大，而真正能给自己享受美食的时间是越来越少，不光是排队等候麻烦，而且在其中浪费的时间，也是一种财富上的损失。在这个大环境下，在线订餐迅速被人们所接受，从而也引发了餐饮行业的大爆发，竞争空前激烈。 不仅仅是玩具，书籍、音乐CD、个人电脑、电脑软件、日常杂货、小件物品等，甚至广泛发展到股票及证券交易。网络正以一种前所未有的冲击力在影响着人类的活动，包括人类的生产和日常生活。网络的诞生和发展，颠覆了
JavaScript大作业——美食餐饮网站设计与实现(HTML+CSS+JavaScript)
qq_38518191的博客
03-30 524
🎀 精彩专栏推荐👇🏻👇🏻👇🏻 🥧 美食网页介绍、🍰甜品蛋糕、🦐地方美食小吃文化、🍺餐饮文化、等网站的设计与制作。🍧美食主题网站 主要对各种美食进行展示，让浏览者清晰地了解到各种美食的详细信息，便于浏览者进行选择。该模块的左侧有个美食分类，用户可以选择自己喜欢的种类，当点击种类后，就会在右侧出现该分类下的各种美食，用户可以点击自己感兴趣的食品，从而看到它的具体信息。它的具体信息包括配料、产地及它的一些功能，使用户对该食品有着全面的认识。👨‍🎓静态网站的编写主要是用HTML DIV
基于HTML(甜品奶茶店)餐饮美食项目的设计与实现（html前端源码和论文设计）
qq_365392777
10-24 570
????‍????静态网站的编写主要是用HTML DIV+CSS JS等来完成页面的排版设计????‍????,常用的网页设计软件有Dreamweaver、EditPlus、HBuilderX、VScode 、Webstorm、Animate等等，用的最多的还是DW，当然不同软件写出的前端Html5代码都是一致的，本网页适合修改成为各种类型的产品...
私藏的自媒体图片素材网站，一键下载，免费使用
weixin_42710113的博客
06-23 216
这期将我私藏的图片素材网站分享给大家～记得 ，再也不怕找不到想要并且可用的图片啦！01 Rfoodiesfeed一个专注食物照片下载的网站～个人和商业用途都可以免费使用。网站图片的质量很高，无论是分辨率还是拍照的创意都是一流水准。需要食物的照片，或者需要拍美食，都来这个网站看看吧，相信能带给你惊喜！02 堆糖好看的壁纸在这里找，堆糖收集了很多好看的图片，风格文艺且小清新，直接可以当作壁纸的那种！包含了各类插画、街景、室内图片，网站／ app 端均可使用。03 UnsplashUnsplash 上所有的图片都
HTML学生个人网站作业设计——中华美食(HTML+CSS) 美食静态网页制作 WEB前端美食网站设计与实现
网页设计与制作
12-09 893
🎀 精彩专栏推荐👇🏻👇🏻👇🏻 🥧 美食网页介绍、🍰甜品蛋糕、🦐地方美食小吃文化、🍺餐饮文化、等网站的设计与制作。🍧美食主题网站 主要对各种美食进行展示，让浏览者清晰地了解到各种美食的详细信息，便于浏览者进行选择。该模块的左侧有个美食分类，用户可以选择自己喜欢的种类，当点击种类后，就会在右侧出现该分类下的各种美食，用户可以点击自己感兴趣的食品，从而看到它的具体信息。它的具体信息包括配料、产地及它的一些功能，使用户对该食品有着全面的认识。👨‍🎓静态网站的编写主要是用HTML DIV
HTML5期末大作业：美食主题网站设计——代码质量好-中华饮食文化5页 HTML+CSS+JavaScript
七夕情人节表白网页代码100款 HTML5网页设计与制作1120款 Echarts大屏数据150款
10-15 2277
HTML5期末大作业：美食主题网站设计——代码质量好-中华饮食文化5页 HTML+CSS+JavaScript 期末作业HTML代码 学生网页课程设计期末作业下载 web网页设计制作成品 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业
html网页制作——美食网站设计与实现（HTML+CSS+JavaScript）
12-18 628
👨‍🎓静态网站的编写主要是用HTML DIV+CSS JS等来完成页面的排版设计👩‍🎓,常用的网页设计软件有Dreamweaver、EditPlus、HBuilderX、VScode 、Webstorm、Animate等等，用的最多的还是DW，当然不同软件写出的前端Html5代码都是一致的，本网页适合修改成为各种类型的产品展示网页，比如美食、旅游、摄影、电影、音乐等等多种主题，希望对大家有所帮助。 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【学习资料/简历模板/面试资料/ 网站设计与制作】 ❤
html网页设计代码作业`餐饮美食-牛排(9页) 学生DW网页设计作业成品 美食肉类 进口食材课程设计网页规划与设计
qq_524614081的博客
06-16 455
HTML5期末大作业：餐饮美食网站设计——餐饮美食-牛排(9页) 学生DW网页设计作业成品 美食肉类 进口食材课程设计网页规划与设计 作品介绍 1.网页作品简介 ：HTML期末大学生网页设计作业 A+水平 ,喜欢的可以下载，文章页支持手机PC响应式布局。 2.网页作品编辑：作品下载后可使用任意HTML编辑软件（如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++ 等任意HTML软件编辑修改网页）。 3.网页作品技术：Div+CSS、鼠标滑
评论 20
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

@逆风boy

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值