大学生HTML5期末作业 Web前端网页制作 html5+css3+js html+css+js网页设计 美食 中华美食介绍1个页面带js
网页作品代码简单，可使用任意HTML辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
获取源码
1，访问该网站 https://download.youkuaiyun.com/download/qq_42431718/90230758
2，点击上方下载
目录1
项目视频
html+css+js网页设计 美食 中华美食介绍1个页面
页面展示
页面1
代码展示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>中华饮食文化</title>
<link rel="stylesheet" href="css/style.css" />
<style>
#fade img {
width: 100%;
height: 450px;
}
</style>
</head>
<body>
<div class="header">
<div class="top">
<img src="images/logo.png" class="logo">
<div class="link">
<a href="#">设为首页</a> | <a href="#" class="link2">加入收藏</a>
</div>
</div>
<div class="nav">
<ul>
<li><a href="">网站首页</a></li>
<li><a href="">美食介绍</a></li>
<li><a href="">中华菜系</a></li>
<li><a href="#meishi">美食图片</a></li>
<li><a href="">在线留言</a></li>
</ul>
</div>
</div>
<div class="banner">
<div id="fade">
<img src="./images/slide1.jpg" id="lunbo">
</div>
</div>
<div class="content">
<div class="sidebar">
<div class="pro_box">
<img src="images/pro_cp.jpg" />
<ul>
<li><a href="page1.html">美食介绍</a></li>
<li><a href="page2.html">中华菜系</a></li>
<li><a href="page3.html">美食图片</a></li>
<li><a href="page4.html">在线留言</a></li>
</ul>
</div>
<div class="contact_box">
<div class="text">
<p>联系人：XXXX</p>
<p>电话：156-0000-0000</p>
</div>
</div>
</div>
<div class="cont_right">
<div class="pic_show">
<div class="title">
<h3>美食展示 </h3>
</div>
<ul>
<li><a href="#"><img src="images/show1.jpg" />美食展示</a></li>
<li><a href="#"><img src="images/show2.jpg" />美食展示</a></li>
<li><a href="#"><img src="images/show3.jpg" />美食展示</a></li>
<li><a href="#"><img src="images/show4.jpg" />美食展示</a></li>
</ul>
</div>
<div class="jianjie">
<div class="title">
<h3>美食文化简介</h3>
<a href="#" class="more"><img src="images/more.jpg" /></a>
</div>
<div class="box">
<img src="images/jianjie.jpg">
<p>
民以食为天，世界上任何一个国家都有一个传统的饮食文明与其它文明共同在历史中轮回。每个地区都有与众不同的饮食习惯和味觉倾向，而各自将这些精妙的技艺发展成了一种习俗，
一种文化，这使得无数食客流连在世界的每一个角落。
</p>
<p>
亚洲的东方有一个拥有悠久文明历史的国度，那里有令人垂涎的山珍，也有令人回肠的美味。来自五湖四海的食材和调味品正在无时无刻的触动着亿万人的神经和味蕾。
</p>
<p>
中国人的传统饮食习俗是以植物性食料为主。主食是五谷，辅食是蔬菜，外加少量肉食。形成这一习俗的主要原因是中原地区以农业生产为主要的经济生产方式。但在不同阶层中，食物的配置
比例不尽相同。因此古代有称在位的皇帝为“肉食者”。
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="content">
<div class="cont_right">
<div class="jieshao">
<div class="title">
<h3>美食介绍</h3>
<p>当前位置：<a href="index.html">首页</a>>><a href="page1.html">美食介绍</a></p>
</div>
<div class="tuwen">
<p><b>烧腊</b></p>
<p>
烧腊包括烧鹅、乳鸽、乳猪以及一些卤水菜式。一般是先用秘制的酱汁淹制一段时间再放到炉里烤,烧鹅、乳猪皮脆,肥美,口味略带广东人喜爱的甜味。深井烧鹅、花田乳鸽是其中的“老字号”。
广东人逢年过节上香拜神都会带上乳猪,电影(视)开镜也喜切乳猪图吉利。卤水菜式相对清淡,卤水鹅掌(翼)、卤水鸭肾等。
</p>
<div class="photos">
<img src="images/jieshao1.jpg">
<img src="images/jieshao2.jpg">
</div>
<p><b>鸭血粉丝</b></p>
<p>
鸭血粉丝是南京著名的风味小吃，由鸭血、鸭肠、鸭肝等加入鸭汤和粉丝制成。口感鲜香，爽口宜人。鸭肉蛋白质含量高，脂肪含量低，特别适合老年人食用。
</p>
<p><b>热干面</b></p>
<p>
热干面是湖北省武汉市的汉族特色小吃，原本是武汉的特色美食，在湖北很多地方都十分受欢迎。随着湖北人在其他省市地人口增多，武汉热干面也在许多地方都能见到，是诸多人喜欢的面食之一。
</p>
<div class="photos">
<img src="images/jieshao3.jpg">
<img src="images/jieshao4.jpg">
</div>
<p><b>驴肉火烧</b></p>
<p>
河间驴肉火烧是河北省河间市汉族传统名吃。凉肉夹饼，再加以驴冻，驴冻入口即化。河间驴肉火烧的味道是外热里爽，清爽醇香。
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="content">
<div class="cont_right">
<div class="caixi">
<div class="title">
<h3>中华菜系</h3>
<p>当前位置：<a href="index.html">首页</a>>><a href="page2.html">中华菜系</a></p>
</div>
<div class="list">
<ul>
<li>
<div class="pic">
<img src="images/caixi1.jpg">
<h3>川菜</h3>
</div>
<p>
川菜即四川菜肴，是中国特色传统的四大菜系之一、中国八大菜系之一、中华料理集大成者。川菜取材广泛，调味多变，菜式多样，口味清鲜醇浓并重，以善用麻辣调味著称，
并以其别具一格的烹调方法和浓郁的地方风味，融会了东南西北各方的特点，博采众家之长，善于吸收，善于创新，享誉中外。
</p>
<p>
经典菜品：鱼香肉丝、宫保鸡丁、水煮鱼、水煮肉片、夫妻肺片、辣子鸡丁、麻婆豆腐、回锅肉、四川火锅、麻辣香水鱼等等。
</p>
</li>
<li>
<div class="pic">
<img src="images/caixi2.jpg">
<h3>鲁菜</h3>
</div>
<p>
鲁菜是中国八大菜系之一，宋代以后成为“北食”的代表。明、清两代，鲁菜为宫廷御膳主体，对北京、天津、河北和东北各地的影响较大。因为山东的地理原因，鲁菜与中国其他三大菜系相比，
选料范围相对较少。但这造就了鲁菜选料考究，技艺精湛，烹饪费时的特点。鲁菜分为济南菜和胶东菜两大派，另有独居风格的孔府菜。
</p>
<p>
经典菜品：一品豆腐、葱烧海参、三丝鱼翅、白扒四宝、糖醋黄河鲤鱼、九转大肠、油爆双脆、扒原壳鲍鱼、油焖大虾等。
</p>
</li>
<li>
<div class="pic">
<img src="images/caixi3.jpg">
<h3>粤菜</h3>
</div>
<p>
粤菜即广东菜，是中国传统四大菜系、八大菜系之一，发源于岭南。粤菜由广州菜、潮州菜（也称潮汕菜）、东江菜（也称客家菜）三种地方风味组成，三种风味各具特色。在世界各地粤菜与法国大餐齐名，
由于广东海外华侨数量占全国六成，因此世界各国的中菜馆多数是以粤菜为主。
</p>
<p>
经典菜品：白切鸡、蜜汁叉烧、皮脆烧肉、红烧乳鸽、上汤焗龙虾、白灼象拔蚌、鲍汁扣辽参、椰汁冰糖燕窝等等。
</p>
</li>
<li>
<div class="pic">
<img src="images/caixi4.jpg">
<h3>苏菜</h3>
</div>
<p>
苏菜，中国汉族四大菜系之一，八大菜系之一，由于苏菜和浙菜相近，因此和浙菜统称江浙菜系。主要以金陵菜、淮扬菜、苏锡菜、徐海菜等地方菜组成。它起始于南北朝、唐宋时，当时经济发展，
推动饮食业的繁荣，苏菜成为“南食”两大台柱之一。
</p>
<p>
经典菜品：清汤火方、鸭包鱼翅、松鼠桂鱼、西瓜鸡、盐水鸭、扬州鹅、高邮麻鸭、南京香肚、如皋火腿等。
</p>
</li>
</ul>
</div>
</div>
</div>
<div class="content">
<div class="cont_right">
<div class="tupian">
<div class="title" id="meishi">
<h3>美食图片</h3>
<p>当前位置：<a href="index.html">首页</a>>><a href="page3.html">美食图片</a></p>
</div>
<div class="list">
<img src="images/tupian1.jpg" />
<img src="images/tupian2.jpg" />
<img src="images/tupian3.jpg" />
<img src="images/tupian4.jpg" />
<img src="images/tupian5.jpg" />
<img src="images/tupian6.jpg" />
</div>
</div>
</div>
</div>
<div class="content">
<div class="cont_right">
<div class="tupian">
<div class="title">
<h3>在线留言</h3>
<p>当前位置：<a href="index.html">首页</a>>><a href="page3.html">在线留言</a></p>
</div>
<div class="liuyan">
<p><label>性别：</label>男<input type="radio" name="radio" value="男" />女<input type="radio"
name="radio" checked value="女"></p>
<p><label>称呼：</label><input type="text" class="text"></p>
<p><label>电话：</label><input type="text" class="text"></p>
<p><label>邮箱：</label> <select>
<option>2812828882@qq.com</option>
<option>1298182818@163.com</option>
</select></p>
<p><label>内容：</label><textarea></textarea></p>
<input type="button" value="留言" class="btn">
</div>
</div>
</div>
</div>
<div class="footer">
<div class="copyright">
<p>版权所有© 中华饮食文化</p>
</div>
</div>
</body>
<script src="./js/banner.js"></script>
</html>
总结
设计一个样式美观又人性化的网页，除了具备扎实的专业知识，还需具备美学和人机工程学等相关知识，优秀的网页应具备以下几个特点:
1.简洁实用
尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；
2.使用方便
要满足使用者的要求，网页适合使用，显示出其功能美；
3.整体性好
围绕一个统一的目标设计，强调整体的功能性；
4.形象突出
尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。
5.交互式强
发挥网络的优势，想方设法使每个使用者都参与到其中来。
更多推荐
【关注作者|获取更多源码|优质文章】；Web前端网页制作、大学生毕业设计辅导、期末大作业辅导、模板源码、技术咨询等，有兴趣的联系我!
更多优质博客文章、网页模板点击以下链接查阅：
html+css+js网页设计 优快云博客
html+css+js网页设计 优快云博客
html+css+js网页设计 优快云博客
关注作者，点赞收藏博文，获取更多源码，Thanks！5000+完整代码，主题涵盖30+种类型:
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
