大学生HTML5期末作业 Web前端网页制作 html5+css3+js html+css+js网页设计 美食 一带一路美食地图1个页面
网页作品代码简单，可使用任意HTML辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
获取源码
1，访问该网站 https://download.youkuaiyun.com/download/qq_42431718/90219536
2，点击上方下载
目录1
项目视频
html+css+js网页设计 美食一带一路美食地图1个页面
页面展示
页面1
代码展示
<body>
<div class="agileinfo-dot">
<!-- banner -->
<div class="banner jarallax">
<div class="header">
<div class="container">
<nav class="navbar navbar-default">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="agileinfo-social-grids">
<ul>
<li><a href="#"><i class="fa fa-weibo"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-wechat"></i></a></li>
<li><a href="https://www.github.com/erchoc/"><i class="fa fa-github"></i></a></li>
</ul>
</div>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse nav-wil" id="bs-example-navbar-collapse-1">
<nav>
<ul class="nav navbar-nav">
<li class="active"><a href="index.html">Home</a></li>
<li><a href="#about" class="scroll">About</a></li>
<li><a href="#services" class="scroll">Services</a></li>
<li><a href="#menu" class="scroll">Menu</a></li>
<li><a href="#team" class="scroll">Team</a></li>
<li><a href="#food" class="scroll">Foods</a></li>
<li><a href="#mail" class="scroll">Contact</a></li>
</ul>
</nav>
</div>
<!-- /.navbar-collapse -->
</nav>
</div>
</div>
<div class="w3layouts-banner-info">
<div class="container">
<div class="agileits-logo">
<h1><a href="#" data-toggle="modal" data-target="#mainMap"> 一带一路地图 </a></h1>
<p> “一带一路”不是卖产品，不是卖技术，更不是输出产能，而应该是打造可循环、可复制、可盈利的生态系统。 </p>
</div>
</div>
</div>
</div>
<!-- //banner -->
</div>
<!-- about -->
<div class="about" id="about">
<div class="container">
<div class="w3l-heading">
<h2> 关于我们 </h2>
</div>
<div class="w3-about-grids">
<div class="col-md-5 w3-about-left">
<h5> 冬瓜理工大学萌新团队 </h5>
<p> 我们有一百多号人，其中做技术开发的只有我一个。漂亮妹子好多好多，作为有追求的新生代架构师，我当然希望妹子们能够稀饭我。
<span>
我们有一百多号人，其中做技术开发的只有我一个。漂亮妹子好多好多，作为有追求的新生代架构师，我当然希望妹子们能够稀饭我。我们有一百多号人，其中做技术开发的只有我一个。漂亮妹子好多好多，作为有追求的新生代架构师，我当然希望妹子们能够稀饭我。
</span>
</p>
<div class="w3l-button">
<a href="#" data-toggle="modal" data-target="#myModal"> 查看更多 </a>
</div>
</div>
<div class="col-md-2 w3ls-about-img1">
</div>
<div class="col-md-5 w3ls-about-img2">
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<!-- //about -->
<!-- modal -->
<div class="modal about-modal fade" id="mainMap" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title"> 一带一路规划图 </h4>
</div>
<div class="modal-body">
<div class="agileits-w3layouts-info">
<img src="images/mainMap.png" alt="一带一路规划图" />
</div>
</div>
</div>
</div>
</div>
<div class="modal about-modal fade" id="myModal1" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title"> 模态框示例 </h4>
</div>
<div class="modal-body">
<div class="agileits-w3layouts-info">
<img src="images/2.jpg" alt="" />
<p>
“一带一路”倡议，唤起了沿线国家的历史记忆。古代丝绸之路是一条贸易之路，更是一条友谊之路。
<br> 在中华民族同其他民族的友好交往中，逐步形成了以和平合作、开放包容、互学互鉴、互利共赢为特征的丝绸之路精神。
<br> 在新的历史条件下，我们提出“一带一路”倡议，就是要继承和发扬丝绸之路精神，把我国发展同沿线国家发展结合起来，把中国梦同沿线各国人民的梦想结合起来，赋予古代丝绸之路以全新的时代内涵。
</p>
</div>
</div>
</div>
</div>
</div>
<div class="modal about-modal fade" id="myModal2" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title"> 模态框示例 </h4>
</div>
<div class="modal-body">
<div class="agileits-w3layouts-info">
<img src="images/2.jpg" alt="" />
<p>
“一带一路”倡议，唤起了沿线国家的历史记忆。古代丝绸之路是一条贸易之路，更是一条友谊之路。
<br> 在中华民族同其他民族的友好交往中，逐步形成了以和平合作、开放包容、互学互鉴、互利共赢为特征的丝绸之路精神。
<br> 在新的历史条件下，我们提出“一带一路”倡议，就是要继承和发扬丝绸之路精神，把我国发展同沿线国家发展结合起来，把中国梦同沿线各国人民的梦想结合起来，赋予古代丝绸之路以全新的时代内涵。
</p>
</div>
</div>
</div>
</div>
</div>
<div class="modal about-modal fade" id="myModal3" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title"> 模态框示例 </h4>
</div>
<div class="modal-body">
<div class="agileits-w3layouts-info">
<img src="images/2.jpg" alt="" />
<p>
“一带一路”倡议，唤起了沿线国家的历史记忆。古代丝绸之路是一条贸易之路，更是一条友谊之路。
<br> 在中华民族同其他民族的友好交往中，逐步形成了以和平合作、开放包容、互学互鉴、互利共赢为特征的丝绸之路精神。
<br> 在新的历史条件下，我们提出“一带一路”倡议，就是要继承和发扬丝绸之路精神，把我国发展同沿线国家发展结合起来，把中国梦同沿线各国人民的梦想结合起来，赋予古代丝绸之路以全新的时代内涵。
</p>
</div>
</div>
</div>
</div>
</div>
<!-- //modal -->
<!-- services -->
<div class="services" id="services">
<div class="container">
<div class="w3l-heading">
<h3> 顶级服务 </h3>
</div>
<div class="services-grids">
<div class="col-md-3 wthree-services-grid">
<div class="wthree-services-icon">
<i class="fa fa-cutlery" aria-hidden="true"></i>
</div>
<div class="wthree-services-info">
<h5> 顶级餐具 </h5>
<p> 我们提供各种配套服务，有最优质的餐具和最舒适的住宿环境，可以让您在舌尖美食之旅体验别致风味。真的是别致的风味哦！你永远无法体会到我唯一凑够测试字数而花费的脑细胞有多少颗。</p>
</div>
</div>
<div class="col-md-3 wthree-services-grid">
<div class="wthree-services-icon">
<i class="fa fa-glass" aria-hidden="true"></i>
</div>
<div class="wthree-services-info">
<h5> 顶级餐具 </h5>
<p> 我们提供各种配套服务，有最优质的餐具和最舒适的住宿环境，可以让您在舌尖美食之旅体验别致风味。真的是别致的风味哦！你永远无法体会到我唯一凑够测试字数而花费的脑细胞有多少颗。</p>
</div>
</div>
<div class="col-md-3 wthree-services-grid">
<div class="wthree-services-icon">
<i class="fa fa-user" aria-hidden="true"></i>
</div>
<div class="wthree-services-info">
<h5> 顶级餐具 </h5>
<p> 我们提供各种配套服务，有最优质的餐具和最舒适的住宿环境，可以让您在舌尖美食之旅体验别致风味。真的是别致的风味哦！你永远无法体会到我唯一凑够测试字数而花费的脑细胞有多少颗。</p>
</div>
</div>
<div class="col-md-3 wthree-services-grid">
<div class="wthree-services-icon">
<i class="fa fa-asterisk" aria-hidden="true"></i>
</div>
<div class="wthree-services-info">
<h5> 顶级餐具 </h5>
<p> 我们提供各种配套服务，有最优质的餐具和最舒适的住宿环境，可以让您在舌尖美食之旅体验别致风味。真的是别致的风味哦！你永远无法体会到我唯一凑够测试字数而花费的脑细胞有多少颗。</p>
</div>
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
<!-- //services -->
<!-- gallery -->
<div class="gallery" id="menu">
<div class="container">
<div class="w3l-heading">
<h3> 舌尖美食 </h3>
</div>
<div class="bs-example bs-example-tabs" role="tabpanel" data-example-id="togglable-tabs">
<ul id="myTab" class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home-main" id="home-tab" role="tab" data-toggle="tab" aria-controls="home-main" aria-expanded="true"> 所有美食 </a></li>
<li role="presentation"><a href="#learning" role="tab" id="learning-tab" data-toggle="tab" aria-controls="learning"> 第一分类 </a></li>
<li role="presentation"><a href="#playing" role="tab" id="playing-tab" data-toggle="tab" aria-controls="playing"> 第二分类 </a></li>
<li role="presentation"><a href="#painting" role="tab" id="painting-tab" data-toggle="tab" aria-controls="painting"> 第三分类 </a></li>
</ul>
<div id="myTabContent" class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="home-main" aria-labelledby="home-tab">
<div class="w3_tab_img">
<div class="col-sm-3 w3_tab_img_left">
<div class="demo">
<a class="cm-overlay" href="images/g1.jpg">
<figure class="imghvr-shutter-in-out-diag-2"><img src="images/g1.jpg" alt=" " class="img-responsive" />
</figure>
</a>
</div>
<div class="agile-gallery-info">
<h5> 佳肴菜名 </h5>
<p> 来自：新加坡 </p>
</div>
</div>
<div class="col-sm-3 w3_tab_img_left">
<div class="demo">
<a class="cm-overlay" href="images/g2.jpg">
<figure class="imghvr-shutter-in-out-diag-2"><img src="images/g2.jpg" alt=" " class="img-responsive" />
</figure>
</a>
</div>
<div class="agile-gallery-info">
<h5> 佳肴菜名 </h5>
<p> 来自：新加坡 </p>
</div>
</div>
<div class="col-sm-3 w3_tab_img_left">
<div class="demo">
<a class="cm-overlay" href="images/g3.jpg">
<figure class="imghvr-shutter-in-out-diag-2"><img src="images/g3.jpg" alt=" " class="img-responsive" />
</figure>
</a>
</div>
<div class="agile-gallery-info">
<h5> 佳肴菜名 </h5>
<p> 来自：新加坡 </p>
</div>
</div>
<div class="col-sm-3 w3_tab_img_left">
<div class="demo">
<a class="cm-overlay" href="images/g4.jpg">
<figure class="imghvr-shutter-in-out-diag-2"><img src="images/g4.jpg" alt=" " class="img-responsive" />
</figure>
</a>
</div>
<div class="agile-gallery-info">
<h5> 佳肴菜名 </h5>
<p> 来自：新加坡 </p>
</div>
</div>
<div class="col-sm-3 w3_tab_img_left">
<div class="demo">
<a class="cm-overlay" href="images/g5.jpg">
<figure class="imghvr-shutter-in-out-diag-2"><img src="images/g5.jpg" alt=" " class="img-responsive" />
</figure>
</a>
</div>
<div class="agile-gallery-info">
<h5> 佳肴菜名 </h5>
<p> 来自：新加坡 </p>
</div>
</div>
<div class="col-sm-3 w3_tab_img_left">
<div class="demo">
<a class="cm-overlay" href="images/g6.jpg">
<figure class="imghvr-shutter-in-out-diag-2"><img src="images/g6.jpg" alt=" " class="img-responsive" />
</figure>
</a>
</div>
<div class="agile-gallery-info">
<h5> 佳肴菜名 </h5>
<p> 来自：新加坡 </p>
</div>
</div>
<div class="col-sm-3 w3_tab_img_left">
<div class="demo">
<a class="cm-overlay" href="images/g7.jpg">
<figure class="imghvr-shutter-in-out-diag-2"><img src="images/g7.jpg" alt=" " class="img-responsive" />
</figure>
</a>
</div>
<div class="agile-gallery-info">
<h5> 佳肴菜名 </h5>
<p> 来自：新加坡 </p>
</div>
</div>
<div class="col-sm-3 w3_tab_img_left">
<div class="demo">
<a class="cm-overlay" href="images/g1.jpg">
<figure class="imghvr-shutter-in-out-diag-2"><img src="images/g1.jpg" alt=" " class="img-responsive" />
</figure>
</a>
</div>
<div class="agile-gallery-info">
<h5> 佳肴菜名 </h5>
<p> 来自：新加坡 </p>
</div>
</div>
<div class="clearfix"> </div>
</div>
</div>
<div role="tabpanel" class="tab-pane fade" id="learning" aria-labelledby="learning-tab">
<div class="w3_tab_img">
<div class="col-sm-3 w3_tab_img_left">
<div class="demo">
<a class="cm-overlay" href="images/g2.jpg">
<figure class="imghvr-shutter-in-out-diag-2"><img src="images/g2.jpg" alt=" " class="img-responsive">
</figure>
</a>
</div>
<div class="agile-gallery-info">
<h5> 佳肴菜名 </h5>
<p> 来自：新加坡 </p>
</div>
</div>
<div class="col-sm-3 w3_tab_img_left">
<div class="demo">
<a class="cm-overlay" href="images/g3.jpg">
<figure class="imghvr-shutter-in-out-diag-2"><img src="images/g3.jpg" alt=" " class="img-responsive">
</figure>
</a>
</div>
<div class="agile-gallery-info">
<h5> 佳肴菜名 </h5>
<p> 来自：新加坡 </p>
</div>
</div>
<div class="clearfix"> </div>
</div>
</div>
<div role="tabpanel" class="tab-pane fade" id="playing" aria-labelledby="playing-tab">
<div class="w3_tab_img">
<div class="col-sm-3 w3_tab_img_left">
<div class="demo">
<a class="cm-overlay" href="images/g4.jpg">
<figure class="imghvr-shutter-in-out-diag-2"><img src="images/g4.jpg" alt=" " class="img-responsive">
</figure>
</a>
</div>
<div class="agile-gallery-info">
<h5> 佳肴菜名 </h5>
<p> 来自：新加坡 </p>
</div>
</div>
<div class="col-sm-3 w3_tab_img_left">
<div class="demo">
<a class="cm-overlay" href="images/g5.jpg">
<figure class="imghvr-shutter-in-out-diag-2"><img src="images/g5.jpg" alt=" " class="img-responsive">
</figure>
</a>
</div>
<div class="agile-gallery-info">
<h5> 佳肴菜名 </h5>
<p> 来自：新加坡 </p>
</div>
</div>
<div class="col-sm-3 w3_tab_img_left">
<div class="demo">
<a class="cm-overlay" href="images/g6.jpg">
<figure class="imghvr-shutter-in-out-diag-2"><img src="images/g6.jpg" alt=" " class="img-responsive">
</figure>
</a>
</div>
<div class="agile-gallery-info">
<h5> 佳肴菜名 </h5>
<p> 来自：新加坡 </p>
</div>
</div>
<div class="col-sm-3 w3_tab_img_left">
<div class="demo">
<a class="cm-overlay" href="images/g7.jpg">
<figure class="imghvr-shutter-in-out-diag-2"><img src="images/g7.jpg" alt=" " class="img-responsive">
</figure>
</a>
</div>
<div class="agile-gallery-info">
<h5> 佳肴菜名 </h5>
<p> 来自：新加坡 </p>
</div>
</div>
<div class="clearfix"> </div>
</div>
</div>
<div role="tabpanel" class="tab-pane fade" id="painting" aria-labelledby="painting-tab">
<div class="w3_tab_img">
<div class="col-sm-3 w3_tab_img_left">
<div class="demo">
<a class="cm-overlay" href="images/g1.jpg">
<figure class="imghvr-shutter-in-out-diag-2"><img src="images/g1.jpg" alt=" " class="img-responsive">
</figure>
</a>
</div>
<div class="agile-gallery-info">
<h5> 佳肴菜名 </h5>
<p> 来自：新加坡 </p>
</div>
</div>
<div class="col-sm-3 w3_tab_img_left">
<div class="demo">
<a class="cm-overlay" href="images/g2.jpg">
<figure class="imghvr-shutter-in-out-diag-2"><img src="images/g2.jpg" alt=" " class="img-responsive">
</figure>
</a>
</div>
<div class="agile-gallery-info">
<h5> 佳肴菜名 </h5>
<p> 来自：新加坡 </p>
</div>
</div>
<div class="col-sm-3 w3_tab_img_left">
<div class="demo">
<a class="cm-overlay" href="images/g2.jpg">
<figure class="imghvr-shutter-in-out-diag-2"><img src="images/g2.jpg" alt=" " class="img-responsive">
</figure>
</a>
</div>
<div class="agile-gallery-info">
<h5> 佳肴菜名 </h5>
<p> 来自：新加坡 </p>
</div>
</div>
<div class="col-sm-3 w3_tab_img_left">
<div class="demo">
<a class="cm-overlay" href="images/g2.jpg">
<figure class="imghvr-shutter-in-out-diag-2"><img src="images/g2.jpg" alt=" " class="img-responsive">
</figure>
</a>
</div>
<div class="agile-gallery-info">
<h5> 佳肴菜名 </h5>
<p> 来自：新加坡 </p>
</div>
</div>
<div class="col-sm-3 w3_tab_img_left">
<div class="demo">
<a class="cm-overlay" href="images/g3.jpg">
<figure class="imghvr-shutter-in-out-diag-2"><img src="images/g3.jpg" alt=" " class="img-responsive">
</figure>
</a>
</div>
<div class="agile-gallery-info">
<h5> 佳肴菜名 </h5>
<p> 来自：新加坡 </p>
</div>
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
<script src="js/jquery.tools.min.js"></script>
<script src="js/jquery.mobile.custom.min.js"></script>
<script src="js/jquery.cm-overlay.js"></script>
<script>
$(document).ready(function() {
$('.cm-overlay').cmOverlay();
});
</script>
</div>
</div>
<!-- //gallery -->
<!-- team -->
<div class="team" id="team">
<div class="container">
<div class="w3l-heading team-heading">
<h3> 创业团队 </h3>
</div>
<div class="team-row">
<div class="col-md-3 team-grids">
<div class="team-img">
<img class="img-responsive" src="images/t1.jpg" alt="">
<div class="captn">
<div class="captn-top">
<h4>Edwards Bitkin</h4>
<p> 国际大酒店一流厨师行了吧，总之就是会做菜 </p>
</div>
<div class="wthree-social-grids">
<ul>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-github"></i></a></li>
<li><a href="#"><i class="fa fa-weibo"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-md-3 team-grids">
<div class="team-img">
<img class="img-responsive" src="images/t2.jpg" alt="">
<div class="captn">
<div class="captn-top">
<h4>Mark Sophia</h4>
<p> 国际大酒店一流厨师行了吧，总之就是会做菜 </p>
</div>
<div class="wthree-social-grids">
<ul>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-github"></i></a></li>
<li><a href="#"><i class="fa fa-weibo"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-md-3 team-grids">
<div class="team-img">
<img class="img-responsive" src="images/t3.jpg" alt="">
<div class="captn">
<div class="captn-top">
<h4>Michel Herman</h4>
<p> 国际大酒店一流厨师行了吧，总之就是会做菜 </p>
</div>
<div class="wthree-social-grids">
<ul>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-github"></i></a></li>
<li><a href="#"><i class="fa fa-weibo"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-md-3 team-grids">
<div class="team-img">
<img class="img-responsive" src="images/t4.jpg" alt="">
<div class="captn">
<div class="captn-top">
<h4>Daniel Erchoc</h4>
<p> 国际大酒店一流厨师行了吧，总之就是会做菜 </p>
</div>
<div class="wthree-social-grids">
<ul>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-github"></i></a></li>
<li><a href="#"><i class="fa fa-weibo"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
<!-- //team -->
<!-- food -->
<div class="food" id="food">
<div class="container">
<div class="w3l-heading">
<h3> 美食简介 </h3>
</div>
<div class="w3-agile-food-grids">
<div class="col-md-3 agileits-food-grid">
<div class="food-info">
<a href="#" data-toggle="modal" data-target="#myModal"><img src="images/b1.jpg" alt=""></a>
<div class="food-caption">
<h4><a href="#" data-toggle="modal" data-target="#myModal"> 示例示例 </a></h4>
<p>By <a href="#">Bitkin</a> 于2016年5月 </p>
</div>
</div>
</div>
<div class="col-md-3 agileits-food-grid">
<div class="food-info">
<a href="#" data-toggle="modal" data-target="#myModal"><img src="images/b2.jpg" alt=""></a>
<div class="food-caption">
<h4><a href="#" data-toggle="modal" data-target="#myModal"> 示例示例 </a></h4>
<p>By <a href="#">Herman</a> 于2016年9月 </p>
</div>
</div>
</div>
<div class="col-md-3 agileits-food-grid">
<div class="food-info">
<a href="#" data-toggle="modal" data-target="#myModal"><img src="images/b3.jpg" alt=""></a>
<div class="food-caption">
<h4><a href="#" data-toggle="modal" data-target="#myModal"> 示例示例 </a></h4>
<p>By <a href="#">Erchoc</a> 于2017年2月 </p>
</div>
</div>
</div>
<div class="col-md-3 agileits-food-grid">
<div class="food-info">
<a href="#" data-toggle="modal" data-target="#myModal"><img src="images/b4.jpg" alt=""></a>
<div class="food-caption">
<h4><a href="#" data-toggle="modal" data-target="#myModal"> 示例示例 </a></h4>
<p>By <a href="#">Sophia</a> 于2017年4月 </p>
</div>
</div>
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
<!-- food -->
<!-- contact -->
<div class="contact" id="mail">
<div class="container">
<div class="w3l-heading">
<h3> 联系我们 </h3>
</div>
<div class="address">
<div class="col-sm-4 address-grids">
<h4> 地址： </h4>
<p> 南昌市广兰大道418号
<br>
<span> 东华理工大学 </span>
</p>
</div>
<div class="col-sm-4 address-grids">
<h4> 手机: </h4>
<p>+86 181 7401 9147(杨)</p>
<p>+86 130 7792 6807(张)</p>
</div>
<div class="col-sm-4 address-grids">
<h4> 电子邮件：</h4>
<p><a href="mailto:jikehui2018@gmail.com">jikehui2018@gmail.com</a></p>
<p><a href="mailto:erchoc@163.com">erchoc@163.com</a></p>
</div>
<div class="clearfix"> </div>
</div>
<div class="contact-form">
<h4> 联系表单 </h4>
<form action="#" method="post">
<div class="fields-grid">
<div class="styled-input agile-styled-input-top">
<input type="text" name="Full Name" required="">
<label> 您的称呼 </label>
<span></span>
</div>
<div class="styled-input agile-styled-input-top">
<input type="text" name="Phone" required="">
<label> 联系方式 </label>
<span></span>
</div>
<div class="styled-input">
<input type="text" name="Email" required="">
<label> 电子邮件 </label>
<span></span>
</div>
<div class="styled-input">
<input type="text" name="Subject" required="">
<label> 发送主题 </label>
<span></span>
</div>
<div class="clearfix"> </div>
</div>
<div class="styled-input textarea-grid">
<textarea name="Message" required=""></textarea>
<label> 信息正文 </label>
<span></span>
</div>
<input type="submit" value="发送">
</form>
</div>
</div>
</div>
<!-- //contact -->
<!-- newsletter -->
<div class="newsletter">
<div class="container">
<div class="col-sm-6 newsletter-left">
<h5>Subscribe to our email newsletter to receive updates</h5>
</div>
<div class="col-sm-6 newsletter-right">
<form action="#" method="post">
<input type="text" placeholder=" 邮箱订阅 " name="Subscribe" required="">
<button class="btn1"><i class="fa fa-paper-plane" aria-hidden="true"></i></button>
</form>
</div>
<div class="clearfix"> </div>
</div>
</div>
<!-- //newsletter -->
<!-- footer -->
<footer>
<div class="container">
<div class="copyright">
<p>Copyright © 2017.Company All rights reserved.<a target="_blank" href="https://erchoc.github.io"> erchoc.github.io </a></p>
</div>
</div>
</footer>
<!-- //footer -->
<script src="js/jarallax.js"></script>
<script src="js/SmoothScroll.min.js"></script>
<script type="text/javascript">
/* init Jarallax */
$('.jarallax').jarallax({
speed: 0.5,
imgWidth: 1366,
imgHeight: 768
})
</script>
<script src="js/responsiveslides.min.js"></script>
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<!-- here stars scrolling icon -->
<script type="text/javascript">
$(document).ready(function() {
var defaults = {
containerID: 'toTop', // fading element id
containerHoverID: 'toTopHover', // fading element hover id
scrollSpeed: 1200,
easingType: 'linear'
};
$().UItoTop({
easingType: 'easeOutQuart'
});
});
</script>
<!-- //here ends scrolling icon -->
</body>```
## 总结
设计一个样式美观又人性化的网页，除了具备扎实的专业知识，还需具备美学和人机工程学等相关知识，优秀的网页应具备以下几个特点:
### 1.简洁实用
尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；
#### 2.使用方便
要满足使用者的要求，网页适合使用，显示出其功能美；
### 3.整体性好
围绕一个统一的目标设计，强调整体的功能性；
### 4.形象突出
尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。
### 5.交互式强
发挥网络的优势，想方设法使每个使用者都参与到其中来。
更多推荐
【关注作者|获取更多源码|优质文章】；Web前端网页制作、大学生毕业设计辅导、期末大作业辅导、模板源码、技术咨询等，有兴趣的联系我!
更多优质博客文章、网页模板点击以下链接查阅：
[html+css+js网页设计 优快云博客](https://blog.youkuaiyun.com/qq_42431718)
[html+css+js网页设计 优快云博客](https://blog.youkuaiyun.com/qq_42431718)
[html+css+js网页设计 优快云博客](https://blog.youkuaiyun.com/qq_42431718)
关注作者，点赞收藏博文，获取更多源码，Thanks！5000+完整代码，主题涵盖30+种类型:
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
