大学生HTML5期末作业 Web前端网页制作 html5+css3+js html+css+js网页设计 美食 美食网3个页面
大学生HTML5期末作业 Web前端网页制作 html5+css3+js html+css+js网页设计 美食 美食网3个页面
网页作品代码简单，可使用任意HTML辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
获取源码
1，访问该网站 https://download.csdn.net/download/qq_42431718/90215979
2，点击上方下载
目录1
项目视频
html+css+js网页设计 美食 美食网3个页面
页面展示
页面1
页面2
页面3
代码展示
<body>
<div class="top">
<div class="top_content">
<ul>
<li><a href="#">联系我们</a></li>
<li><a href="#" onclick="AddFavorite(window.location,document,title)"> 加入收藏</a></li>
<li><a href="#" onclick="SetHome(window.location)" >设为首页</a></li>
</ul>
</div>
</div> <!--top结束-->
<div class="wrap">
<div class="logo">
<div class="logo_left">
<a href="index.html"><img src="img/logo.jpg" alt="慕课网" /></a>
</div>
<div class="logo_right">
<img src="img/tel.jpg" alt="客服"/>联系客服QQ：<span class="tel">123-456-789</span>
</div>
</div><!--logo结束-->
<div class="nav">
<div class="nav_left"></div>
<div class="nav_mid">
<div class="nav_mid_left">
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="news.html">菜谱</a></li>
<li><a href="list.html">食材</a></li>
<li><a href="list.html">健康</a></li>
<li><a href="list.html">专题</a></li>
<li><a href="list.html">社区</a></li>
</ul>
</div>
<div class="nav_mid_right">
<form action="" method="post">
<input type="text" class="search_text" />
</form>
</div>
</div><!--nav mid结束-->
<div class="nav_right"></div>
</div> <!--nav结束-->
<div class="ad" id="picBox">
<div class="loading"><img src="img/loading.gif" alt="图片加载中" /> </div>
<div class="pic"><!--图片必须在div下，class必须为pic-->
<ul>
<li><a href="news.html"><img src="img/ad2.jpg" /></a> </li>
<li><a href="news.html"><img src="img/ad3.jpg" /></a> </li>
<li><a href="news.html"><img src="img/ad4.jpg" /></a> </li>
</ul>
</div>
</div><!--ad结束 -->
<div class="main">
<div class="news">
<div class="title">
<h2 class="title_left">专题专区</h2>
<span class="title_right"><a href="list.html">More>></a></span>
</div><!-- title结束 -->
<div class="pic_news">
<img src="img/news.jpg" /><h2><a href="news.html">[食材专题] 春食野菜香</a></h2><p>活动时间：3月1日-4月1日</br>获奖公布时间：4月4日
</br><a href="news.html">Learn More>></a></p>
</div><!-- pic_news结束 -->
<div class="news_list">
<ul>
<li><span>2017-03-24</span><a href="news.html">[主题美食] 家乡的味道</a></li>
<li><span>2017-03-22</span><a href="news.html">[经典美食] 2017吃货年</a></li>
<li><span>2017-03-21</span><a href="news.html">[烘焙专题] 烘焙大赛</a></li>
<li><span>2017-03-20</span><a href="news.html">[食材专题] 寻找冬季最养生的美食</a></li>
<li><span>2017-03-20</span><a href="news.html">[厨电专题] 微波炉的花样“吃”法</a></li>
</ul>
</div><!-- news_list结束 -->
</div><!--news结束 -->
<div class="course">
<div class="title">
<h2 class="title_left">菜谱大全</h2><span class="title_right"><a href="news.html">More>></a></span>
</div> <!-- title结束 -->
<div class="course_pic">
<img src="img/css.jpg" /><h2><a href="news.html">萌萌哒小熊面包</a></h2><p>最近爱上做各种各样的超级可爱的面包，准备将它们组成一个萌宠系列。这次做的是萌翻天的小熊面包，用的是学厨的12连杯马芬模具。用蛋糕模做面包，造型更加独特。</p>
</div> <!-- course_pic结束 -->
<div class="course_type">
<ul>
<li>热菜</li>
<li>凉菜</li>
<li>烘焙</li>
<li>西餐</li>
</ul>
</div> <!-- course_type结束 -->
</div><!--course结束 -->
<div class="sidebar">
<div class="video">
<div class="title"><h2 class="title_left">视频教程</h2></div>
<div class="video_content"><!-- width=220 height=140 -->
<embed src='http://player.youku.com/player.php/sid/XMTc3NjE4NjU1Ng==/v.swf' allowFullScreen='true' quality='high' width='220' height='140' align='middle' allowScriptAccess='always' type='application/x-shockwave-flash'></embed>
</div>
</div><!-- video结束 -->
<div class="sidebar_ad">
<img src="img/app.jpg" />
</div><!-- sidebar_ad结束 -->
</div><!--sidebar结束 -->
</div><!--main结束 -->
</div><!--wrap结束-->
<div class="copyright">
<div class="copyright_content">
<ul>
<li><a href="#">关于</a><ul>
<li><a href="#">品牌故事</a></li>
<li><a href="#">联系我们</a></li>
<li><a href="#">加入我们</a></li>
<li><a href="#">版权声明</a></li>
</ul>
</li>
<li><a href="#">菜系</a><ul>
<li><a href="#">鲁菜</a></li>
<li><a href="#">川菜</a></li>
<li><a href="#">粤菜</a></li>
<li><a href="#">苏菜</a></li>
</ul>
</li>
<li><a href="#">留言</a><ul>
<li><a href="#">新浪微博</a></li>
<li><a href="#">腾讯微博</a></li>
<li><a href="#">企业微信</a></li>
<li><a href="#">QQ空间</a></li>
</ul>
</li>
<li><a href="#">关注</a><ul>
<li><a href="#">意见反馈</a></li>
<li><a href="#">问题留言</a></li>
<li><a href="#">媒体联络</a></li>
<li><a href="#">在线客服</a></li>
</ul>
</li>
<li><a href="#"><img src="img/weixin.png" /> 微信关注</a>
<ul>
<li><img src="img/qrcode.jpg"></li>
</ul>
</li>
</ul>
</div>
</div>
</body>
总结
设计一个样式美观又人性化的网页，除了具备扎实的专业知识，还需具备美学和人机工程学等相关知识，优秀的网页应具备以下几个特点:
1.简洁实用
尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；
2.使用方便
要满足使用者的要求，网页适合使用，显示出其功能美；
3.整体性好
围绕一个统一的目标设计，强调整体的功能性；
4.形象突出
尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。
5.交互式强
发挥网络的优势，想方设法使每个使用者都参与到其中来。
更多推荐
【关注作者|获取更多源码|优质文章】；Web前端网页制作、大学生毕业设计辅导、期末大作业辅导、模板源码、技术咨询等，有兴趣的联系我!
更多优质博客文章、网页模板点击以下链接查阅：
html+css+js网页设计 CSDN博客
html+css+js网页设计 CSDN博客
html+css+js网页设计 CSDN博客
关注作者，点赞收藏博文，获取更多源码，Thanks！5000+完整代码，主题涵盖30+种类型:
上一篇： 基于PHP的购物系统
下一篇： 大学生HTML5期末