网页设计】基于HTML+CSS制作美食网站舌尖上的美食

HTML/CSS是网页设计的基础 #生活知识# #科技生活# #编程学习#

一、‍网站题目

旅游，当地特色，历史文化，特色小吃等网站的设计与制作。

二、✍️网站描述

云南旅游主题的网页 一共七个个页面
- 旅游网页使用html css js制作 有banana图
- 页面可以相互跳转 包含表单 三级页面
- 网页可以使用vscode hbuilder dw等打开修改
- 里面的图片和文字都可以替换为其他旅游网页
- 云南旅游网页介绍了景点，美食，联系我们，桂林旅游等
- html静态网页 没有复杂效果 布局简单 原创html网页设计 适合当作业使用

‍静态网站的编写主要是用HTML DIV+CSS 等来完成页面的排版设计‍,常用的网页设计软件有Dreamweaver、EditPlus、HBuilderX、VScode 、Webstorm、Animate等等，用的最多的还是DW，当然不同软件写出的前端Html5代码都是一致的，本网页适合修改成为各种类型的产品展示网页，比如美食、旅游、摄影、电影、音乐等等多种主题，希望对大家有所帮助。

三、网站介绍

网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

网站程序方面：计划采用最新的网页编程语言HTML5+CSS3程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。

网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。

网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；

网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
其中：
（1）html文件包含：其中index.html是首页、其他html为二级页面；
（2） css文件包含：css全部页面样式,文字滚动, 图片放大等；

 四、网站效果

五、 代码实现

HTML

<div class="header">

<h1><strong>发展历史</strong>&nbsp;&nbsp;</h1>

<link rel="stylesheet" href="css/Untitled-21.css">

<hr size="2" color="#050405" width="980px" />

</div>

<img src="image/bestseller2.png" alt="" />

<img src="image/bestseller3.png" alt="" />

<h1>春秋战国时期</h1>

<div class="fenlei">

<p>从湖南的新石器遗址中出土的大量精美的陶食器和酒器，以及伴随这些陶器一起出土的谷物和动物骨骸的残存来测算，证实潇湘先民早在八九千年前就脱离了茹毛饮血的原始状态，开始吃熟食了。</p>

<p>汉代王逸《楚辞章句》解释《九歌》时说：”昔楚国南郢文邑，沅湘之间，其俗信鬼好祠，其祠必作歌乐鼓舞以乐诸神..”每次祭祀活动总是宴饮伴随着舞乐的形式出现。祀天神、祭地祇、享祖先、庆婚娶、办丧事、迎宾送客都要聚餐。对菜肴的品种有严格要求，在色、香、味、形上也很讲究。如在公元前300 多年的战国时代，伟大的诗人屈原被流放到湖南，写出了著名诗章《楚辞》。其中的《招魂》和《大招》两篇就反映了当时的这种祭祀活动中丰富味美的菜肴、酒水和小吃情况。《招魂》中有一段这样的描写：“..食多方些，稻粢穱麦，挐黄粱些。大苦咸酸，辛干行些。肥牛之犍，臑若芳些。和酸若苦，陈吴羹些。胹鳖炮羔，有柘浆些。鹄酸臇凫，煎鸿鸧些。露鸡臛臇，厉而不爽些。”解释成白话是这样的：“吃的菜肴丰富多彩。大米、小米、穱麦、黄粱随你食用。酸、甜、咸、苦，调和适口。肥牛的蹄筋又软又香。有酸苦风味调制的吴国羹汤。烧甲鱼、烤羊羔还加上甘蔗汁。醋烹的天鹅、焖野鸡、煎肥雁和鸧鹤，还有卤鸡和炖龟肉汤，味美而又浓烈啊——经久不散。”另外，《大招》里还提到有“楚酪”——楚式奶酪，“醢豚”——小猪肉酱，“苦狗”——狗肉干，“炙鸦”——烤乌鸦，“烝凫”——蒸野鸡，“煎”——煎鲫鱼，“雀”——黄雀羹等菜肴。从中我们可以知道，在当时湖南先民的饮食生活中已有烧、烤、焖、煎、煮、蒸、炖、醋烹、卤、酱等十来种烹调方法。所采用的原料，也都是具有楚地湖南侍色的物产资源。此外，根据《楚辞》的记载，当时的小吃也是很有特色的。屈原这样描写：“..粔籹蜜铒，有些。瑶浆蜜勺，实羽觞些。挫糟冻饮，酎清凉些。华酌既冻，有琼浆些..”解释为白话意思是：“有油煎的蜜糖糯米粑粑和蒸熟的蜜饼，还有饴糖。冰镇的糯米酒真清凉醇厚，玉黄色的黄酒够你陶醉..”上述这些，都说明了早在战国时期，湖南先民的饮食生活相当丰富多彩，烹调技艺相当成熟，形成了酸、咸、甜、苦等为主的南方风味。至于春秋战国时期湖南先民的日常主食，据考古及史载资料证实，有稻、粱、豆、麦、黍、稷、粟、米等，但主要是稻米。蒸饭用甑、锅、釜等。蒸熟的饭，颗粒不粘，味甘适口。煮粥则用鬲，将米和水同放鬲中加火煮，米熟即得。饭粥蒸煮、菜肴烹调之后，须盛之以器，才能方便食用。当时湖南盛食之器，不仅品种齐全，而且精致雅观。就质料而言，主要包括陶器、青铜器、铁器、漆器等。这些食器，虽然自殷商以来就出现了，但在湖南，其造型具有自己的特色。尤其是湖南长沙等地楚墓中出土的数千件漆器，造型优美，色彩艳丽，花纹流畅。</p>

<br />

</div>

<div class="header">

<h1><strong>春秋战国时期</strong>&nbsp;&nbsp;</h1>

</div>

<div class="fenlei">

<p>湘菜

秦汉两代，湖南的饮食文化逐步形成了一个从用料、烹调方法到风味风格都比较完整的体系，其使用原料之丰盛，烹调方法之多彩，风味之鲜美，都是比较突出的。1972 年从湖南长沙市马王堆的軚侯妻辛追墓出土随葬遗策中可以看出，在2000多年前的西汉时，湖南的精肴美馔已近百种。仅肉羹一项就有5大类24种。用纯肉烧的叫太羹，是羹中最好的，有9种，均为浓汤；用清炖方法煮的清汤叫白羹，有牛白羹、鹿肉芋白羹、鲜鳜藕鲍白羹等7种；加芹菜烧的肉羹叫中羹，有狗巾羹、雁巾羹、鲫藕中羹3种；用蒿烧的肉羹叫逢羹，有牛逢羹、羊逢羹、豕逢羹；用苦菜烧的肉羹叫苦羹，有狗苦羹和牛苦羹两种。另外还有72种食物。如“鱼肤”是从生鱼腹上割取的肉；“牛脍”、“鹿脍”等是把生肉切成细丝制成的食物；“熬兔”、“熬阴鹑”是干煎兔或鹌鹑等。

</p>

<br />

</div>

<div class="header">

<h1><strong>西汉时期</strong>&nbsp;&nbsp;</h1>

</div>

<div class="fenlei">

<p>从出土的西汉遗策中可以看出，汉代湖南饮食生活中的烹调方法比战国时代已有进一步的发展，发展到羹、炙、煎、熬、蒸、濯、脍、脯、腊、炮、醢、苴等多种。烹调用的调料就有盐、酱、豉、曲、糖、蜜、韭、梅、桂皮、花椒、茱萸等。由于湖南物产丰富，素有“鱼米之乡”的美称，所以自唐、宋以来，尤其在明、清之际湖南饮食文化的发展更趋完善，逐步形成了全国八大菜系中一支具有鲜明特色的湘菜系</p>

<br />

</div>

<div class="header">

<h1><strong>民国时期</strong>&nbsp;&nbsp;</h1>

</div>

<div class="fenlei">

<p>民国时期名人谭延闿及其家厨创立了湘菜的重要菜系－组庵湘菜。组庵湘菜以“原材料选取精良、刀工处理精细、烹制技艺精湛、味道调和精准”的美食理念赢得了人们的青睐，被称为“湘菜之源”，组庵湘菜是湘菜中的著名系列和重要流派</p>

<br />

</div>

<div class="header">

<h1><strong>湘菜名师</strong>&nbsp;&nbsp;</h1>

</div>

<div class="fenlei">

<p>活跃在湘菜界最有名的厨师是欧阳烂阳、周赛群、许菊云、王墨泉、谭添三、聂厚忠、张力行、曹秋泉、罗权等。

民国初期长沙湘菜名厨有肖荣华、柳三和、宋善斋、毕河清，号称“长沙四大名厨”。

建国后湘菜泰斗级的厨师是石荫祥、蔡海云

</p>

<br />

</div>

<style type="text/css">

.we{

background-image:url(image/3.png);

background-color

width: 100%;

padding-bottom: 50px;

}

* {

margin: 0;

padding: 0;

}

body {

background-color: #ededed;

font-family: "楷体";

font-size: 26px;

color:#000;

}

.header {

width: 980px;

margin: 0 auto 7px;

height: 86px;

line-height: 86px;

text-align: center;

font-family: "微软雅黑";

color: #050405;

}

.header h1 {

font-weight: normal;

}

.header strong {

font-weight: normal;

font-size: 30px;

}

.header em {

font-style: normal;

font-size: 14px;

}

.fenlei {

width: 980px;

margin: 0 auto;

}

.fenlei h2 {

font-size: 14px;

font-family: "微软雅黑";

color: #050405;

height: 42px;

line-height: 42px;

}

.fenlei p {

line-height: 30px;

text-align: center;

font-size: 18px;

}

.bestseller {

width: 602px;

margin: 0 auto;

}

.bestseller .txt {

line-height: 30px;

text-indent: 2em;

}

.bestseller .txt em {

font-style: normal;

text-decoration: underline;

}

.shouhou {

width: 602px;

margin: 0 auto;

text-align: center;

font-family: "微软雅黑";

font-size: 16px;

font-weight: bold;

}

.boss {

width: 602px;

margin: 0 auto;

}

.boss h3,

.boss p {

text-indent: 2em;

}

.boss h3 {

height: 30px;

line-height: 30px;

font-family: "微软雅黑";

font-size: 18px;

font-weight: normal;

}

.boss p {

font-style: italic;

line-height: 26px;

font-size: 14px;

}

</style>

</head>

</html>

css

*{

padding: 0px;

margin: 0px;

list-style: none;

font-family:华文楷体 ;

}

/*首页底部背景*/

.web{

background-color:darkred;

width: 100%;

padding-bottom: 50px;

}

.lao{

width:100%;

height:520px;

}

.shu{

width:1200px;

height:520px;

margin:0 auto; /*水平居中*/

background-image:url(../image/1.png);

background-repeat: no-repeat;

background-size: 100%;

border-radius:30px;

}

.A{

width:100%;

}

.B{

width:1200px;

margin:0 auto; /*水平居中*/

}

.C{

margin:0 auto; /*水平居中*/

border-radius:30px;

background-color:whitesmoke;

}

.box{

background-color:darkred;

height:50px;

text-align: center;

}

.box ul{

padding: 0px;

width: 800px;

margin: 0 auto;

}

.box ul li{

line-height: 50px;

float: left;

font-size:25px;

color:gold;

}

.box ul li a{

text-decoration: none;

font-size:25px;

color:gold;

margin: 0 10px;

}

.box1{

height: 500px;

}

.video{

float: left;

margin-right: 30px;

}

.wenzi{

width: 625px;

height: 500px;

float: left;

}

.XN{

font-size:60px;

font-family:华文行楷;

}

.XN2{

padding-top: 50px;

font-size:16px;

line-height:35px;

}

.title{

height:120px;

line-height: 120px;

text-align: center;

font-size: 36px;

}

.box2 {

height:330px;

}

.box2-left {

width: 507px;

height: 330px;

float: left;

margin-left: 30px;

}

.box2-left p {

float: left;

line-height: 35px;

font-size: 18px;

padding-right: 60px;

}

.box2-right {

width: 630px;

height: 330px;

float: left;

}

.box3 {

height: 380px;

margin: 0 auto;

margin-bottom: 20px;

}

.box3-left {

width: 537px;

height: 380px;

float: left;

}

.box3-left img {

display: block;

float: right;

}

.box3-right {

width: 630px;

height: 380px;

float: left;

}

.box3-right p {

margin-top: 80px;

margin-left: 63px;

line-height: 35px;

font-size: 18px;

font-family: "微软雅黑";

}

.neirong {

padding: 30px;

}

.neirong h1{

height: 50px;

line-height: 50px;

text-align: center;

font-size: 24px;

margin-bottom: 30px;

}

.neirong p {

font-size: 16px;

text-indent: 2em;

line-height: 30px;

}

.neirong img {

margin: 0 auto;

display: block;

}

.conr {

height: auto;

overflow: hidden;

padding: 33px;

}

.conr h2{

height: 50px;

line-height: 50px;

text-align: center;

font-size: 24px;

margin-bottom: 30px;

}

.shet {

width: 100%;

height: auto;

min-height: 230px;

margin-bottom: 20px;

border-bottom: #CCC 1px dashed;

padding-bottom: 10px;

line-height: 30px;

}

.conr img {

width: 294px;

height: 195px;

margin: 10px;

margin-bottom: 5px;

}

.shet h1 {

height: 45px;

line-height: 45px;

font-size: 18px;

}

.mr{

float:left;

margin-right:20px !important;

}

.ml{

float:right;

margin-left:20px !important;

}

.tp {

height: 630px;

padding: 33px;

}

.tp h1{

height: 50px;

line-height: 50px;

text-align: center;

font-size: 24px;

margin-bottom: 30px;

}

.tp .bx {

width: 292px;

height: 270px;

float: left;

margin: 10px 40px;

}

.tp .bx img {

width: 292px;

height: 196px;

}

.tp .bx h2 {

font-size: 14px;

color: #212120;

height: 60px;

line-height: 60px;

text-align: center;

font-weight: normal;

}

.jiam {

min-height: 550px;

padding: 30px

}

.jiam img {

float: left;

margin-right: 20px;

}

.jiam-tit {

height: 65px;

line-height: 65px;

font-size: 30px;

margin-top: 20px;

margin-bottom: 20px;

}

.jiam p {

color: #626262;

font-size: 16px;

text-indent: 2em;

line-height: 30px;

margin-bottom: 10px;

}

.lis {

float: right !important;

margin-left: 20px;

margin-right: 0px !important;

}

六、 如何让学习不再盲目

很多刚入门编程的小白学习了基础语法，却不知道语法的用途，不知道如何加深映像，不知道如何提升自己，这个时候每天刷自主刷一些题就非常重要（百炼成神），可以去牛客网上的编程初学者入门训练。该专题为编程入门级别，适合刚学完语法的小白练习，题目涉及编程基础语法，基本结构等，每道题带有练习模式和考试模式，可还原考试模式进行模拟，也可通过练习模式进行练习。

七、更多干货

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

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

3.以上内容技术相关问题欢迎一起交流学习源代码：

4.有任何意见或者不懂得地方可以在评论区留言，也可以私信，我会认真看也会回复的哦

网址：网页设计】基于HTML+CSS制作美食网站舌尖上的美食 https://www.yuejiaxmz.com/news/view/487981

相关内容

html网页制作——HTML节日主题网页项目的设计与实现——圣诞节日介绍(HTML+CSS)
健康生活网页设计4网页html+css精选
HTML5+CSS宠物网站设计
Web网页基于html、CSS设计——“爱家居”素材
爱家居网页制作 网页设计与制作html+css+javascript)项目4
【开题报告】基于SpringBoot的美食制作学习网站的设计设计与实现
舌尖上的美食之十大美食菜谱网站分享
舌尖上的家乡美食教学设计
springboot毕设 美食教学网站 程序+论文
美食创作与分享网站(开题报告+源码）

随便看看