当前位置：首页 > news >正文

大学生HTML5期末作业 Web前端网页制作 html5+css3+js html+css网页设计美食美食模版2个页面

news 来源：原创 2025/5/9 11:17:34

大学生HTML5期末作业 Web前端网页制作 html5+css3+js html+css网页设计美食美食模版2个页面

网页作品代码简单，可使用任意HTML辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。

获取源码

1，访问该网站 https://download.csdn.net/download/qq_42431718/90220049
2，点击上方下载

目录1

在这里插入图片描述

项目视频

html+css网页设计美食美食模版2个页面

页面展示

页面1

在这里插入图片描述

页面2

在这里插入图片描述

代码展示

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Index</title><link rel="stylesheet" href="./css/style.css">
</head><body><!-- 顶部导航栏 --><header><div style="height: 110px;justify-content: center;text-align: center;"><img width="200px" src="./img/head.png" alt="加载失败"></div><div class="nav"><ul><li><img src="./img/logo.svg" alt="加载失败"></li><li><a href="#">Home</a></li><li><a href="./picture.html">Picture</a></li><li><a href="#">About</a></li><li><a href="#">Contact</a></li></ul></div></header><section><div class="tx"><h1>Need some inspiration?</h1><input type="text" placeholder="Enter your Favourite Ingredient or Recipe" class="input"></div><div class="main" style="margin: 40px 30px;"><div class="bord"><img src="./img/cake1.jpg" alt="加载失败"><i>Cook Time 10 minutes</i><h4>Peach Pancakes</h4><hr></div><div class="bord"><img src="./img/cake2.jpg" alt="加载失败"><i>Cook Time 50~60minutes</i><h4>Hazelnut Pavlova</h4><hr></div><div class="bord"><img src="./img/cake3.jpg" alt="加载失败"><i>Cook Time 50~60minutes</i><h4>Peach Trifle</h4><hr></div></div><div style="justify-content: center;text-align: center;"><hr><h2>If you want to know more？👇</h2></div><div class="bottom"><div class="about"><img src="./img/bottom.png" alt="加载失败"><div style="margin-top: 10px;"><img src="./img/qq.png" alt="加载失败" id="qq"><img src="./img/wx.png" alt="加载失败" id="wx"><img src="./img/twitter.png" alt="加载失败" id="tt"></div><h6>@Only delicious food can't live up to it</h6></div></div></section>
</body></html>
<script>var qq = document.getElementById("qq")qq.onclick = function() {window.open("http://wpa.qq.com/msgrd?v=3&uin=2637405542&site=qq&menu=yes")}
</script>

总结

设计一个样式美观又人性化的网页，除了具备扎实的专业知识，还需具备美学和人机工程学等相关知识，优秀的网页应具备以下几个特点:

1.简洁实用

尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；

2.使用方便

要满足使用者的要求，网页适合使用，显示出其功能美；

3.整体性好

围绕一个统一的目标设计，强调整体的功能性；

4.形象突出

尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。

5.交互式强

发挥网络的优势，想方设法使每个使用者都参与到其中来。

更多推荐
【关注作者|获取更多源码|优质文章】；Web前端网页制作、大学生毕业设计辅导、期末大作业辅导、模板源码、技术咨询等，有兴趣的联系我!

更多优质博客文章、网页模板点击以下链接查阅：

html+css+js网页设计 CSDN博客
html+css+js网页设计 CSDN博客
html+css+js网页设计 CSDN博客

关注作者，点赞收藏博文，获取更多源码，Thanks！5000+完整代码，主题涵盖30+种类型:

在这里插入图片描述

大学生HTML5期末作业 Web前端网页制作 html5+css3+js html+css网页设计美食美食模版2个页面

大学生HTML5期末作业 Web前端网页制作 html5css3js htmlcss网页设计美食美食模版2个页面网页作品代码简单，可使用任意HTML辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad 等任意html编辑软件进行运行及修…...

编程日记 2025/5/9 11:17:34

Java100道面试题

1.JVM内存结构 1. 方法区（Method Area） 方法区是JVM内存结构的一部分，用于存放类的相关信息，包括： 类的结构（字段、方法、常量池等）。字段和方法的描述，如名称、类型、访问修饰符…...

编程日记 2025/5/5 3:15:10

MySQL 日志简介

总览 MySQL Server 有以下⼏种⽇志，可以记录服务器正在发⽣的活动。⽇志类型⽇志信息⼀般查询⽇志 (General query log) 已建⽴的客⼾端连接和从客⼾端接收到的语句错误⽇志 (Error log) mysqld在启动、运⾏或停⽌时遇到的问题慢查询⽇志 (Slow query log) 执⾏…...

编程日记 2025/5/9 11:13:26

ubuntu清理磁盘脚本： #！/bin/bash#shell脚本用#作注释行,但是第一行的#！/bin/bash例外sudo apt-get clean sudo rm -rf /tmp/* sudo rm -rf /var/cache/*cd /var/log/ sudo du -h -d 1 rm -rf ./*cd ~/.cache sudo du -h -d 1 rm -rf ./*apt…...

编程日记 2025/5/9 11:15:30

鸿蒙APP之从开发到发布的一点心得

引言： 做鸿蒙开发大概有1年左右时间了，从最开始的看官方文档、看B站视频，到后来成功发布两款个人APP（房贷计算极简版、时简时钟轻喷，谢谢）。简单描述一下里边遇到的坑以及一些经历吧。学习鸿蒙开发个…...

编程日记 2025/4/28 7:31:30

C++二十三种设计模式之享元模式

C二十三种设计模式之享元模式一、组成二、特点三、目的四、缺点五、示例代码一、组成抽象享元类：声明操作方法。具体享元类：使用内部数据和外部数据来实现操作方法。享元管理者类：创建和管理具体享元对象。二、特点 1、创建享元对象…...

编程日记 2025/5/5 7:23:00

基于Python的音乐播放器毕业设计-附源码73733

摘要本项目基于Python开发了一款简单而功能强大的音乐播放器。通过该音乐播放器，用户可以轻松管理自己的音乐库，播放喜爱的音乐，并享受音乐带来的愉悦体验。首先，我们使用Python语言结合相关库开发了这款音乐播放器。利用Tkin…...

编程日记 2025/5/5 15:16:55

基于32单片机的智能语音家居

一、主要功能介绍以STM32F103C8T6单片机为控制核心，设计一款智能远程家电控制系统，该系统能实现如下功能： 1、可通过语音命令控制照明灯、空调、加热器、窗户及窗帘的开关； 2、可通过手机显示和控制照明灯、空调、窗户及窗帘的开…...

编程日记 2025/5/4 13:28:19

【C语言程序设计——入门】C语言入门与基础语法（头歌实践教学平台习题）【合集】

目录😋 ⚙️C语言环境配置：Windows配置C语言环境(超级详细) <第1关：程序改错> 任务描述相关知识 1. 头文件的引用 2. 基本语法规则编程要求测试说明通关代码测试结果 <第2关：scanf 函数>…...

编程日记 2025/5/4 13:31:12

基于Springboot的知名作家交流系统

博主介绍：java高级开发，从事互联网行业多年，熟悉各种主流语言，精通java、python、php、爬虫、web开发，已经做了多年的设计程序开发，开发过上千套设计程序，没有什么华丽的语言，只有实…...

编程日记 2025/5/6 22:58:37

服务器数据恢复—离线盘数超过热备盘数导致raidz阵列崩溃的数据恢复

服务器数据恢复环境&故障： 一台配有32块硬盘的服务器在运行过程中突然崩溃不可用。经过初步检测，基本上确定服务器硬件不存在物理故障。管理员重启服务器后问题依旧。需要恢复该服务器中的数据。服务器数据恢复环境： 1、将服务器中硬盘…...

编程日记 2025/5/9 6:47:24

conda安装及demo：SadTalker实现图片+音频生成高质量视频

1.安装conda 下载各个版本地址：https://repo.anaconda.com/archive/ win10版本： Anaconda3-2023.03-1-Windows-x86_64 linux版本： Anaconda3-2023.03-1-Linux-x86_64 Windows安装环境变量 conda -V2.配置conda镜像源安装pip conda…...

编程日记 2025/5/9 11:13:27

内蒙古水系详细很全shp格式arcgis软件无偏移坐标下载后内容测评

标题中的“内蒙古水系详细很全shp格式arcgis软件无偏移坐标”指的是一个地理信息系统（GIS）数据集，该数据集详细记录了内蒙古地区的水系信息，并以ESRI公司的标准矢量数据格式——Shapefile（.shp）进行存储。S…...

编程日记 2025/5/4 23:22:24

RK3588平台开发系列讲解（系统篇）Linux Kconfig的语法

文章目录一、什么是Kconfig二、config模块三、menuconfig四、menu 和 endmenu五、choice 和 endchoice六、source七、depends on八、default九、help十、逻辑表达式沉淀、分享、成长，让自己和他人都能有所收获！😄 一、什么是Kconfig Kconfig的语法及代码结构非常简单。本博…...

编程日记 2025/5/2 3:41:24

c#使用SevenZipSharp实现压缩文件和目录

封装了一个类，方便使用SevenZipSharp，支持加入进度显示事件。双重加密压缩工具范例： using SevenZip; using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Text; using System.Threading.…...

编程日记 2025/5/6 11:31:29

【C++数据结构——查找】二叉排序树（头歌实践教学平台习题）【合集】

目录😋 任务描述相关知识 1. 二叉排序树的基本概念 2. 二叉排序树节点结构体定义 3. 创建二叉排序树 4. 判断是否为二叉排序树 5. 递归查找关键字为 6 的结点并输出查找路径 6. 删除二叉排序树中的节点测试说明通关代码测试结果任务描述本关任务&a…...

编程日记 2025/5/6 16:01:51

C# 服务生命周期：Singleton、Scoped、Transient

文章目录 1、概念:服务生命周期单例 (Singleton) :作用域 (Scoped) :瞬态 (Transient) : 2、对 Scoped 和 Transient 进一步辨析Scoped 生命周期Transient 生命周期选择哪种生命周期 1、概念:服务生命周期单例 (Singleton) : 整个应用程序生命周期中只有一个实例被创建并共享…...

编程日记 2025/5/4 22:11:18

如何让用户在网页中填写PDF表格？

在网页中让用户直接填写PDF表格，可以大大简化填写、打印、扫描和提交表单的流程。通过使用复选框、按钮和列表等交互元素，PDF表格不仅让填写过程更高效，还能方便地在电脑或移动设备上访问和提交数据。以下是在浏览器中显示可填写PDF表单的四…...

编程日记 2025/5/8 10:18:18

w140体育馆使用预约平台的设计与实现

🙊作者简介：多年一线开发工作经验，原创团队，分享技术代码帮助学生学习，独立完成自己的网站项目。代码可以查看文章末尾⬇️联系方式获取，记得注明来意哦~🌹赠送计算机毕业设计600个选题excel文…...

编程日记 2025/5/4 15:12:22

Linux（Ubuntu）下ESP-IDF下载与安装完整流程（4）

接前一篇文章：Linux（Ubuntu）下ESP-IDF下载与安装完整流程（3）本文主要看参考官网说明，如下：快速入门 - ESP32-S3 - — ESP-IDF 编程指南 latest 文档 Linux 和 macOS 平台工具链的标准设置 - ESP32-S3 - — ESP-IDF 编程指南 latest 文档前边几回讲解了第一步 —— …...

编程日记 2025/4/30 18:46:32

PDF预览插件

PDF预览插件可用于当前页面弹窗形式查看，可增加一些自定义功能 pdf预览插件代码块： pdfobject.js <div class="pdfwrap"><div class="item"><h3>笑场</h3><div class="tags"><p>李诞</p><i&…...

编程日记 2025/5/9 11:11:25

【微服务】2、网关

Spring Cloud微服务网关技术介绍单体项目拆分微服务后的问题服务地址问题：单体项目端口固定（如黑马商城为8080），拆分微服务后端口各异（如购物车808、商品8081、支付8086等）且可能变化，前端难…...

编程日记 2025/4/28 3:06:25

计算机网络--路由表的更新

一、方法【计算机网络习题-RIP路由表更新-哔哩哔哩】二、举个例子例1 例2...

编程日记 2025/5/4 4:50:55

网络安全抓包

#知识点： 1、抓包技术应用意义 //有些应用或者目标是看不到的，这时候就要进行抓包 2、抓包技术应用对象 //app,小程序 3、抓包技术应用协议 //http，socket 4、抓包技术应用支持 5、封包技术应用意义总结点：学会不同对象采用…...

编程日记 2025/5/7 17:08:47

字玩FontPlayer开发笔记8 Tauri2文件系统

字玩FontPlayer开发笔记8 Tauri2文件系统字玩FontPlayer是笔者开源的一款字体设计工具，使用Vue3 ElementUI开发，源代码： github: https://github.com/HiToysMaker/fontplayer gitee: https://gitee.com/toysmaker/fontplayer 笔记字玩目…...

编程日记 2025/5/3 8:32:00

http源码分析

一、HttpURLConnection http连接池源码分析二、HttpClient 连接池，每个路由最大连接数三、OkHttp okhttp的连接池与socket连接...

编程日记 2025/5/8 22:36:49

【vim】vim常用操作总结

vim常用操作总结一，简介二，操作介绍2.1 命令模式2.1.1 删除（剪切）光标所在行2.1.2 复制2.1.3 粘贴2.1.4 跳到行末2.1.5 跳到行首2.1.6 撤销操作 2.2 视图模式2.3 命令模式2.4 编辑模式三，总结一，简介在…...

编程日记 2025/5/6 21:12:43

【学Rust开发CAD】1 环境搭建

文章目录一、搭建C/C编译环境二、安装Rust三、配置 PATH 环境变量四、验证安装结果五、安装编辑工具一、搭建C/C编译环境 Rust 的编译工具依赖 C 语言的编译工具，这意味着你的电脑上至少已经存在一个 C 语言的编译环境。如果你使用的是 Linux 系统，往…...

编程日记 2025/5/6 2:27:06

RK3588开发笔记-spi接口调试

目录前言一、SPI接口简介二、原理图连接三、设备树配置四、spi调试五、spi应用软件接口总结前言在嵌入式系统开发中，SPI（Serial Peripheral Interface）接口作为一种同步、全双工、多设备、多主机的通信协议，广泛应用于连接各种外围设备，如ADC、DAC、数据存…...

编程日记 2025/5/8 14:18:26

AlphaPi相关硬件驱动提取

初涉硬件编程，在咸鱼上搞了几块AlphaPi和microbit的板鼓捣了一下，alphapi生态不完善，网上又无任何文档，搞封闭，可玩性实在有限，但貌似相关扩展板是可以插microbit的，于是想把这些扩展版用microb…...

编程日记 2025/5/9 10:08:40

【Unity3D】Text文本文字掉落效果

相关技术：Text、TextMesh、Rigidbody（刚体）、BoxCollider（碰撞体）、TextGenerator、文本网格、文字网格原理：使用UGUI Text获取其文字的每个字符网格坐标，转世界坐标生成对应的3D文本(TextMesh…...

编程日记 2025/5/7 14:07:29

MySQL内置函数详解

MySQL内置函数详解 1. 字符串函数 1.1 基本字符串处理 -- 字符串长度 SELECT LENGTH(Hello MySQL); -- 返回11-- 字符串大小写转换 SELECT LOWER(HELLO), UPPER(hello); -- 返回 hello, HELLO-- 字符串截取 SELECT SUBSTRING(MySQL Database, 1, 5); -- 返回 MySQL SELEC…...

编程日记 2025/5/9 11:11:25

【网络安全设备系列】9、WAF（Web应用防火墙）

0x00 定义: Web应用防火墙是通过执行一系列针对HTTP/HTTPS的安全策略来专门为Web应用提供保护的一种设备。 WAF需要部署在Web服务器的前面，串行接入，不仅在硬件性能上要求高，而且不能影响Web服务，所以HA功能、Bypass功能都是必…...

编程日记 2025/4/30 13:17:45

Express 加 sqlite3 写一个简单博客

例图： 搭建命令： 前提已装好node.js 开始创建项目结构 npm init -y package.json:{"name": "ex01","version": "1.0.0","main": "index.js","scripts": {"test": &q…...

编程日记 2025/5/8 2:49:10

【C++数据结构——图】图的邻接矩阵和邻接表的存储（头歌实践教学平台习题）【合集】

目录😋 任务描述相关知识 1. 带权有向图 2. 图的邻接矩阵 3. 图的邻接表测试说明通关代码测试结果任务描述本关任务：编写一个程序实现图的邻接矩阵和邻接表的存储。相关知识为了完成本关任务，你需要掌握： 带权有向图…...

编程日记 2025/5/4 22:52:01

基于单片机的直流稳压电源的设计（论文+源码）

1.系统方案设计在本次直流稳压电源的设计中，其关键指标如下： 系统输入电压220V交流系统输出直流0到12V可调，步进可以达到0.1V电流最大输出可以到2A具有短路保护功能可以通过液晶或者数码管等显示设备显示当前输出电压 2. 电路图...

编程日记 2025/5/8 14:18:02

Golang开发-案例整理汇总

前言 CSDN的文章缺少一个索引所有文章分类的地方，所以手动创建这么一个文章汇总的地方，方便查找。Golang开发经典案例汇总 GoangWeb开发 GolangWeb开发- net/http模块 GolangWeb开发-好用的HTTP客户端httplib(beego) GolangWeb开发- Gin不使用Nginx部署Vue项目 Golang并发开…...

编程日记 2025/5/1 23:35:18

从入门到精通：Ansible Shell 模块的应用与最佳实践

Ansible是一款强大的自动化运维工具，通过其模块化的设计，可以方便地管理和配置远程主机。作为Ansible的一个常用模块，shell 模块使得我们可以在目标主机上执行复杂的命令或脚本。无论是单一的命令，还是复杂的Shell脚本&#xff0c…...

编程日记 2025/5/5 20:53:39

【Javascript Day1】javascript基础

javascript编程规则弹窗（举例） alert("内容")，直接写在控制区生效三种写法 1、行内js语法 ：需要注意引号的问题 <input type"button" value"提示窗" οnclick alert("消息") &…...

编程日记 2025/5/7 14:33:55

dbeaver导入导出数据库（sql文件形式）

目录前言dbeaver导出数据库dbeaver导入数据库前言有时候我们需要复制一份数据库，可以使用dbeaver简单操作！ dbeaver导出数据库选中数据库右键->工具->转储数据库 dbeaver导入数据库选中数据库右键->工具->执行脚本 mysql 默…...

编程日记 2025/5/6 17:16:17

字玩FontPlayer开发笔记6 Tauri2设置菜单

字玩FontPlayer开发笔记6 Tauri2设置菜单字玩FontPlayer是笔者开源的一款字体设计工具，使用Vue3 ElementUI开发，源代码： github: https://github.com/HiToysMaker/fontplayer gitee: https://gitee.com/toysmaker/fontplayer 笔记字玩目…...

编程日记 2025/5/8 6:12:21

大学生HTML5期末作业 Web前端网页制作 html5+css3+js html+css+js网页设计美食美食3个页面(带js)

大学生HTML5期末作业 Web前端网页制作 html5css3js htmlcssjs网页设计美食美食3个页面(带js) 网页作品代码简单，可使用任意HTML辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad 等任意html编辑软件进行运行…...

编程日记 2025/5/9 0:13:53

创龙3588——debian根文件系统制作

文章目录 build.sh debian 执行流程build.sh源码流程 30-rootfs.sh源码流程 mk-rootfs-bullseys.sh源码流程 mk-sysroot.sh源码流程 mk-image.sh源码流程 post-build.sh 大致流程系统制作步骤 build.sh debian 执行流程 build.sh 源码 run_hooks() {DIR"$1"shiftf…...

编程日记 2025/5/7 20:39:39

element组件el-select、el-tree-select有值，不渲染lable

大致情况是这个样子的............ 之前vue页面和script脚本是放在一个页面的，今天把页面和脚本拆开了。这一拆不打紧，完犊子！它奶奶的el-select、el-tree-select这俩组件不正常显示了！！！ 我这个是vite-vue…...

编程日记 2025/5/7 8:39:31

【C++数据结构——线性表】顺序表的基本运算（头歌实践教学平台习题）【合集】

目录😋 任务描述相关知识一、线性表的基本概念二、初始化线性表三、销毁线性表四、判定是否为空表五、求线性表的长度六、输出线性表七、求线性表中某个数据元素值八、按元素值查找九、插入数据元素十、删除数据元素测试说明通关代码测…...

编程日记 2025/5/6 10:06:32

2025第1周 | JavaScript中的正则表达式

目录 1. 正则表达式是个什么东东？1.1 怎么定义正则1.2 对象字面量方式1.3 类创建方式 2. 怎么使用2.1 实例方法2.1.1 exec方法2.1.2 test方法 2.2 字符串中的方法2.2.1 match/matchAll2.2.2 replace/replaceAll2.2.3 split2.2.4 search 3. 规则3.1 修饰符3.2 字符类…...

编程日记 2025/5/8 8:41:41

模型九屏幕分析法

系列文章分享模型，了解更多👉 模型_思维模型目录。九屏幕法：全方位分析问题的系统工具。 1 九屏幕分析法的应用 1.1 新产品研发的市场分析一家科技公司计划开发一款新型智能手机，为了全面评估市场潜力和风险，他们…...

编程日记 2025/4/30 2:23:14

快速排序(霍尔法)，冒泡排序【C语言】

冒泡排序效率低，但是稳定性高代码 // 冒泡排序 void maopao(int a[]);int main() {int a1[10] {34,78,29,46,12,85,63,92,57,31};printf("\n排序前:\n");print(a1);maopao(a2);printf("冒泡排序后:");print(a2); }//冒泡排序 void maopao(…...

编程日记 2025/5/5 3:44:34

国产编辑器EverEdit - 两种删除空白行的方法

1 使用技巧：删除空白行 1.1 应用场景用户在编辑文档时，可能会遇到很多空白行需要删除的情况，比如从网页上拷贝文字，可能就会存在大量的空白行要删除。 1.2 使用方法 1.2.1 方法1： 使用编辑主菜单选择主菜单编辑 …...

编程日记 2025/5/4 18:00:53

20241230 AI智能体-用例学习（LlamaIndex/Ollama）

AI小白一枚，入门实验。 1. Pg-Hydra 颠覆数据库体验：Hydra —— 开源的列式存储 PostgreSQL-CSDN博客 git clone https://github.com/hydradatabase/hydra && cd hydra cp .env.example .env docker compose up psql postgres://postgres:hydra@127.0.0.1:5432 do…...

编程日记 2025/5/5 8:25:20

大学生HTML5期末作业 Web前端网页制作 html5+css3+js html+css网页设计 美食 美食模版2个页面

网页作品代码简单，可使用任意HTML辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。

获取源码

目录1

项目视频

页面展示

页面1

页面2

代码展示

总结

1.简洁实用

2.使用方便

3.整体性好

4.形象突出

5.交互式强

相关文章：

大学生HTML5期末作业 Web前端网页制作 html5+css3+js html+css网页设计美食美食模版2个页面