大学生HTML5期末作业 Web前端网页制作 html5+css3+js html+css+js网页设计 企业官网 南昌地铁20个页面
网页作品代码简单，可使用任意HTML辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
获取源码
1，访问该网站 https://download.csdn.net/download/qq_42431718/90216588
2，点击上方下载
目录1
项目视频
html+css+js网页设计 企业官网 南昌地铁20个页面
页面展示
页面1
页面2
页面3
页面4
页面5
页面6
页面7
页面8
页面9
页面10
页面11
页面12
页面13
页面14
页面15
页面16
页面17
页面18
页面19
页面20
代码展示
<body>
<div class="preloader"><span></span></div><!-- /.preloader -->
<div class="page-wrapper">
<div class="topbar-one">
<div class="container">
<div class="topbar-one__left">
<div class="topbar-one__social">
<a href="https://www.qq.com/"><i class="fa fa-qq"></i><!-- /.fa fa-facebook-f --></a>
<a href="https://weixin.qq.com/"><i class="fa fa-weixin"></i><!-- /.fa fa-twitter --></a>
<a href="https://weibo.com"><i class="fa fa-weibo"></i><!-- /.fa fa-rss --></a>
<a href="https://www.163.com/rss"><i class="fa fa-rss"></i><!-- /.fa fa-google-plus --></a>
<a href="https://twitter.com/"><i class="fa fa-twitter"></i><!-- /.fa fa-vimeo --></a>
</div><!-- /.topbar-one__social -->
</div><!-- /.topbar-one__left -->
<div class="topbar-one__right">
<div class="topbar-one__links">
<a href="#" class="topbar-one__search search-popup__toggler"><i class="indext-icon-Search"></i>
<!-- /.indext-icon-Search --></a><!-- /.topbar-one__search -->
<a href="#" class="topbar-one__cart"><i class="indext-icon-Bag"></i>
<!-- /.indext-icon-Bag --></a><!-- /.topbar-one__cart -->
<a href="#" class="topbar-one__link"><i class="indext-icon-clock"></i><!-- /.indext-icon-clock -->Mon -
Sun: 9.00 - 18.00</a><!-- /.topbar-one__link -->
<a href="#" class="topbar-one__link"><i class="indext-icon-envelope"></i>
<!-- /.indext-icon-envelope -->ncrtxx@163.com </a><!-- /.topbar-one__link -->
</div><!-- /.topbar-one__links -->
</div><!-- /.topbar-one__right -->
</div><!-- /.container -->
</div><!-- /.topbar-one -->
<header class="site-header site-header__header-one ">
<nav class="navbar navbar-expand-lg navbar-light header-navigation stricky">
<div class="container clearfix">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="logo-box">
<a class="navbar-brand" href="index.html">
<img src="images/resources/full-light-logo.png" width="185" class="main-logo" alt="Awesome Image" />
</a>
<button class="menu-toggler" data-target=".main-navigation">
<span class="fa fa-bars"></span>
</button>
</div><!-- /.logo-box -->
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="main-navigation">
<ul class=" navigation-box @@extra_class">
<li><a href="index.html">主页</a></li>
<li>
<a href="service.html">乘客服务</a>
<ul class="submenu">
<li><a href="map.html#dituContent">1号线地图</a></li>
<li><a href="map.html#dituContent1">2号线地图</a></li>
<li><a href="service.html#time">运营时间查询</a></li>
<li><a href="service-ticket.html">购票指南</a></li>
<li><a href="service.html#laf">失物招领</a></li>
<li><a href="service-notice.html">禁带物品公告</a></li>
</ul><!-- /.submenu -->
</li>
<li>
<a href="view.html">热门景点</a>
<ul class="submenu">
<li><a href="view.html#l-map">地图查询</a></li>
<li><a href="view.html#hot">热门景点</a></li>
</ul><!-- /.submenu -->
</li>
<li>
<a href="foods.html">美食购物</a>
<ul class="submenu">
<li><a href="foods.html">美食推荐</a></li>
<li><a href="shop.html">商圈购物</a></li>
</ul><!-- /.submenu -->
</li>
<li>
<a href="news.html">地铁新闻</a>
<ul class="submenu">
<li><a href="news.html">地铁新闻</a></li>
<li><a href="#.html">地铁视频</a></li>
</ul><!-- /.submenu -->
</li>
<li><a href="history.html">发展历史</a></li>
</ul>
</div><!-- /.navbar-collapse -->
<div class="right-side-box">
<a href="contact.html" class="thm-btn site-header__qoute-btn">联系我们 <i class="fa fa-long-arrow-right"></i>
</a><!-- /.thm-btn -->
</div><!-- /.right-side-box -->
</div>
<!-- /.container -->
</nav>
</header><!-- /.site-header -->
<section class="inner-banner">
<div class="container">
<div class="selected-solution">
<div>
<div class="swiper-container">
<div class="solution-cardlist swiper-wrapper">
<div class="col-sm-4 swiper-slide">
<div class="solution-card">
<img src="images/news/0-1.jpg" width="100%">
<h3>南昌地铁3号线全线“电通”</h3>
<p>5月31日晚，京东大道站变电所内最后一个断路器合闸，南昌地铁3号线实现全线“电通”。</p>
<span><a href="news0.html"><span class="arrow-more">了解详情</span></span></a>
</a>
</span>
</div>
</div>
<div class="col-sm-4 swiper-slide">
<div class="solution-card">
<img src="images/news/1.jpg" width="100%">
<h3>黄喜忠市长调研南昌轨道交通集团</h3>
<p>5月27日上午，市委副书记、市长黄喜忠一行赴南昌轨道交通集团调研并召开座谈会，市政府秘书长、党组成员吴长金，市政府研究室主任李旭晟陪同调研。集团全体领导班子成员参加座谈。</p>
<span><a href="news1.html"><span class="arrow-more">了解详情</span></span></a>
</a>
</span>
</div>
</div>
<div class="col-sm-4 swiper-slide">
<div class="solution-card">
<img src="images/news/1.png" width="100%">
<h3>集团召开2019年度乘客满意度调查报告会</h3>
<p>5月26日下午，集团召开2019年度乘客满意度调查报告会，集团党委副书记、总经理万先逵出席，集团党委委员、工会主席阎志强主持会议，副总经理贺斯进以及相关部门（单位）负责人参加。</p>
<span><a href="news2.html"><span class="arrow-more">了解详情</span></span></a>
</a>
</span>
</div>
</div>
<div class="col-sm-4 swiper-slide">
<div class="solution-card">
<img src="images/news/2.png" width="100%">
<h3>集团举办南昌地铁首届短视频大赛颁奖分享会暨新媒体内容制作培训活动</h3>
<p>5月26日下午，南昌地铁首届短视频大赛颁奖分享会暨新媒体内容制作培训活动在地铁大厦12楼职工之家举行。</p>
<span><a href="news3.html"><span class="arrow-more">了解详情</span></span></a>
</a>
</span>
</div>
</div>
<div class="col-sm-4 swiper-slide">
<div class="solution-card">
<img src="images/news/3.jpg" width="100%">
<h3>市轨道集团召开解放思想大讨论动员部署会</h3>
<p>5月7日上午，集团召开“彰显省会担当，我们怎么干”解放思想大讨论活动动员部署会。</p>
<span><a href="news4.html"><span class="arrow-more">了解详情</span></span></a>
</span>
</div>
</div>
<div class="col-sm-4 swiper-slide">
<div class="solution-card">
<img src="images/news/5.jpg" width="100%">
<h3>两手抓、两手硬、两手赢！ 集团举行2019年度总结表彰</h3>
<p>为表彰先进、鼓舞士气、增强信心，进一步统一思想、凝心聚力，3月30日，集团举行2019年度总结表彰暨2020年度工作部署大会。</p>
<span><a href="#"><span class="arrow-more">了解详情</span></span></a>
</span>
</div>
</div>
<div class="col-sm-4 swiper-slide">
<div class="solution-card">
<img src="images/news/7.jpg" width="100%">
<h3>集团召开“不忘初心、牢记使命”主题教育总结会议</h3>
<p>1月17日下午，集团召开“不忘初心、牢记使命”主题教育总结会议，集团党委书记、董事长李云峰作总结讲话。</p>
<span><a href="#"><span class="arrow-more">了解详情</span></span></a>
</span>
</div>
</div>
<div class="col-sm-4 swiper-slide">
<div class="solution-card">
<img src="images/news/6.jpg" width="100%">
<h3>南昌轨道交通集团召开2020年度工作务虚会</h3>
<p>1月10日至11日上午，集团召开2020年度工作务虚会，认真总结2019年工作，分析研判当前形势，精心谋划2020年工作思路。</p>
<span><a href="#"><span class="arrow-more">了解详情</span></span></a>
</a>
</span>
</div>
</div>
</div>
<div class="swiper-pagination solution-pagination"></div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
</div><!-- /.container -->
</section><!-- /.inner-banner -->
<section class="project-one project-one__home-two project-one__project-page-one" id="lulux">
<div class="container">
<div class="block-title text-center">
<p class="block-title__tag-line">Subway</p><!-- /.block-title__tag-line -->
<h3 class="block-title__title">鹭鹭带你乘地铁<br>
<span class="block-title__bold">南昌地铁推广视频
</span></h3><!-- /.block-title__title -->
</div><!-- /.block-title -->
<div class="col-lg-12 col-md-6 col-sm-12">
<video width="100%" height="500" controls autoplay>
<source src="images/news/鹭鹭行.mp4" type="video/mp4">
</video>
</div><!-- /.col-lg-4 -->
</div><!-- /.container -->
</section><!-- /.project-one project-one__home-two -->
<footer class="site-footer">
<div class="site-footer__brand">
<div class="container">
<div class="site-footer__brand-carousel owl-carousel owl-theme">
<div class="item">
<img src="images/brand/brand-1.jpg" alt="brand image">
</div><!-- /.item -->
<div class="item">
<img src="images/brand/brand-2.jpg" alt="brand image">
</div><!-- /.item -->
<div class="item">
<img src="images/brand/brand-3.jpg" alt="brand image">
</div><!-- /.item -->
<div class="item">
<img src="images/brand/brand-4.jpg" alt="brand image">
</div><!-- /.item -->
<div class="item">
<img src="images/brand/brand-5.jpg" alt="brand image">
</div><!-- /.item -->
<div class="item">
<img src="images/brand/brand-6.jpg" alt="brand image">
</div><!-- /.item -->
<div class="item">
<img src="images/brand/brand-7.jpg" alt="brand image">
</div><!-- /.item -->
<div class="item">
<img src="images/brand/brand-8.jpg" alt="brand image">
</div><!-- /.item -->
</div><!-- /.site-footer__brand-carousel -->
<hr class="site-footer__brand-hr">
</div><!-- /.container -->
</div><!-- /.site-footer__brand -->
<div class="site-footer__upper">
<div class="container">
<div class="row">
<div class="col-xl-6 col-lg-5">
<div class="footer-widget footer-widget__about-widget">
<a href="index.html"><img src="images/favicon/sub.jpg" width="185" class="footer-widget__logo" alt=""></a>
<p class="footer-widget__text">南昌轨道交通集团成立于2008年10月，现有员工4300余人，下设3个分公司、3个全资子公司、5个参股子公司。主要承担南昌市轨道交通建设的融资、建设、运营、管理职能。南昌地铁将按照“全力以赴保平安，科学调度抓进度，履职履责促管理，尽心尽力优质量，互相配合强协调，铁心硬手严问责”42个字管理理念，撸起袖子加油干，为建设一流现代化企业集团，实现南昌地铁新一轮大发展、大跨越努力奋斗！</p><!-- /.footer-widget__text -->
<div class="footer-widget__social">
<a href="#" class="fa fa-qq"></a>
<a href="#" class="fa fa-weixin"></a>
<a href="#" class="fa fa-weibo"></a>
<a href="#" class="fa fa-rss"></a>
</div><!-- /.footer-widget__social -->
</div><!-- /.footer-widget -->
</div><!-- /.col-lg-6 -->
<div class="col-xl-3 col-lg-3">
<div class="footer-widget footer-widget__links-widget">
<h2 class="footer-widget__title">快速链接</h2><!-- /.footer-widget__title -->
<ul class="footer-widget__links list-unstyled">
<li><a href="history.html"> 公司历史</a></li>
<li><a href="contact.html"> 联系我们</a></li>
<li><a href="service.html"> 乘客服务</a></li>
<li><a href="news.html"> 地铁新闻</a></li>
</ul><!-- /.footer-widget__links -->
</div><!-- /.footer-widget -->
</div><!-- /.col-lg-3 -->
<div class="col-xl-3 col-lg-4">
<div class="footer-widget footer-widget__contact-widget">
<h2 class="footer-widget__title">联系信息</h2><!-- /.footer-widget__title -->
<p class="footer-widget__text">江西省南昌市红谷滩新区 <br> 丰和中大道 地铁大厦
</p>
<!-- /.footer-widget__text -->
<p class="footer-widget__text">传真：0791-83892008</p><!-- /.footer-widget__text -->
<p class="footer-widget__text">客服热线：0791-96999</p><!-- /.footer-widget__text -->
<p class="footer-widget__text">邮箱：ncrtxx@163.com</p><!-- /.footer-widget__text -->
</div><!-- /.footer-widget -->
</div><!-- /.col-lg-3 -->
</div><!-- /.row -->
</div><!-- /.container -->
</div><!-- /.site-footer__upper -->
<div class="site-footer__bottom">
<div class="container">
<div class="site-footer__copy"><a href="#">Copyright </a> <i class="fa fa-copyright"></i> 2020 南昌地铁 版权所有</div>
<!-- /.site-footer__copy -->
<ul class="list-unstyled site-footer__links">
<li><a href="#">服务条款</a></li>
<li><a href="#">隐私政策</a></li>
</ul><!-- /.list-unstyled -->
</div><!-- /.container -->
</div><!-- /.site-footer__bottom -->
</footer><!-- /.site-footer -->
</div><!-- /.page-wrapper -->
<div class="search-popup">
<div class="search-popup__overlay custom-cursor__overlay">
<div class="cursor"></div>
<div class="cursor-follower"></div>
</div><!-- /.search-popup__overlay -->
<div class="search-popup__inner">
<form action="#" class="search-popup__form">
<input type="text" name="search" placeholder="在此输入搜索....">
<button type="submit"><i class="indext-icon-Search"></i></button>
</form>
</div><!-- /.search-popup__inner -->
</div><!-- /.search-popup -->
<a href="#" data-target="html" class="scroll-to-target scroll-to-top"><i class="indext-icon-arrow-up"></i></a>
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/bootstrap-datepicker.min.js"></script>
<script src="js/bootstrap-select.min.js"></script>
<script src="js/isotope.js"></script>
<script src="js/jquery.counterup.min.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/jquery.validate.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/TweenMax.min.js"></script>
<script src="js/waypoints.min.js"></script>
<script src="js/wow.min.js"></script>
<script src="js/nouislider.js"></script>
<script src="js/jquery.bootstrap-touchspin.min.js"></script>
<script src="js/theme.js"></script>
</body>```
## 总结
设计一个样式美观又人性化的网页，除了具备扎实的专业知识，还需具备美学和人机工程学等相关知识，优秀的网页应具备以下几个特点:
### 1.简洁实用
尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；
#### 2.使用方便
要满足使用者的要求，网页适合使用，显示出其功能美；
### 3.整体性好
围绕一个统一的目标设计，强调整体的功能性；
### 4.形象突出
尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。
### 5.交互式强
发挥网络的优势，想方设法使每个使用者都参与到其中来。
更多推荐
【关注作者|获取更多源码|优质文章】；Web前端网页制作、大学生毕业设计辅导、期末大作业辅导、模板源码、技术咨询等，有兴趣的联系我!
更多优质博客文章、网页模板点击以下链接查阅：
[html+css+js网页设计 CSDN博客](https://blog.csdn.net/qq_42431718)
[html+css+js网页设计 CSDN博客](https://blog.csdn.net/qq_42431718)
[html+css+js网页设计 CSDN博客](https://blog.csdn.net/qq_42431718)
关注作者，点赞收藏博文，获取更多源码，Thanks！5000+完整代码，主题涵盖30+种类型:
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
