大学生HTML5期末作业 Web前端网页制作 html5+css3+js html+css+js网页设计 美食 易班 美食街5个页面
网页作品代码简单，可使用任意HTML辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
获取源码
1，访问该网站 https://download.youkuaiyun.com/download/qq_42431718/90219790
2，点击上方下载
目录1
项目视频
html+css+js网页设计 美食 易班 美食街5个页面
页面展示
页面1
页面2
页面3
页面4
页面5
代码展示
<body>
<header id="header">
<nav class="navbar navbar-inverse" role="banner">
<div class="container1">
<div class="navbar-header">
<a class="navbar-brand" href="http://www.yiban.cn" target="_blank" title="点击返回易班首页"><img src="images/images_1/易班logo.jpg" alt="logo"></a>
</div>
<!-- <span>美食街</span> -->
<div class="collapse navbar-collapse navbar-right">
<ul class="nav navbar-nav">
<li class='active'><a href="index.html">首頁</a></li>
<li ><a href="today.html">今日推荐</a></li>
<li ><a href="huoguo.html">火锅系列</a></li>
<li ><a href="cafeteria.html">自助餐厅</a></li>
<li ><a href="snack.html">爽口小吃</a></li>
<li ><a href="404.html">電話：18228075165</a></li>
</ul>
</div>
</div><!--/.container-->
</nav><!--/nav-->
</header><!--/header-->
<section id="about-us">
<div class="container">
<div id="about-slider">
<div id="carousel-slider" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators visible-xs">
<li data-target="#carousel-slider" data-slide-to="0" class="active"></li>
<li data-target="#carousel-slider" data-slide-to="1"></li>
<li data-target="#carousel-slider" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="images/header/未标题-5.jpg" class="img-responsive" alt="">
</div>
<div class="item">
<img src="images/header/未标题-4.jpg" class="img-responsive" alt="">
</div>
</div>
<a class="left carousel-control hidden-xs" href="#carousel-slider" data-slide="prev">
<i class="fa fa-angle-left">«</i>
</a>
<a class=" right carousel-control hidden-xs"href="#carousel-slider" data-slide="next">
<i class="fa fa-angle-right">»</i>
</a>
</div> <!--/#carousel-slider-->
</div><!--/#about-slider-->
<!-- Our Skill -->
<div class="skill-wrap clearfix">
<div class="center wow fadeInDown center1">
<h2>易班 美食街</h2>
<p class="lead">歡迎您来到易班美食街<br> 味在成都，希望您能到我们的美食街品尝品尝。再次謝謝</p>
</div>
<div class="row">
<div class="col-sm-3">
<div class="sinlge-skill wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="300ms">
<a href="today.html">
<div class="joomla-skill">
<p><em>川菜系列</em></p>
<p>一菜一格,百菜百味</p>
</div>
</a>
</div>
</div>
<div class="col-sm-3">
<div class="sinlge-skill wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="600ms">
<a href="huoguo.html">
<div class="html-skill">
<p><em>火锅系列</em></p>
<p>愈演愈烈,辣气十足</p>
</div>
</a>
</div>
</div>
<div class="col-sm-3">
<div class="sinlge-skill wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="900ms">
<a href="snack.html">
<div class="css-skill">
<p><em>小吃系列</em></p>
<p>浓香四溢,意犹未尽</p>
</div>
</a>
</div>
</div>
<div class="col-sm-3">
<div class="sinlge-skill wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="1200ms">
<a href="cafeteria.html">
<div class="wp-skill">
<p><em>特产系列</em></p>
<p>麻辣鲜香,垂涎欲滴</p>
</div>
</a>
</div>
</div>
</div>
</div><!--/.our-skill-->
</div>
</section><!-- about-us -->
<section id="bottom">
<div class="container wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="600ms">
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="widget">
<h3>川菜系列</h3>
<ul>
<li>水煮鱼</li>
<li>酱猪蹄</li>
<li>鱼香肉丝</li>
<li>鸡胸脯肉丝</li>
<li>宫保鸡丁</li>
<li>夫妻肺片</li>
<li>麻婆豆腐</li>
<li>火锅肉</li>
<li>东坡肘子</li>
<li>粉蒸牛肉</li>
<li style="cursor: pointer;">更多... ∨</li>
</ul>
</div>
</div><!--/.col-md-3-->
<div class="col-md-3 col-sm-6">
<div class="widget">
<h3>火锅系列</h3>
<ul>
<li>蜀九香火锅酒楼</li>
<li>巴蜀大宅门火锅</li>
<li>老码头火锅</li>
<li>十七码头老灶火锅</li>
<li>味蜀吾老火锅</li>
<li style="cursor: pointer;">更多... ∨</li>
</ul>
</div>
</div><!--/.col-md-3-->
<div class="col-md-3 col-sm-6">
<div class="widget">
<h3>小吃系列</h3>
<ul>
<li>担担面</li>
<li>韩包子</li>
<li>钟水饺</li>
<li>川北凉粉</li>
<li>糖油果子</li>
<li>蛋烘糕</li>
<li>宋嫂面</li>
<li style="cursor: pointer;">更多... ∨</li>
</ul>
</div>
</div><!--/.col-md-3-->
<div class="col-md-3 col-sm-6">
<div class="widget">
<h3>特产系列</h3>
<ul>
<li>张飞牛肉</li>
<li>川式豆干</li>
<li>脆嫩金针菇</li>
<li>杏鲍菇</li>
<li>香辣脆笋</li>
<li>宋世成核桃软糖</li>
<li style="cursor: pointer;">更多... ∨</li>
</ul>
</div>
</div><!--/.col-md-3-->
</div>
</div>
</section><!--/#bottom-->
<footer id="footer" class="midnight-blue">
<div class="container">
<div class="row">
<div class="col-sm-6">
© 2016 <a target="_blank" href="index.html" title="成都美食">成都各大美食排行榜<br>
联系电话:18228075165</a>
</div>
<div class="col-sm-6">
<ul class="pull-right">
<li><a href="">︽ 返回顶部</a></li>
</ul>
</div>
</div>
</div>
</footer><!--/#footer-->
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.prettyPhoto.js"></script>
<script src="js/jquery.isotope.min.js"></script>
<script src="js/wow.min.js"></script>
<script type="text/javascript">
$('.carousel').carousel()
</script>
<script src="js/main.js"></script>
<script src="js/app.js"></script>
<!-- <script src="js/jquery.slideBox.min.js" type="text/javascript"></script> -->
</body>
总结
设计一个样式美观又人性化的网页，除了具备扎实的专业知识，还需具备美学和人机工程学等相关知识，优秀的网页应具备以下几个特点:
1.简洁实用
尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；
2.使用方便
要满足使用者的要求，网页适合使用，显示出其功能美；
3.整体性好
围绕一个统一的目标设计，强调整体的功能性；
4.形象突出
尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。
5.交互式强
发挥网络的优势，想方设法使每个使用者都参与到其中来。
更多推荐
【关注作者|获取更多源码|优质文章】；Web前端网页制作、大学生毕业设计辅导、期末大作业辅导、模板源码、技术咨询等，有兴趣的联系我!
更多优质博客文章、网页模板点击以下链接查阅：
html+css+js网页设计 优快云博客
html+css+js网页设计 优快云博客
html+css+js网页设计 优快云博客
关注作者，点赞收藏博文，获取更多源码，Thanks！5000+完整代码，主题涵盖30+种类型:
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
