大学生HTML5期末作业 Web前端网页制作 html5+css3+js html+css网页设计 美食 美食模版1个页面
网页作品代码简单，可使用任意HTML辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
获取源码
1，访问该网站 https://download.youkuaiyun.com/download/qq_42431718/90216916
2，点击上方下载
目录1
项目视频
html+css网页设计 美食 美食模版1个页面
页面展示
页面1
代码展示
<body>
<div class="public-header">
<div class="public-container">
<div class="header-logo"><a href=""></a></div>
<ul class="header-nav">
<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="banner-bg">
<img src="images/main.jpg" alt="">
</div>
<div class="banner-text">
<div class="main-text"></div>
<p class="info">resto restaurant home page website template</p>
</div>
</div>
<div class="index-menu">
<div class="public-container">
<div class="menu-header">
The Menu
</div>
<ul class="menu-content">
<li class="menu-item">
<div class="name">
<h4>Voluptate cillum fugiat.saaaaaaaaaaaaaaaaaaaaaaaaaaaaasaaaaaaaaaaaaaaa</h4>
<p class="tips">Cheese, tomato, mushrooms, onions.</p>
</div>
<div class="line"></div>
<div class="price">$50</div>
</li>
<li class="menu-item">
<div class="name">
<h4>Arcu pede enim justo.</h4>
<p class="tips">Tuna, Sweetcorn, Cheese.</p>
</div>
<div class="line"></div>
<div class="price">$45</div>
</li>
<li class="menu-item">
<div class="name">
<h4>Metus varius laoreet.</h4>
<p class="tips">Chicken, mozzarella cheese, onions.</p>
</div>
<div class="line"></div>
<div class="price">$62</div>
</li>
<li class="menu-item">
<div class="name">
<h4>Cras dapibussemper nisi.</h4>
<p class="tips">Pineapple, Minced Beef, Cheese.</p>
</div>
<div class="line"></div>
<div class="price">$32</div>
</li>
<li class="menu-item">
<div class="name">
<h4>Donec sodales magna.</h4>
<p class="tips">Tuna, Sweetcorn, Cheese.</p>
</div>
<div class="line"></div>
<div class="price">$44</div>
</li>
<li class="menu-item">
<div class="name">
<h4>Quam semper libero.</h4>
<p class="tips">Cheese, tomato, mushrooms, onions.</p>
</div>
<div class="line"></div>
<div class="price">$54</div>
</li>
<li class="menu-item">
<div class="name">
<h4>Saugue velit cursus.</h4>
<p class="tips">Tuna, Sweetcorn, Cheese.</p>
</div>
<div class="line"></div>
<div class="price">$34</div>
</li>
<li class="menu-item">
<div class="name">
<h4>Nam eget dui Etiam.</h4>
<p class="tips">Cheese, tomato, mushrooms, onions.</p>
</div>
<div class="line"></div>
<div class="price">$53</div>
</li>
</ul>
<a href="javascript:;" class="menu-more-btn">Learn More <span>|</span> <i class="icon"></i> </a>
</div>
</div>
<div class="index-panel public-container">
<div class="index-panel-header">
<div class="name">Featured Dishes</div>
<div class="line"></div>
<div class="btn-group">
<a href="javascript:;" class="btn active"></a>
<a href="javascript:;" class="btn"></a>
<a href="javascript:;" class="btn"></a>
<a href="javascript:;" class="btn"></a>
</div>
</div>
<ul class="index-panel-body">
<li class="panel-item">
<img src="images/dish-0.jpg" alt="">
<div class="dish-info">
<div class="dish-name">Fugiat nulla sint</div>
<div class="dish-price">$30</div>
</div>
<div class="star-range">
<a href="javascript:;" class="star-item"></a>
<a href="javascript:;" class="star-item"></a>
<a href="javascript:;" class="star-item"></a>
<a href="javascript:;" class="star-item"></a>
<a href="javascript:;" class="star-item"></a>
</div>
</li>
<li class="panel-item">
<img src="images/dish-0.jpg" alt="">
<div class="dish-info">
<div class="dish-name">Fugiat nulla sint</div>
<div class="dish-price">$30</div>
</div>
<div class="star-range">
<a href="javascript:;" class="star-item"></a>
<a href="javascript:;" class="star-item"></a>
<a href="javascript:;" class="star-item"></a>
<a href="javascript:;" class="star-item"></a>
<a href="javascript:;" class="star-item"></a>
</div>
</li>
<li class="panel-item">
<img src="images/dish-0.jpg" alt="">
<div class="dish-info">
<div class="dish-name">Fugiat nulla sint</div>
<div class="dish-price">$30</div>
</div>
<div class="star-range">
<a href="javascript:;" class="star-item"></a>
<a href="javascript:;" class="star-item"></a>
<a href="javascript:;" class="star-item"></a>
<a href="javascript:;" class="star-item"></a>
<a href="javascript:;" class="star-item"></a>
</div>
</li>
<li class="panel-item">
<img src="images/dish-0.jpg" alt="">
<div class="dish-info">
<div class="dish-name">Fugiat nulla sint</div>
<div class="dish-price">$30</div>
</div>
<div class="star-range">
<a href="javascript:;" class="star-item"></a>
<a href="javascript:;" class="star-item"></a>
<a href="javascript:;" class="star-item"></a>
<a href="javascript:;" class="star-item"></a>
<a href="javascript:;" class="star-item"></a>
</div>
</li>
</ul>
</div>
<div class="clear"></div>
<div class="index-panel public-container">
<div class="index-panel-header">
<div class="name">The Gallery</div>
<div class="line"></div>
</div>
</div>
<div class="public-footer">
<div class="public-container">
<!-- <ul class="footer-ul">
<li class="footer-col">
New York Restaurant <br>
3926 Anmoore Road<br>
New York, NY 10014<br>
<a href="tel:718-749-1714">718-749-1714</a>
</li>
<li class="footer-col">
France Restaurant<br>
68, rue de la Couronne<br>
75002 PARIS<br>
02.94.23.69.56
</li>
<li class="footer-col">
<a href="">Blog</a><br>
<a href="">Careers</a><br>
<a href="">Privacy Policy</a><br>
<a href="">Contact</a>
</li>
<li class="footer-col">
<div class="footer-logo"></div>
© All Rights Reserved 2014.<br>Find More at Pixelhint.com
</li>
</ul> -->
<div class="footer-ul">
<div class="footer-col">
New York Restaurant <br>
3926 Anmoore Road<br>
New York, NY 10014<br>
<a href="tel:718-749-1714">718-749-1714</a>
</div>
<div class="footer-col">
France Restaurant<br>
68, rue de la Couronne<br>
75002 PARIS<br>
02.94.23.69.56
</div>
<div class="footer-col">
<a href="">Blog</a><br>
<a href="">Careers</a><br>
<a href="">Privacy Policy</a><br>
<a href="">Contact</a>
</div>
<div class="footer-col">
<div class="footer-logo"></div>
© All Rights Reserved 2014.<br>Find More at Pixelhint.com
</div>
</div>
</div>
</div>
</body>
总结
设计一个样式美观又人性化的网页，除了具备扎实的专业知识，还需具备美学和人机工程学等相关知识，优秀的网页应具备以下几个特点:
1.简洁实用
尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；
2.使用方便
要满足使用者的要求，网页适合使用，显示出其功能美；
3.整体性好
围绕一个统一的目标设计，强调整体的功能性；
4.形象突出
尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。
5.交互式强
发挥网络的优势，想方设法使每个使用者都参与到其中来。
更多推荐
【关注作者|获取更多源码|优质文章】；Web前端网页制作、大学生毕业设计辅导、期末大作业辅导、模板源码、技术咨询等，有兴趣的联系我!
更多优质博客文章、网页模板点击以下链接查阅：
html+css+js网页设计 优快云博客
html+css+js网页设计 优快云博客
html+css+js网页设计 优快云博客
关注作者，点赞收藏博文，获取更多源码，Thanks！5000+完整代码，主题涵盖30+种类型:
扫一扫
1257
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
