大学生HTML5期末作业 Web前端网页制作 html5+css3+js html+css网页设计 美食 美食美客模版2个页面
网页作品代码简单，可使用任意HTML辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
获取源码
1，访问该网站 https://download.youkuaiyun.com/download/qq_42431718/90208776
2，点击上方下载
目录1
项目视频
html+css网页设计 美食 美食美客模版2个页面
页面展示
页面1
页面2
代码展示
<body>
<!--顶部 B-->
<div class="top">
<div class="center top_c">你好，欢迎来到美食美客网！</div>
</div>
<!--顶部 E-->
<!--logo B-->
<div class="logo">
<div class="center l_c">
<div class="l_left fl">
<h1>
<a href="#">美食美客</a>
</h1>
</div>
<div class="l_center fl">
<input class="text fl" type="text" placeholder="美食美客">
<input class="btn fl" type="button" value="搜索">
</div>
<div class="l_right fr">
<ul>
<li><a href="">QQ注册</a></li>
<li><a href="">微博登陆</a></li>
<li><a href="">注册</a></li>
<li><input type="button" value="登陆"></li>
</ul>
</div>
</div>
</div>
<!--logo E-->
<!-- 首页导航 B-->
<div class="nav">
<div class="center nav_c">
<ul>
<li><a class="cRed" href="#">首页</a></li>
<li><a href="#">菜谱大全</a></li>
<li><a href="#">饮食健康</a></li>
<li><a href="#">家居馆</a></li>
<li><a href="#">美食达人</a></li>
<li><a href="#">讨论组</a></li>
<li><a href="#">手机版下载</a></li>
</ul>
</div>
</div>
<!-- 首页导航 E -->
<!-- 首页banner B -->
<div class="banner">
<h2 class="h2title">今日早餐推荐：给心爱的TA做顿元气满满的早餐吧</h2>
<ul class="clearfix">
<li>
<div>
<a href="#"><img src="images/IU.png" alt=""></a>
</div>
<div class="des">
<p class="p1">美味IU</p>
<p class="p2">韩国著名演员</p>
</div>
</li>
<li>
<div>
<a href="#"><img src="images/IU.png" alt=""></a>
</div>
<div class="des">
<p class="p1">美味IU</p>
<p class="p2">韩国著名演员</p>
</div>
</li>
<li>
<div>
<a href="#"><img src="images/IU.png" alt=""></a>
</div>
<div class="des">
<p class="p1">美味IU</p>
<p class="p2">韩国著名演员</p>
</div>
</li>
<li>
<div>
<a href="#"><img src="images/IU.png" alt=""></a>
</div>
<div class="des">
<p class="p1">美味IU</p>
<p class="p2">韩国著名演员</p>
</div>
</li>
</ul>
<div class="arrow">
<a href="#" class="a_left"></a>
<a href="#" class="a_right"></a>
</div>
</div>
<!-- 首页banner E -->
<!-- 首页搜索 B -->
<div class="search">
<div class="s_center">
<input type="text" class="txt fl" value="请输入食材">
<input type="button" class="btn fl" value="搜索">
</div>
</div>
<!-- 首页搜索 E -->
<!-- 首页菜单 B -->
<div class="arrow_pos">
<div class="menu center">
<h2 class="h2title">5月，立夏需养心<a class="more" href="#">更多菜单 ></a></h2>
<ul class="img clearfix">
<li>
<div>
<a href="#">
<img src="images/hand.png" alt="">
</a>
</div>
<div class="word">
<p class="p1">四月水果当季尝</p>
<p class="p2">你舍得错过当季这些甜美的果实吗？</p>
</div>
</li>
<li>
<div>
<a href="#">
<img src="images/hand.png" alt="">
</a>
</div>
<div class="word">
<p class="p1">四月水果当季尝</p>
<p class="p2">你舍得错过当季这些甜美的果实吗？</p>
</div>
</li>
<li>
<div>
<a href="#">
<img src="images/hand.png" alt="">
</a>
</div>
<div class="word">
<p class="p1">四月水果当季尝</p>
<p class="p2">你舍得错过当季这些甜美的果实吗？</p>
</div>
</li>
</ul>
</div>
<div class="arrow">
<a href="#" class="a1"></a>
<a href="#" class="a2"></a>
</div>
</div>
<!-- 首页菜单 E -->
<!-- 首页食材 B -->
<div class="food center">
<h2 class="h2title">5月，健脾去湿热<a class="more" href="#">更多菜单 ></a></h2>
<ul class="f_nav clearfix">
<li class="bg_red">
<a class="white" href="#">水果</a>
</li>
<li><a href="">蔬菜</a></li>
<li><a href="">五谷</a></li>
<li><a href="">三鲜</a></li>
</ul>
<ul class="f_img clearfix">
<li>
<a href="#">
<img src="images/qian.png" alt="">
</a>
<span>千夜</span>
</li>
<li>
<a href="#">
<img src="images/qian.png" alt="">
</a>
<span>千夜</span>
</li>
<li>
<a href="#">
<img src="images/qian.png" alt="">
</a>
<span>千夜</span>
</li>
<li>
<a href="#">
<img src="images/qian.png" alt="">
</a>
<span>千夜</span>
</li>
<li>
<a href="#">
<img src="images/qian.png" alt="">
</a>
<span>千夜</span>
</li>
<li>
<a href="#">
<img src="images/qian.png" alt="">
</a>
<span>千夜</span>
</li>
</ul>
</div>
<!-- 首页食材 E -->
<!-- 复制上面的 B -->
<div class="arrow_pos">
<div class="menu center">
<h2 class="h2title">5月，立夏需养心<a class="more" href="#">更多菜单 ></a></h2>
<ul class="img clearfix">
<li>
<div>
<a href="#">
<img src="images/hand.png" alt="">
</a>
</div>
<div class="word">
<p class="p1">四月水果当季尝</p>
<p class="p2">你舍得错过当季这些甜美的果实吗？</p>
</div>
</li>
<li>
<div>
<a href="#">
<img src="images/hand.png" alt="">
</a>
</div>
<div class="word">
<p class="p1">四月水果当季尝</p>
<p class="p2">你舍得错过当季这些甜美的果实吗？</p>
</div>
</li>
<li>
<div>
<a href="#">
<img src="images/hand.png" alt="">
</a>
</div>
<div class="word">
<p class="p1">四月水果当季尝</p>
<p class="p2">你舍得错过当季这些甜美的果实吗？</p>
</div>
</li>
</ul>
</div>
<div class="arrow">
<a href="#" class="a1"></a>
<a href="#" class="a2"></a>
</div>
</div>
<div class="arrow_pos">
<div class="menu center">
<h2 class="h2title">5月，立夏需养心<a class="more" href="#">更多菜单 ></a></h2>
<ul class="img clearfix">
<li>
<div>
<a href="#">
<img src="images/hand.png" alt="">
</a>
</div>
<div class="word">
<p class="p1">四月水果当季尝</p>
<p class="p2">你舍得错过当季这些甜美的果实吗？</p>
</div>
</li>
<li>
<div>
<a href="#">
<img src="images/hand.png" alt="">
</a>
</div>
<div class="word">
<p class="p1">四月水果当季尝</p>
<p class="p2">你舍得错过当季这些甜美的果实吗？</p>
</div>
</li>
<li>
<div>
<a href="#">
<img src="images/hand.png" alt="">
</a>
</div>
<div class="word">
<p class="p1">四月水果当季尝</p>
<p class="p2">你舍得错过当季这些甜美的果实吗？</p>
</div>
</li>
</ul>
</div>
<div class="arrow">
<a href="#" class="a1"></a>
<a href="#" class="a2"></a>
</div>
</div>
<div class="arrow_pos">
<div class="menu center">
<h2 class="h2title">5月，立夏需养心<a class="more" href="#">更多菜单 ></a></h2>
<ul class="img clearfix">
<li>
<div>
<a href="#">
<img src="images/hand.png" alt="">
</a>
</div>
<div class="word">
<p class="p1">四月水果当季尝</p>
<p class="p2">你舍得错过当季这些甜美的果实吗？</p>
</div>
</li>
<li>
<div>
<a href="#">
<img src="images/hand.png" alt="">
</a>
</div>
<div class="word">
<p class="p1">四月水果当季尝</p>
<p class="p2">你舍得错过当季这些甜美的果实吗？</p>
</div>
</li>
<li>
<div>
<a href="#">
<img src="images/hand.png" alt="">
</a>
</div>
<div class="word">
<p class="p1">四月水果当季尝</p>
<p class="p2">你舍得错过当季这些甜美的果实吗？</p>
</div>
</li>
</ul>
</div>
<div class="arrow">
<a href="#" class="a1"></a>
<a href="#" class="a2"></a>
</div>
</div>
<!-- 复制上面的 E -->
<!--foot B-->
<div class="foot">
<div class="f_border">
<b class="b1"></b>
<b class="b2"></b>
<b class="b3"></b>
<b class="b4"></b>
<div class="center">
<div class="f_left fl">
<ul>
<li>中国，最大的菜谱库<span class="fz14"><span class="fz14 col">800000</span>篇</span></li>
<li>每月，用户访问数量<span class="fz14"><span class="fz14 col">20000000</span>次</span></li>
<li>每年，菜谱被浏览量<span class="fz14"><span class="fz14 col">36000000000</span>次</span></li>
<li>现在，这些数字还在不断地额增长着，欢迎您来一起使用美食美客</li>
</ul>
</div>
<div class="f_right fr">
<ul>
<li>
<a href="#">
<s></s>
<span>点击进入<br/>美食美客网</span>
</a>
</li>
<li>
<a href="#">
<s></s>
<span>点击进入<br/>美食美客网</span>
</a>
</li>
<li>
<a href="#">
<s></s>
<span>点击进入<br/>美食美客网</span>
</a>
</li>
<li>
<a href="#">
<s></s>
<span>点击进入<br/>美食美客网</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!--foot E-->
</body>
总结
设计一个样式美观又人性化的网页，除了具备扎实的专业知识，还需具备美学和人机工程学等相关知识，优秀的网页应具备以下几个特点:
1.简洁实用
尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；
2.使用方便
要满足使用者的要求，网页适合使用，显示出其功能美；
3.整体性好
围绕一个统一的目标设计，强调整体的功能性；
4.形象突出
尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。
5.交互式强
发挥网络的优势，想方设法使每个使用者都参与到其中来。
更多推荐
【关注作者|获取更多源码|优质文章】；Web前端网页制作、大学生毕业设计辅导、期末大作业辅导、模板源码、技术咨询等，有兴趣的联系我!
更多优质博客文章、网页模板点击以下链接查阅：
html+css+js网页设计 优快云博客
html+css+js网页设计 优快云博客
html+css+js网页设计 优快云博客
关注作者，点赞收藏博文，获取更多源码，Thanks！5000+完整代码，主题涵盖30+种类型:
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
