HTML静态网页成品作业(HTML+CSS)—— 美食湘菜介绍网页(5个页面)

🎉不定期分享源码,关注不丢失哦

文章目录

  • 一、作品介绍
  • 二、作品演示
  • 三、代码目录
  • 四、网站代码
    • HTML部分代码
  • 五、源码获取


一、作品介绍

🏷️本套采用HTML+CSS,未使用Javacsript代码,共有5个页面

二、作品演示

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

三、代码目录

在这里插入图片描述

四、网站代码

HTML部分代码

<div class="header">
		<div class="w">
			<div class="logo">
				<img src="./images/logo.png" >
			</div>
			<ul class="nav">
				<li class="active"><a href="index.html">首页</a></li>
				<li><a href="fazhan.html">发展历史</a></li>
				<li><a href="caixi.html">菜系特点</a></li>
				<li><a href="caipin.html">经典菜品</a></li>
				<li><a href="biaodan.html">在线表单</a></li>
			</ul>
		</div>
	</div>
	
	<div class="banner">
		<img src="./images/banner.jpg">
	</div>
	
	
	<div class="content w">
		<div class="tit">
			<div class="tit_text">湘菜简介</div>
			<div class="tit_line"></div>
		</div>
		
		<div class="jianjie">
			<div>
				<p>湘菜,又叫湖南菜,是中国历史悠久的汉族八大菜系之一 [1],早在汉朝就已经形成菜系。以湘江流域、洞庭湖区和湘西山区三种地方风味为主。</p>
				<p>湘菜制作精细,用料上比较广泛,口味多变,品种繁多;色泽上油重色浓,讲求实惠;品味上注重香辣、香鲜、软嫩;制法上以煨、炖、腊、蒸、炒诸法见称。</p>
				<p>官府湘菜代表菜品以组庵湘菜为代表,如组庵豆腐、组庵鱼翅等;民间湘菜代表菜品有辣椒炒肉、剁椒鱼头、湘西外婆菜、吉首酸肉、牛肉粉,衡阳鱼粉,栖凤渡鱼粉,东安鸡,金鱼戏莲、永州血鸭、九嶷山兔、宁远酿豆腐、腊味合蒸、姊妹团子 、宁乡口味蛇、岳阳姜辣蛇等。</p>
			</div>
			<img src="./images/jianjie.jpeg" alt="">
		</div>
		
		
		
		<div class="tit">
			<div class="tit_text">视频介绍</div>
			<div class="tit_line"></div>
		</div>
		
		<video width="100%"   controls>
		  <source src="./video/video.mp4" type="video/mp4">
		</video>
	</div>
	
	<div class="footer">
		湘菜介绍网 版权所有
	</div>

五、源码获取

🥇 ~ 关注我,点赞博文~ 每天带你涨知识!
🎁1.看到这里了就[点赞+好评+收藏]三连 支持下吧,你的「点赞,好评,收藏」是我创作的动力。
💙2.想要获取本文源码,点击前往吧

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

ROS2从入门到精通4-3:全局路径规划插件开发案例(以A*算法为例)

目录 0 专栏介绍1 路径规划插件的意义2 全局规划插件编写模板2.1 构造规划插件类2.2 注册并导出插件2.3 编译与使用插件 3 全局规划插件开发案例(A*算法)常见问题 0 专栏介绍 本专栏旨在通过对ROS2的系统学习&#xff0c;掌握ROS2底层基本分布式原理&#xff0c;并具有机器人建…

基于WPF开发动态可交互混淆矩阵

最近在项目中&#xff0c;为了算法结果的可视化&#xff0c;需要用到混淆矩阵(Confusion Matrix)&#xff0c;而网上资源大多是基于Python绘制的混淆矩阵&#xff0c;并且是输出图片格式&#xff0c;并不能响应用户点击&#xff0c;今天以一个简单的小例子&#xff0c;简述如何…

正序输入一串数,倒序输出,c语言

正序输入一串数&#xff0c;倒序输出 #include <stdio.h> int main () {int i,a[5]; for(i0;i<5;i) {scanf("%d",&a[i]);} for(i4;i>0;i--) {printf("%d",a[i]);} printf("\n"); return 0; } 运行结果

三分钟“手撕”队列与习题

代码放开头&#xff0c;方便大家查阅 目录 一、实现代码 二、什么是队列 三、队列常见方法 入队push&#xff08;&#xff09; 出队 四、Queue使用 Java自带的Queue 双端队列 五、习题 循环队列 用队列实现栈 用栈实现队列 一、实现代码 package demo2;publi…

【leetcode10-21】子串、普通数组、矩阵

子串 560.和为K的子数组【没理解】 什么是前缀和&#xff1a;前缀和指一个数组的某下标之前的所有数组元素的和&#xff08;包含其自身&#xff09; 通常&#xff0c;会在前缀和首位放一个0。比如数组[1,2,3。其前缀和是[0,1,3,6] 前缀和通常可以帮助我们快速计算某个区间内的…

【控制实践——四旋翼无人机】【一】四旋翼无人机运动分析和建模

传送门 系列博客前言坐标系定义及姿态位置描述坐标系定义姿态描述及坐标系变换 受力分析牛顿-欧拉方程状态空间方程总结 系列博客 前言 在C站摸爬滚打一段时间后&#xff0c;发现控制类相关的圈子较小&#xff08;话题热度低&#xff09;&#xff0c;想顺便跟各位同行读者了解…

Netty是什么?深入理解高性能网络框架

Netty是什么&#xff1f;——深入理解高性能网络框架 引言 在现代互联网应用中&#xff0c;网络通信是不可或缺的一部分。无论是构建微服务架构、游戏服务器、实时通信系统还是物联网应用&#xff0c;高效稳定的网络编程框架都是成功的关键。Netty&#xff0c;作为一款高性能…

项目:仿RabbitMQ实现的消息队列组件

文章目录 写在前面开源仓库和项目上线其他文档说明 需求分析BrokerServer交换机类型持久化消息应答 模块划分服务端模块客户端模块交换机数据管理模块队列数据管理模块绑定数据管理模块消息数据管理模块队列信息管理模块虚拟机数据管理模块路由匹配模块消费者管理模块信道管理模…

HTML+CSS+JS 选项卡导航栏

效果演示 实现了一个导航栏切换内容的效果。页面上方有一个导航栏,每个导航项都有一个圆形背景,点击导航项时,圆形背景会放大并显示对应的内容。每个内容区域都包含一个大号字母,数字会在内容区域显示时淡入。点击其他导航项时,当前内容区域会淡出并隐藏,同时新的内容区域…

[数据集][目标检测]csgo头部身体检测数据集VOC+YOLO格式1265张4类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;1265 标注数量(xml文件个数)&#xff1a;1265 标注数量(txt文件个数)&#xff1a;1265 标注…

群体优化算法----人工蜂群优化算法应用于路径规划(机器人避开平面障碍寻找最短路线)

介绍 人工蜂群优化算法&#xff08;Artificial Bee Colony Algorithm, ABC&#xff09;是由Dervis Karaboga在2005年提出的一种模拟蜜蜂觅食行为的优化算法。该算法基于蜜蜂群体的分工合作和信息交流机制&#xff0c;通过模拟蜜蜂寻找食物源的过程来解决优化问题。ABC算法因其…

mybatis—plus和mybatis的区别

一前置知识&#xff1a; CRUD操作&#xff08;create 添加数据read读取数据 update 修改数据delete删除数据&#xff09; 二&#xff0c;总体概览 MyBatis-Plus 是一个 MyBatis 的增强工具&#xff0c;在 MyBatis 的基础上只做增强不做改变&#xff0c;为简化开发工作、提高…

INT202 例题

算法复杂度 O(n)&#xff1a;表示算法的渐进上界。如果一个算法的运行时间是O(n)&#xff0c;那么它的运行时间最多与输入规模n成正比。换句话说&#xff0c;当输入规模n增加时&#xff0c;算法的运行时间不会超过某个常数倍的n。比如&#xff0c;如果一个算法的时间复杂度是O(…

【InternLM实战营第二期笔记】04:XTuner 微调 LLM:1.8B、多模态、Agent

文章目录 笔记微调基础知识Xtuner8G显存微调模型InternLM2 1.8B多模态实践环节数据微调过拟合WebUI 交互 多模态微调 作业 这回学乖了&#xff0c;打开本节课第一件事先不看教程而是装环境~ 笔记 微调基础知识 这里感慨一下&#xff0c;垂直领域的训练还是挺困难的&#xff0c;…

jenkins的简单使用

2.1.简介 Jenkins是一个开源软件项目&#xff0c;是基于Java开发的一种持续集成工具&#xff0c;用于监控持续重复的工作&#xff0c;旨在提供一个开放易用的软件平台&#xff0c;使软件的持续集成变成可能。 2.4.Jenkins安装 1.下载安装包jenkins.war&#xff1b; 2.在安装…

dpdk uio整体分析及网卡加载

参考:https://zhuanlan.zhihu.com/p/477600165 一、Linux内核知识点 1. __attribute__ constructor/destructor (1)若函数被设定为constructor属性,则该函数会在 main()函数执行之前被自动的执行。 (2)若函数被设定为destructor属性,则该函数会在main()函数执…

C++类的继承与派生概念

派生和继承是自然界普遍存在的一种现象。例如&#xff0c;“猫”和“白猫”。当人们谈及“猫”时&#xff0c;知道它有4条腿&#xff0c;1条尾巴&#xff0c;抓老鼠,为哺乳动物。如谈论“白猫”时&#xff0c;它也是猫&#xff0c;只不过增加了一个新的特征&#xff0c;即它的毛…

Harmony开发 List/Scroll 组件最后一个item显示不全或布局显示不完整

今天在做Harmony开发的时候遇到一个问题,List组件的最后一个item显示不全&#xff0c;如下图&#xff0c;item-9显示不出来&#xff0c;显示了一部分 这个页面的代码结构如下&#xff1a; Column() {Row() {Text(文本1).fontSize(15).fontColor(Color.Black)Text(文本2).font…

论文浅尝 | THINK-ON-GRAPH:基于知识图谱的深层次且可靠的大语言模型推理方法...

笔记整理&#xff1a;刘佳俊&#xff0c;东南大学硕士&#xff0c;研究方向为知识图谱 链接&#xff1a;https://arxiv.org/pdf/2307.07697.pdf 1. 动机 本文是IDEA研究院的工作&#xff0c;这篇工作将知识图谱的和大语言模型推理进行了结合&#xff0c;在每一步图推理中利用大…

2024视频号·短视频+直播极简培训班:抓住视频号风口,流量红利

课程下载&#xff1a;2024视频号短视频直播极简培训班&#xff1a;抓住视频号风口&#xff0c;流量红利-课程网盘链接提取码下载.txt资源-CSDN文库 更多资源下载&#xff1a;关注我。 课程内容&#xff1a; 02 1、为什么视频号有机会&#xff0c;而不是抖音?(直播2024.03.0…