网页设计】基于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*/
    .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*/
    .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.以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻🔥源代码：
QQ:3021557545

绿泡泡：XiaoMei_NN

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