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

news2024/11/16 12:02:25

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

文章目录

  • 一、作品介绍
  • 二、作品演示
  • 三、代码目录
  • 四、网站代码
    • 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.想要获取本文源码,点击前往吧

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

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

相关文章

AI 正在攻克难题——赋予计算机嗅觉

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…

NLP(1)-TF-IDF算法介绍

一、TF-IDF算法介绍 TF-IDF&#xff08;term frequency–inverse document frequency&#xff0c;词频-逆向文件频率&#xff09;是一种用于信息检索&#xff08;information retrieval&#xff09;与文本挖掘&#xff08;text mining&#xff09;的常用加权技术。 TF-IDF是一…

Java:流程控制语句

文章目录 一、顺序结构二、分支结构2.1 if2.2 switch 三、循环结构3.1 for3.2 while3.3 do...while 四、流程控制4.1 break4.2 continue 五、结语 一、顺序结构 顺序结构语句是Java程序默认的执行流程&#xff0c;按照代码的先后顺序&#xff0c;从上到下依次执行。 二、分支结…

理解NSCopying协议

NSCopying 协议用于让对象能够被复制。实现这个协议的类需要定义如何创建该对象的副本。这个副本是独立的&#xff0c;不会与原对象共享内存地址。 为什么需要 NSCopying 协议&#xff1f; 当你需要复制对象时&#xff0c;例如将对象存储到一个集合&#xff08;如数组、字典&…

锐捷校园网自助服务-字符过滤存在缺陷

锐捷校园网自助服务-字符过滤存在缺陷 漏洞介绍 令人感到十分遗憾的是&#xff0c;锐捷网络安全应急响应中心对漏洞上报似乎缺少了一些奖励&#xff0c;令人对官方上报漏洞失去了些许兴趣​。 该缺陷仅仅打破了安全检查防护&#xff0c;并没有造成实质性危害&#xff0c;至于…

ChatGPT成知名度最高生成式AI产品,使用频率却不高

5月29日&#xff0c;牛津大学、路透社新闻研究所联合发布了一份生成式AI&#xff08;AIGC&#xff09;调查报告。 在今年3月28日—4月30日对美国、英国、法国、日本、丹麦和阿根廷的大约12,217人进行了调查&#xff0c;深度调研他们对生成式AI产品的应用情况。 结果显示&…

Ubuntu22.04下源码编译安装pythonocc-7.8

Ubuntu22.04下源码编译安装pythonocc-7.8 本文介绍Ubuntu下手动编译安装pythonocc&#xff0c;及安装过程遇到的各种坑 基本依赖安装 sudo apt-get update sudo apt-get install -y wget libglu1-mesa-dev libgl1-mesa-dev libxmu-dev libxi-dev build-essential cmake libf…

Angular17(1):使用Angular CLI创建空项目

要创建一个空的 Angular 项目&#xff0c;可以使用 Angular CLI&#xff08;命令行界面&#xff09;。以下是使用 Angular CLI 创建一个新项目的步骤&#xff1a; 1、安装 Angular CLI&#xff1a; 打开你的命令行界面&#xff08;在 Windows 上是 CMD、PowerShell 或 Git Bas…

浮点数精度问题(详细)

文章目录 1.什么是浮点数2. 二进制与十进制的转换2.1 二进制与十进制的相互转换(方法介绍&#xff0c;思维理解)2.2 在线转换工具 3.浮点数的 IEEE754 表示4.C# 浮点型float、double 、decimal 比较5.解决运算精度问题5.1 浮点数预算精度问题5.2 解决方案5.2.1 放大倍数计算5.2…

基于PHP+MySQL开发的一套游泳馆预约报名小程序开发源码模板

最近新开发了一套游泳馆线上预约报名小程序&#xff0c;其主要功能有预约功能&#xff0c;报名功能&#xff0c;支付功能&#xff0c;个人中心&#xff0c;订单管理&#xff0c;商品管理等等。 游泳馆预约报名小程序系统-运行环境 开发语言&#xff1a;PHP 数据库&#xff1a;M…

升级SVN服务器web管理工具EasyPHP17.1

1、卸载EasyPHP12.1&#xff0c;删除C盘安装路径下C:\Program Files (x86)\EasyPHP12**文件 2、安装EasyPHP-Devserver-17.0-setup&#xff0c;链接见下方官网地址 PHP DEVSERVER | LOCAL PHP DEVELOPMENT ENVIRONMENTA complete and ready-to-use PHP development environmen…

MySQL 自定义函数(实验报告)

一、实验名称&#xff1a; 自定义函数 二、实验日期&#xff1a; 2024年 6 月 1 日 三、实验目的&#xff1a; 掌握MySQL自定义函数的创建及调用&#xff1b; 四、实验用的仪器和材料&#xff1a; 硬件&#xff1a;PC电脑一台&#xff1b; 配置&#xff1a;内存&#…

LabVIEW实现汽车逆变器功能测试系统

​介绍了如何利用LabVIEW开发汽车逆变器&#xff08;包括功率板和控制板&#xff09;的自动测试设备&#xff08;ATE&#xff09;&#xff0c;实现对额定800V电压、300A电流的逆变器进行功能测试。系统通过CAN2.0通讯协议&#xff0c;实现电机控制、温度传感器监测、电压校验和…

docker一键部署EFK系统(elasticsearch filebeat kibana metricbeat es-head)

EFK日志系统搭建 EFK日志系统介绍功能需求搭建elasticsearch集群规划前提部署核对证书及权限 EFK日志系统介绍 Elasticsearch 是一个实时的、分布式的可扩展的搜索引擎&#xff0c;允许进行全文、结构化搜索&#xff0c;它通常用于索引和搜索大量日志数据&#xff0c;也可用于…

7、css3实现边框不停地跑动效果

效果例图&#xff1a; 1、上html代码&#xff1a; <!DOCTYPE html> <html lang"zh"> <head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0" /><meta …

百分之九十的人都忽视了JMeter响应断言中的这个实用功能—— Jmeter Variable Name to use

JMeter的响应断言 相信对于使用过JMeter的同学来学&#xff0c;一定都使用过响应断言&#xff0c;在这里我就不相信介绍了&#xff0c;我们可以简单的理解为&#xff1a; JMeter的响应断言是一种用于检查测试中得到的响应数据是否符合预期的工具&#xff0c;旨在保证性能测试…

挑战你的数据结构技能:复习题来袭【6】

1. (单选题)设无向图的顶点个数为n,则该图最多有&#xff08;&#xff09;条边 A. n-1 B. n(n-1)/2 C. n(n1)/2 D. 0 答案&#xff1a;B 分析&#xff1a; 2. (单选题)含有n个顶点的连通无向图,其边的个数至少为()。 A. n-1 B. n C. n1 D. nlog2n 答案&#xff1a;A…

产品经理的“高光”时刻,你中了几个?

作为产品经理&#xff0c;都有着这样一个闪闪发光的梦&#xff0c;就是看着自己的产品从0到DAU过万、过十万&#xff0c;甚至是过百万。 不过想要成为过百万的大牛&#xff0c;天时地利任何一个都不能少&#xff0c;大多数的产品经理暂时还在打怪升级攒经验。 虽然暂时体验不…

C++ STL map容器erase操作避坑

map容器的erase方法有三种重载形式&#xff1a; //1.删除迭代器所指向的元素 //返回值是指向下一个节点的迭代器 iterator erase(iterator it); //2.区间删除 iterator erase(iterator first, iterator last); //3.根据键值删除 //返回值为删除的元素个数 size_type erase(con…

企业全面管理解决方案:基于Java技术的ERP管理系统源码

功能模块与描述&#xff1a; ERP首页&#xff1a; 销售统计与采购统计&#xff1a;实时展示销售和采购金额的统计数据。折线图统计&#xff1a;通过图表直观展示销售和采购趋势。 采购管理&#xff1a; 采购订单管理&#xff1a;处理采购订单的搜索、新增、导出等。采购入库与退…