用DIV+CSS技术设计的餐饮美食网页与实现制作（web前端网页制作课作业）HTML+CSS+JavaScript美食汇响应式美食菜谱网站模板

news2024/11/17 19:51:58

👨‍🎓静态网站的编写主要是用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>
	<head>
		<meta charset="UTF-8">
		<title>登录</title>
		<link rel="stylesheet" type="text/css" href="css/login.css"/>
	</head>
	<body>
		 <div id="box">
            <div class="item">
            	<div class="title">
            		<h3>美食汇登录</h3>
            		<p>Mei Shi Hui Login</p>
            	</div>
            	
            	<div class="login-box">
		            	<div class="zh">
		            		<label>账&nbsp;号:</label>
		            	<input type="text" name="" id="text" onfocus="tips()" class="text" value="" placeholder="请输入账号"/><span id="txt">
		            		
		            	</span>
		            	</div>
		            	<div class="password">
		            		<label>密&nbsp;码:</label>
		            	<input type="password" name=""  id="pwd" onfocus="tips()" class="pwd" value="" placeholder="请输入密码"/><span id="txt">
		            	</div>
		            <p id="warning">
		            		*账号或密码为空
		            	</p>	
		            		<a href="javascript:;"  class="login" id="login">登录</a>
		          </div>
            
            </div>
        </div>
	</body>
	
	<script src="js/main.js" type="text/javascript">
	</script>
</html>

CSS样式代码💒


*{  
    margin: 0;   /* 外边距0*/
    padding: 0;  /* 外边距0*/

}
body{
    overflow-x: hidden; /* 超出隐藏*/
}
a{
	color: white;   /* 颜色白色*/
	text-decoration: none;  /* 超出隐藏*/ 
}
ul,li{
    list-style: none;   /* 超出隐藏*/
}
.min-width{
	width: 1200px;
	margin: 0 auto;
}
header{
   width:1600px;
    height: 450px;
    overflow: hidden;
}
/*轮播图start*/

#benner {
	width:1600px;
	height:450px;
}
#benner .imga {
	display:none;
}
#benner .img {
	width: 100%;
	height: 100%
}
#benner .img .active {
	display:block;
}
#benner .title {
	width:101px;
	height:16px;
	background-color: black;
	/*background-color:rgba(226,226,226,0.6);*/
	border-radius:30px;
	margin-top:-35px;
	float:left;
	margin-left:45%;
	margin-right:40%;
	padding:6px 0px 0px 10px;
	position:relative;
}
#benner .title .nr {
	list-style:none;
	width:10px;
	height:10px;
	background:#fff;
	border-radius:10px;
	float:left;
	margin-right:10px;
	margin-bottom:0px;
}
#benner .title .active {
	background:#db192a;
}
.nav .uu-lists{
	position: absolute;
	top: 80px;
	z-index: 99;
	height: 400px !important;
	display: flex;
	flex-direction:column;
	justify-content: flex-start;
	align-items: center;
	background-color: rgba(255,87,34,.7);
	transition:  .5s ease;
	opacity: 0;
}
.uu-lists>li{
	float: none;
	display: block;
	border-bottom: 1px solid white;
	/*background-color: rgba(255,87,34,.7);*/
}

.uu-lists>li:last-child{
	border-bottom: none;
}
/*轮播图end*/
.nav{
	position: relative;
    width: 100%;
    height: 80px;
    transition: .8s ease; 
     background-color: rgba(255,87,34,.7);
    }
.nav ul{
    width: 100%;
    margin: 0 auto;
    height: 100%;
   
}
.nav ul li{
    float: left;
    width: 140px;
    height: 100%;
   
    color: white;
    text-align: center;
    line-height: 80px;
    cursor: pointer;
}

.nav ul .logo{
	width: 300px;
	background: none;
	text-align: center;
	font-size: 34px;
	font-weight: 700;
}
.img{
     width: 100%;
    height: 580px;
    margin: 0 auto;
}
.img ul{
    position: relative;
      width: 100%;
    height: 100%;
    
}
.img ul li{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: all .5s ease;
}
.img ul li img{
   width: 100%;
   height: 100%;
}
.img ul .active{
    opacity: 1;
    animation: enlarge 4s linear infinite;  
}
@keyframes enlarge{
    0%{
        transform: scale(1.15);
        opacity: 0.8;
    }
    50%{
        transform: scale(1.2);
        opacity: 0.7;
    }
    100%{
        transform: scale(1.25);
        opacity: 0.6;
    }

}
/*关于我们start*/
nav{
    width: 100%;
    height: 300px;
    text-align: center;
}
nav h3,.wrap h3{
	width: 200px;
	height: 60px;
	text-align: center;
	margin: 0px auto;
	padding-top: 60px;
	border-bottom: 5px solid rgb(255,87,34);
	font-size: 34px;
	color:rgb(255,87,34);
}
nav p{
	width: 800px;  /*宽度800px*/
	height: 60px;  /*高度800px*/
	padding-top: 40px;
	margin: 0px auto;  /*居中显示*/
	font-size: 24px;
	color:#aaa;
	line-height: 46px;
}
/*关于我们end*/
/*美食详情start*/
.wrap{
    width: 100%;
    height: 800px;
    background-color: #f5f5f5;
}
.wrap .wrap-uu{
	width: 1200px;
	height: 700px;
	margin: 30px auto;
}
.wrap ul li{
	width: 350px;
	height: 250px;
	float: left;
	margin: 20px;
	background-color: white;
 	text-align: center;
 	
 	border-radius: 4px;
}
.wrap ul li h2{
	color: rgb(255,87,34);
	margin-top: 60px;
}
.wrap ul li p{
	margin-top: 20px;
}
.wrap ul li:hover{
	background-color: rgb(189,208,1);
	border:none;
	color: white;
	/*border: 1px solid rgb(255,87,34);*/
}
.wrap ul li:nth-of-type(odd){
	background: url(../img/1.jpg) no-repeat;  /*背景图片*/
	background-size: cover;
}



/*美食详情start*/
.news{
    width: 100%;
    height: 400px;
  	background: url(../img/banner.jpg) no-repeat;  /*背景图片*/
	background-size: cover;
}
.news ul{
	height: 400px;
}
.news ul li{
	float: left;
	width: 360px;
	margin: 20px;
	text-align: center;
}
.news ul .news-img{
	width: 200px;
	height: 200px;
	border-radius: 50%;
	border:1px solid rgb(255,87,34);
	text-align: center;
	margin: 0 auto;
	overflow: hidden;
}
.news ul li h4{
	margin: 10px 0px;
	font-size: 22px;
	color: rgb(255,87,34);
}
.news ul li p{
	color: white;
}
.news ul .news-img img{
	width: 200px;
	height: 200px;
	margin: 0 auto;        /*DIV居中*/
	text-align: center;     /*文本居中*/
	border-radius: 50%;      /*图片圆形*/
	transition: .5s ease;    /*执行动画*/
}
.news ul .news-img img:hover{
	transform: scale(1.1);    /*悬停放大*/
}
footer{
	width: 100%;
	height: 80px;
	background-color:rgb(33,33,33);
}
footer p{
	text-align: center;
	color: white;
	line-height: 40px;
	font-size: 14px;
}



/*小屏幕*/

@media screen and (max-width: 768px) {
	.wrap {
		height: 100%;
	}
	.wrap .wrap-uu {
		width: 100%;
		height: 100%;
	}
	.wrap-uu{
		 display: flex;
		 flex-direction:column;
		 align-items: center;
	}
	header #benner .img img{
		width: 768px;
		height: 100%;
	}
	.news ul li {
		width: 180px;
	}
	nav p{
		width: 768px;
		font-size: 18px;
	}
}
/*平板*/

@media screen and (min-width: 768px) and (max-width: 992px) {
	
}
/*中等屏幕*/

@media screen and (min-width: 992px) and (max-width: 1200px) {
	
}
/*大屏幕，或者宽屏*/

@media screen and (min-width: 1200px) {
	.uu-nav {
		width: 100%;
	}
}





/*小屏幕*/

@media screen and (max-width: 768px) {
	.uu-nav {
		width: 768px;
		min-width: 490px;
		
	}
	.nav-lists{
		display: none;
	}
	.nav ul .ico{
		width: 160px;
		text-align: right;
		font-size: 26px;
		
	}
}
/*平板*/

@media screen and (min-width: 768px) and (max-width: 992px) {
	.uu-nav {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.nav ul .ico{
		display: none;
	}
}
/*中等屏幕*/

@media screen and (min-width: 992px) and (max-width: 1200px) {
	.nav ul .ico{
		display: none;
	}
}
/*大屏幕，或者宽屏*/

@media screen and (min-width: 1200px) {
	.nav ul .ico{
		display: none;
	}
}

八、更多干货🎁

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

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

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

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

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

相关文章

2022中国5G+工业互联网大会值得关注的那些事

2022中国5G+工业互联网大会值得关注的那些事

2022中国5G工业互联网大会 2022年11月20日&#xff0c;由工业和信息化部、湖北省人民政府主办的2022中国5G工业互联网大会在湖北武汉开幕。湖北省委书记王蒙徽出席开幕大会。湖北省委副书记、省长王忠林&#xff0c;工业和信息化部党组成员、副部长张云明讲话。湖南省人民政府党…
阅读更多...
数商云S2B2C商城积分商城功能如何实现家用电器企业营销价值最大化？

数商云S2B2C商城积分商城功能如何实现家用电器企业营销价值最大化？

随着数字化商业时代的到来&#xff0c;消费者行为发生了深刻变化&#xff0c;多元化的消费需求不断驱动着品牌营销思维的变革。对于家用电器行业来说&#xff0c;如何顺应消费者的消费行为变化&#xff0c;不断完善整合更新用户需求&#xff0c;应用更智能化的营销手段与消费者…
阅读更多...
第四章. Pandas进阶—数据导出

第四章. Pandas进阶—数据导出

第四章. Pandas进阶 4.7 数据导出 1.导出.xlsx文件 1).语法&#xff1a; DataFrame.to_excel(excel_writer, sheet_nameSheet1, na_rep, float_formatNone, columnsNone, headerTrue, indexTrue, index_labelNone, startrow0, startcol0, engineNone, merge_cellsTrue, encodi…
阅读更多...
(续)SSM整合之springmvc笔记(文件上传和下载)（P159-163）

(续)SSM整合之springmvc笔记(文件上传和下载)（P159-163）

一 .文件下载 ResponseEntity用于控制器方法的返回值类型&#xff0c;该控制器方法的返回值就是响应到浏览器的响应报文 使用ResponseEntity实现下载文件的功能1. 搞一张图片 2. index.html <a th:href"{/test/down}">下载图片</a> 3 .创建控制器Fil…
阅读更多...
日本知名汽车零部件公司巡礼株式会社115

日本知名汽车零部件公司巡礼株式会社115

株式会社115 业务内容&#xff1a; 拖车用辅助脚、拖车用零件类、特殊车辆用车轴Sub。Assy产品、面向汽车产业的生产设备、面向建设机械的零部件类、面向汽车产业的检查夹具 公司简介&#xff1a; 董事长&#xff1a;佐藤安弘 资本金&#xff1a;4500万日元 员工数&#x…
阅读更多...
在线研讨会 | 多说话人语音融合 - NVIDIA NeMo 代码解析

在线研讨会 | 多说话人语音融合 - NVIDIA NeMo 代码解析

多说话人语音融合 - NVIDIA NeMo 代码解析 多说话人语音融合任务是 TTS 语音合成当中的一个子任务&#xff0c;它是指将两个或者多个说话人的声音进行融合&#xff0c;合成出新的语音的过程&#xff0c;而不需要做任何进一步的微调。多说话人语音融合可以通过插值的方式代替预…
阅读更多...
线程创建方式

线程创建方式

Thread&#xff1a;线程 创建方式&#xff1a; 方法一&#xff1a;继承Thread类 1. 继承 Thread 来创建一个线程类 2. 创建 MyThread 类的实例 3. 调用 start 方法启动线程 方法2 实现 Runnable 接口 1. 实现 Runnable 接口 2. 创建 Thread 类实例, 调用 Thread 的构造方…
阅读更多...
ELK企业级日志分析系统

ELK企业级日志分析系统

一 ELK ELK平台是一套完整的日志集中处理解决方案&#xff0c;将 ElasticSearch、Logstash 和 Kiabana 三个开源工具配合使用&#xff0c; 完成更强大的用户对日志的查询、排序、统计需求。 1 ELK各组件概念 ElasticSearch&#xff1a; 是基于Lucene&#xff08;一个全文检索…
阅读更多...
X11 Xlib截屏问题及深入分析一 —— 源码位置

X11 Xlib截屏问题及深入分析一 —— 源码位置

在使用类Ubuntu操作系统进行截屏时&#xff0c;发现屏幕有时不能正确截取&#xff0c;于是这才有了这段时间的Spetacle、Flameshot、X11 Xlib的系列文章。最后不使用Qt、直接使用X11 Xlib进行截屏仍然存在同样问题。这就需要深入对于代码进行分析了。再次列出源码如下&#xff…
阅读更多...
[附源码]SSM计算机毕业设计高校创新创业服务平台JAVA

[附源码]SSM计算机毕业设计高校创新创业服务平台JAVA

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…
阅读更多...
CAD数据文件格式DXF部分实体(圆弧、椭圆、凸度)解析[原理讲解+公式推导+java实现]

CAD数据文件格式DXF部分实体(圆弧、椭圆、凸度)解析[原理讲解+公式推导+java实现]

文章目录CAD图像读取与显示说明官方实体说明实体圆弧dxf记录信息代码实现测试优化多段线的凸度dxf记录信息代码实现测试椭圆dxf记录信息代码实现测试引用图片引用文章引用CAD图像读取与显示说明 如果想要开发一个可以读取dxf图像的软件&#xff0c;为了方便图像在软件中的绘制&…
阅读更多...
优秀开源项目解读(六

优秀开源项目解读(六

一、Piggy Metrics介绍 PiggyMetrics是一个模拟的个人记账理财的应用&#xff0c;原作者称其为一个端到端的微服务PoC(Proof of Concept)&#xff0c;也就是说他开发这个是为了验证微服务架构和Spring Cloud技术栈。PiggyMetrics目前在github上有超过12k星&#xff0c;是学习微…
阅读更多...
安卓讲课笔记5.6 列表视图

安卓讲课笔记5.6 列表视图

文章目录零、本讲学习目标一、导入新课二、新课讲解&#xff08;一&#xff09;列表视图概述1、继承关系图2、列表视图API文档3、列表视图四要素4、四种常用适配器&#xff08;二&#xff09;数组适配器1、数组适配器API文档2、数据适配器继承关系图3、数组适配器构造方法&…
阅读更多...
第3章 定义内存缓存和log4net日志中间件

第3章 定义内存缓存和log4net日志中间件

006 ICaching、MemoryCaching、SqlSugarMemoryCacheService 、MemoryCacheSetup Icaching&#xff1a;继承该接口的具体实现类&#xff0c;用于把内存缓存中间件实例注入到内置容器中&#xff0c;为实体实例的缓存数据交互操作提供内存管理操作支撑。 MemoryCaching&#xff1a…
阅读更多...
了解Redis之命令操作

了解Redis之命令操作

目录 1、Redis简介 2、Redis安装 2.1解压redis 2.2.安装gcc 2.3.编译redis 2.4.检测安装情况 2.5.修改redis.conf文件 2.6启动redis 2.7.测试redis启动是否成功 3、Redis命令 3.1.String 3.2.Hash 3.3.List 3.4.set 1、Redis简介 Redis是一个开源&#xff08;BSD许可…
阅读更多...
第二次上机作业 大连理工大学

第二次上机作业 大连理工大学

某百货公司6月份各天的销售数据如下：【数据】 x = c(257,276,301,252,238,310,246,236,265,278,271,292,261,281,301,274,267,280,291,258,272,284,268,303,273,263,301,249,269,295)计算该百货公司日销售额的中位数、四分位数和众数 median(x)# 中位数 quantile(x) # 四分位…
阅读更多...
详解TCP为什么不能是两次握手

详解TCP为什么不能是两次握手

三次握手的过程 注意不要遗漏全双工下两缓存&#xff08;读/写缓存&#xff09;的分配和变量的分配。 CLOSED&#xff1a;表示初始状态。 LISTEN&#xff1a;该状态表示服务器端的某个SOCKET处于监听状态&#xff0c;可以接受连接。 SYN_SENT&#xff1a;这个状态与SYN_RCVD遥…
阅读更多...
极限学习机和自适应稀疏表示算法 （EA-SRC）（Matlab代码实现）

极限学习机和自适应稀疏表示算法 （EA-SRC）（Matlab代码实现）

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…
阅读更多...
梦开始的地方—— C语言动态内存管理(malloc+calloc+realloc+free)

梦开始的地方—— C语言动态内存管理(malloc+calloc+realloc+free)

文章目录动态内存管理1.为什么需要动态内存分配&#xff1f;2. 动态内存函数malloc&freecallocrealloc3. 常见的动态内存错误对NULL解引用对动态开辟空间的越界访问对非动态开辟内存使用free释放使用free释放一块动态开辟内存的一部分对同一块动态内存多次释放动态开辟内存…
阅读更多...
Vue实现模糊查询：filter（）

Vue实现模糊查询：filter（）

需求&#xff1a;在输入框里输入内容&#xff0c;包含相关内容的值被筛选出来&#xff1b; 图示&#xff1a; 最初的代码&#xff1a; <body><div id"box"><input type"text" input"handleInput()" v-model"mytext"&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023