大学生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/90229881
2，点击上方下载
目录1
项目视频
html+css+js网页设计 美食 美食模版1个页面带js
页面展示
页面1
代码展示
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/common.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<div class="public-header">
<div class="public-container clearfloat">
<div id="time"></div>
<div class="header-logo"><a href=""></a></div>
<ul class="header-nav clearfloat">
<li class="item"><a href="">Our Story</a></li>
<li class="item"><a href="">Menu</a></li>
<li class="item"><a href="">Reservations</a></li>
<li class="item"><a href="">News</a></li>
<li class="item"><a href="">Rviews</a></li>
</ul>
</div>
</div>
<div class="index-banner">
<div class="index-banner-bg"><img src="images/demo1.jpg" alt="banner"></div>
<div class="index-banner-text">
<div class="text-logo"></div>
<p class="text-info">
<i class="line line-l"></i>
<span>resto restaurant home page website template</span>
<i class="line line-r"></i>
</p>
</div>
</div>
<div class="index-menu">
<div class="menu-tips">The Menue</div>
<div class="public-container menu-list">
<ul class="clearfloat">
<li class="menu-item clearfloat">
<a class="title" href="">
<h4>Voluptate cillum fugiat.</h4>
<p class="comment">Cheese, tomato, mushrooms, onions.</p>
</a>
<div class="line"></div>
<div class="price">$50</div>
</li>
<li class="menu-item clearfloat">
<a class="title" href="">
<h4>Voluptate cillum fugiat.</h4>
<p class="comment">Cheese, tomato, mushrooms, onions.</p>
</a>
<div class="line"></div>
<div class="price">$50</div>
</li>
<li class="menu-item clearfloat">
<a class="title" href="">
<h4>Voluptate cillum fugiat.</h4>
<p class="comment">Cheese, tomato, mushrooms, onions.</p>
</a>
<div class="line"></div>
<div class="price">$50</div>
</li>
<li class="menu-item clearfloat">
<a class="title" href="">
<h4>Voluptate cillum fugiat.</h4>
<p class="comment">Cheese, tomato, mushrooms, onions.</p>
</a>
<div class="line"></div>
<div class="price">$50</div>
</li>
<li class="menu-item clearfloat">
<a class="title" href="">
<h4>Voluptate cillum fugiat.</h4>
<p class="comment">Cheese, tomato, mushrooms, onions.</p>
</a>
<div class="line"></div>
<div class="price">$50</div>
</li>
<li class="menu-item clearfloat">
<a class="title" href="">
<h4>Voluptate cillum fugiat.</h4>
<p class="comment">Cheese, tomato, mushrooms, onions.</p>
</a>
<div class="line"></div>
<div class="price">$50</div>
</li>
<li class="menu-item clearfloat">
<a class="title" href="">
<h4>Voluptate cillum fugiat.</h4>
<p class="comment">Cheese, tomato, mushrooms, onions.</p>
</a>
<div class="line"></div>
<div class="price">$50</div>
</li>
<li class="menu-item clearfloat">
<a class="title" href="">
<h4>Voluptate cillum fugiat.</h4>
<p class="comment">Cheese, tomato, mushrooms, onions.</p>
</a>
<div class="line"></div>
<div class="price">$50</div>
</li>
</ul>
</div>
<a href="" class="menu-more-btn">load more <span>|</span><span class="icon"></span></a>
</div>
<div class="public-container index-panel">
<div class="index-panel-header clearfloat">
<h3>Featured Dishes</h3>
<div class="line"></div>
<div class="btn-group">
<a href="" class="btn active"></a>
<a href="" class="btn"></a>
<a href="" class="btn"></a>
<a href="" class="btn"></a>
</div>
</div>
<div class="index-panel-body index-food-list">
<ul class="clearfloat">
<li class="food-item">
<a href="">
<img class="banner" src="images/food1.jpg">
<div class="name">Fugiat nulla sint <span class="price">$30</span></div>
<div class="start-bar">
<span class="star"></span>
<span class="star"></span>
<span class="star"></span>
<span class="star"></span>
<span class="star nostar"></span>
</div>
</a>
</li>
<li class="food-item">
<a href="">
<img class="banner" src="images/food1.jpg">
<div class="name">Fugiat nulla sint <span class="price">$30</span></div>
<div class="start-bar">
<span class="star"></span>
<span class="star"></span>
<span class="star"></span>
<span class="star"></span>
<span class="star nostar"></span>
</div>
</a>
</li>
<li class="food-item">
<a href="">
<img class="banner" src="images/food1.jpg">
<div class="name">Fugiat nulla sint <span class="price">$30</span></div>
<div class="start-bar">
<span class="star"></span>
<span class="star"></span>
<span class="star"></span>
<span class="star"></span>
<span class="star nostar"></span>
</div>
</a>
</li>
<li class="food-item"><a href="">
<img class="banner" src="images/food1.jpg">
<div class="name">Fugiat nulla sint <span class="price">$30</span></div>
<div class="start-bar">
<span class="star"></span>
<span class="star"></span>
<span class="star"></span>
<span class="star"></span>
<span class="star nostar"></span>
</div>
</a>
</li>
</ul>
</div>
</div>
<div class="public-container index-panel">
<div class="index-panel-header clearfloat">
<h3>The Gallery</h3>
<div class="line"></div>
</div>
<div class="index-panel-body index-pics">
<a class="pic-col pic-col-m"><img src="images/food2.jpg"></a>
<div class="pic-col pic-col-s">
<a class="pic-row"><img src="images/food3.jpg"></a>
<a class="pic-row"><img src="images/food4.jpg"></a>
</div>
<a class="pic-col pic-col-l"><img src="images/food5.jpg"></a>
</div>
</div>
<div class="public-footer">
<div class="public-container">
<div class="footer-col">
<p>New York Restaurant<br>3926 Anmoore Road<br>New York,NY 10014<br><a href="tel:718-749-1714">718-749-1714</a></p>
</div>
<div class="footer-col">
<p>France Restaurant<br>68, rue de la Couronne<br>75002 PARIS<br>02.94.23.69.56</p>
</div>
<div class="footer-col">
<a href="">blog</a>
<a href="">Careers</a>
<a href="">Privacy Policy</a>
<a href="">Contact</a>
</div>
<div class="footer-col">
<div class="footer-logo"></div>
<div class="footer-info">© All Rights Reserved 2014.<br> Find More at Pixelhint.com</div>
</div>
</div>
</div>
<!-- show time -->
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
总结
设计一个样式美观又人性化的网页，除了具备扎实的专业知识，还需具备美学和人机工程学等相关知识，优秀的网页应具备以下几个特点:
1.简洁实用
尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；
2.使用方便
要满足使用者的要求，网页适合使用，显示出其功能美；
3.整体性好
围绕一个统一的目标设计，强调整体的功能性；
4.形象突出
尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。
5.交互式强
发挥网络的优势，想方设法使每个使用者都参与到其中来。
更多推荐
【关注作者|获取更多源码|优质文章】；Web前端网页制作、大学生毕业设计辅导、期末大作业辅导、模板源码、技术咨询等，有兴趣的联系我!
更多优质博客文章、网页模板点击以下链接查阅：
html+css+js网页设计 优快云博客
html+css+js网页设计 优快云博客
html+css+js网页设计 优快云博客
关注作者，点赞收藏博文，获取更多源码，Thanks！5000+完整代码，主题涵盖30+种类型:
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
