本结业报告详细介绍了使用Angular框架开发的一个关于重庆市景点介绍的动态网站，包括首页、各景点介绍及实验报告等页面。在开发过程中，实现了CRUD功能，并运用CSS框架Bootstrap进行美化。虽然掌握了HTML5、CSS和JavaScript的基本应用，但项目效果仍有提升空间。
一、做的什么
任务一：构建一个静态或动态网站。以下要求中任选A或B，要求如下：
A. 静态网站
采用纯 CSS 或你喜欢的任何 CSS 框架如 Bootstrap、MDB、Tailwind 等构建一个主题自选且不少于5个页面（Web Page）的网站
B. 动态网站
使用任何一个前端框架如 Angular 等进行某应用（如英雄之旅、代办事项、图书管理等）的开发，需要有 CRUD 即增删改查功能并有一定的样式。
任务二：撰写结业报告，要求如下：
（1） 题目为《通信软件开发与应用》课程结业报告；
（2） 报告需阐述：做的什么、开发过程、遇到的问题、如何解决、哪些未解决、总结；
（3） 该报告以 Web 页面的形式呈现，从你上面开发的网站中可访问到。
二、设计主题：
重庆市景点的介绍
三、效果展示
首页
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>重庆</title>
<!-- MDB icon -->
<link rel="icon" href="img/mdb-favicon.ico" type="image/x-icon">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Material Design Bootstrap -->
<link rel="stylesheet" href="css/mdb.min.css">
<!-- Your custom styles (optional) -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- Main navigation -->
<header>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark fixed-top scrolling-navbar">
<div class="container">
<a class="navbar-brand" href="#">重庆</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02"
aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav mr-auto smooth-scroll">
<li class="nav-item">
<a class="nav-link" href="#intro">主页
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about" data-offset="90">简介</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#projects" data-offset="90">洪崖洞</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#gallery" data-offset="90">解放碑</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact" data-offset="90">实验报告</a>
</li>
</ul>
<!-- Social Icon -->
<ul class="navbar-nav nav-flex-icons">
<li class="nav-item">
<a class="nav-link">
<i class="fab fa-facebook-f light-green-text-2"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link">
<i class="fab fa-twitter light-green-text-2"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link">
<i class="fab fa-instagram light-green-text-2"></i>
</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Navbar -->
<!-- Full Page Intro -->
<div class="view">
<video class="video-intro" poster="https://mdbootstrap.com/img/Photos/Others/background.jpg" playsinline autoplay
muted loop>
<source src="https://mdbootstrap.com/img/video/animation.mp4" type="video/mp4">
</video>
<!-- Mask & flexbox options-->
<div class="mask rgba-gradient d-flex justify-content-center align-items-center">
<!-- Content -->
<div class="container px-md-3 px-sm-0">
<!--Grid row-->
<div class="row wow fadeIn">
<!--Grid column-->
<div class="col-md-12 mb-4 white-text text-center wow fadeIn">
<h3 class="display-3 font-weight-bold white-text mb-0 pt-md-5 pt-5">重庆</h3>
<hr class="hr-light my-4 w-75">
<h4 class="subtext-header mt-2 mb-4">行千里，致广大</h4>
<a href="#!" class="btn btn-rounded btn-outline-white">
<i class="fas fa-home "
></i> 重庆你好，世界你好
</a>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</div>
<!-- Content -->
</div>
<!-- Mask & flexbox options-->
</div>
<!-- Full Page Intro -->对重庆的介绍 
<main>
<!--Section: about-->
<section id="about" class="py-5">
<!-- Container -->
<div class="container">
<!-- Section heading -->
<h2 class="h1-responsive font-weight-bold text-center mb-5">重庆</h2>
<!-- Section description -->
<p class="lead grey-text text-center w-responsive mx-auto mb-5">重庆，简称“渝”，别称山城，是中华人民共和国省级行政区、直辖市、国家中心城市、
超大城市，国务院批复确定的中国重要的中心城市之一、长江上游地区经济中心、国家重要的现代制造业基地、西南地区综合交通枢纽 [1] 。总面积8.24万平方千米，辖26个区、8个县、4个自治县 [2-4] 。截至2020年11月1日零时，重庆市常住人口为3205.42万人。
</p>
<!-- Grid row -->
<div class="row">
<!-- Grid column -->
<!-- Grid column -->
<!-- Grid column -->
<div class="col-lg-7">
<!-- Grid row -->
<div class="row mb-3">
<!-- Grid column -->
<div class="col-1">
<i class="fas fa-share fa-lg purple-text"></i>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-xl-10 col-md-11 col-10">
<h5 class="font-weight-bold mb-3">别名</h5>
<p class="grey-text"> 山城 巴渝 渝州 雾都 桥都</p>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
<!-- Grid row -->
<div class="row mb-3">
<!-- Grid column -->
<div class="col-1">
<i class="fas fa-share fa-lg purple-text"></i>
</div>
<!-- Grid column
<!-- Grid column -->
<div class="col-xl-10 col-md-11 col-10">
<h5 class="font-weight-bold mb-3">位置</h5>
<p class="grey-text">重庆位于中国西南部、长江上游地区 地跨东经105°11'~110°11'、北纬28°10'~32°13'之间的青藏高原与长江中下游平原的过渡地带。 东邻湖北、
湖南，南靠贵州，西接四川，北连陕西； 辖区东西长470千米 南北宽450千米 幅员面积8.24万平方千米。</p>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
<!--Grid row-->
<div class="row">
<!-- Grid column -->
<div class="col-1">
<i class="fas fa-share fa-lg purple-text"></i>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-xl-10 col-md-11 col-10">
<h5 class="font-weight-bold mb-3">美食</h5>
<p class="grey-text mb-0"> 火锅 串串 麻辣烫 酸辣粉 小面</p>
</div>
<!-- Grid column
</div>
<!-- Grid row -->
</div>
<!--Grid column-->
</div>
<!-- Grid row -->
</div>
<!-- Container -->洪崖洞（景点）介绍
</section>
<!--Section: about-->
<!--Section: projects-->
<section id="projects" class="text-center py-5" style="background-color: #eee;">
<!-- Container -->
<div class="container">
<!-- Section heading -->
<h2 class="h1-responsive font-weight-bold mb-5">洪崖洞</h2>
<!-- Section description -->
<p class="grey-text w-responsive mx-auto mb-5">洪崖洞原名洪崖门，是古重庆城门之一，位于重庆市渝中区解放碑沧白路，地处长江、嘉陵江两江交汇的滨江地带，是兼具观光旅游、休闲度假等功能的旅游区 。
2006年，由重庆市人民政府总投资3.85亿元兴建而成 。
洪崖洞是重庆市重点景观工程，建筑面积4.6万平方米，主要景点由吊脚楼、仿古商业街等景观组成 。洪崖洞一共有11层，夜晚灯光从晚上6点开灯，
10点熄灯。可望吊脚群楼观洪崖滴翠，逛山城老街赏巴渝文化，烫山城火锅看两江汇流，品天下美食。形成了“一态、三绝、四街、八景”的经营形态，体现了巴渝文化休闲业态</p>
<!-- Grid row -->
<div class="row text-center">
<!-- Grid column -->
<div class="col-lg-4 col-md-12 mb-lg-0 mb-4">
<!--Featured image-->
<div class="card-body pb-2">
<h4 class="font-weight-bold my-3">发展历史</h4>
<p class="grey-text">战国时期（公元前314年），秦张仪灭巴国后修筑巴郡。三国蜀汉时期（公元226年），
李严主导了重庆历史上的第二次筑城。当时重庆人烟稀少，大规模开采山石困难，
所以为土城。南宋时期（1238年），彭大雅为抗击元兵第三次筑城，城墙由条石堆砌而成。明朝洪武四年（1371年），戴鼎第四次筑城，建九开八闭十七门，洪崖门为闭门。洪崖门原是一道开门，此地曾发生过一场惨烈战事。
据《新元史·汪世显传》记载：汪惟正于至元八年（1271年）与两川行枢密院合兵围重庆，夺洪崖门，获宋将何世贤.
</p>
<a class="btn btn-purple btn-sm"><i class="btn btn-purple btn-sm"><i class="fas fa-clone left"></i> 第一部分</a>
</div>
</div>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-lg-4 col-md-6 mb-md-0 mb-4">
<!--Featured image-->
<div class="mask rgba-white-slight"></div>
</a>
<!--Excerpt-->
<div class="card-body pb-2">
<h4 class="font-weight-bold my-3">发展历史</h4>
<p class="grey-text">清代重庆城区划分为二十九坊，城门外编为十五厢，洪崖门内地区属洪崖坊，
附廓之区为洪崖厢。洪崖门，历来为军事要塞，也是重庆城的一大胜景。洪崖洞在洪崖门外岩下崖边，是一个巨大石窟，
又叫洪岩洞、神仙洞。相传古代有个神仙，大号洪崖仙人。晋代学者郭璞曾写下“右拍洪崖肩”诗句，将其拟人化
</p>
<a class="btn btn-purple btn-sm"><i class="fas fa-clone left"></i> 第二部分</a>
</div>
</div>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-lg-4 col-md-6">
<!--Featured image-->
<div class="mask rgba-white-slight"></div>
</a>
<!--Excerpt-->
<div class="card-body pb-2">
<h4 class="font-weight-bold my-3">发展历史</h4>
<p class="grey-text">2002年，洪崖洞景观工程开始竞标。2003年，因规划需修建千厮门大桥，洪崖洞项目得移45米，
原设计方案重新调整。洪崖洞最初的预算有9000万元，屡改设计投资又追加2亿多元。2006年，总投资3.85亿元兴建而成，形成11楼和1楼走出去
都是马路的山城特色2020年，小天鹅集团研究决定，投入资金4580万元对洪崖洞景区进行全面改造和提档升级，除了外景观提档升级，打造互动景点也是本次改造的一大亮点，
主要包括“母城记忆沉浸式体验区”“巴渝十二景”科技文旅项目、“未来重庆”赛博朋客体验区、主题餐厅等项目
</p>
<a class="btn btn-purple btn-sm"><i class="fas fa-clone
left"></i> 第三部</a>
</div>
</div>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</div>
<!-- Container -->
解放碑信息（景点）
<section id="gallery" class="text-center py-5">
<!-- Container -->
<div class="container">
<!-- Section heading -->
<h2 class="h1-responsive font-weight-bold mb-5">解放碑</h2>
<!-- Section description -->
<p class="grey-text w-responsive mx-auto mb-5">抗战胜利纪功碑暨人民解放纪念碑，又名“抗战胜利纪功碑”、“人民解放纪念碑”，简称“解放碑”。
位于重庆市渝中区解放碑商业步行街中心地带，是抗战胜利的精神象征，是中国唯一一座纪念中华民族抗日战争胜利的纪念碑 。
抗战胜利纪功碑暨人民解放纪念碑于1946年10月31日动工，1947年8月落成。1950年10月1日，时任西南军政委员会主席刘伯承为“人民解放纪念碑”题写碑名。
该碑正面向北偏东，为八面柱体盔顶钢筋混凝土结构，碑通高27.5米，边长2.55米，碑内连地下共八层，设有旋梯达于碑顶，碑顶向街口的四面装有自鸣钟，碑台周围为花圃，总占地面积62平方米，
保护范围面积642平方米。该处是中国人民反法西斯战争取得胜利的象征，也是重庆解放及重庆市的象征
</nav>
<!-- Navbar -->
<!-- Full Page Intro -->
<div class="view">
<video class="video-intro" poster="https://mdbootstrap.com/img/Photos/Others/background.jpg" playsinline autoplay
muted loop>
<source src="https://mdbootstrap.com/img/video/animation.mp4" type="video/mp4">
</video>
<!-- Mask & flexbox options-->
<div class="mask rgba-gradient d-flex justify-content-center align-items-center">
<!-- Content -->
<div class="container px-md-3 px-sm-0">
<!--Grid row-->
<div class="row wow fadeIn">
<!--Grid column-->
<div class="col-md-12 mb-4 white-text text-center wow fadeIn">
</p>
</div>
</div>
</div>
<!-- Container -->实验报告和个人信息
</section>
<!--Section: gallery-->
<!--Section: contact-->
<section id="contact" class="py-5" style="background-color: #eee;">
<div class="container">
<!-- Section heading -->
<h2 class="h1-responsive font-weight-bold text-center mb-5">实验报告</h2>
<!-- Section description -->
<p class="text-center w-responsive mx-auto mb-5">本次课程了解和掌握如何利用HTML5来构建Web页面（网页），
用CSS（bootstrap库）来美化Web页面（网页），以及利用JavaScript来进行简单的客户端交互等方面的基础知识。</p>
<!-- Grid row -->
<div class="row">
<!-- Grid column -->
<div class="col-md-9 mb-md-0 mb-5">
<form>
<!-- Grid row -->
<div class="row">
<!-- Grid column -->
<div class="col-md-6">
<div class="md-form mb-0">
<label for="contact-name" class="">名字：张钲熙</label>
</div>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-6">
<div class="md-form mb-0">
<label for="contact-email" class="">学院：信息科学与工程学院</label>
</div>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
<!-- Grid row -->
<div class="row">
<!-- Grid column -->
<div class="col-md-12">
<div class="md-form mb-0">
<label for="contact-Subject" class="">课程：通信软件开发与应用</label>
</div>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
<!-- Grid row -->
<div class="row">
<!-- Grid column -->
<div class="col-md-12">
<div class="md-form">
<label for="contact-message">年级：2020</label>
</div>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</form>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-3 text-center">
<ul class="list-unstyled mb-0">
<li>
<p>重庆交通大学</p>
</li>
<li>
<p>学号：632007060315</p>
</li>
</ul>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</div>
</section>
<!--Section: contact-->
</main>
<!--Main layout-->
<!-- Footer -->
<footer class="page-footer font-small pt-4">
<!-- Footer Elements -->
<div class="container">
<!-- Social buttons -->
<ul class="list-unstyled list-inline text-center">
<li class="list-inline-item">
<a class="btn-floating btn-fb mx-1">
<i class="fab fa-facebook-f"> </i>
</a>
</li>
<li class="list-inline-item">
<a class="btn-floating btn-tw mx-1">
<i class="fab fa-twitter"> </i>
</a>
</li>
<li class="list-inline-item">
<a class="btn-floating btn-gplus mx-1">
<i class="fab fa-google-plus-g"> </i>
</a>
</li>
<li class="list-inline-item">
<a class="btn-floating btn-li mx-1">
<i class="fab fa-linkedin-in"> </i>
</a>
</li>
<li class="list-inline-item">
<a class="btn-floating btn-dribbble mx-1">
<i class="fab fa-dribbble"> </i>
</a>
</li>
</ul>
<!-- Social buttons -->
</div>
<!-- Footer Elements -->
<!-- Copyright -->
<div class="footer-copyright text-center py-3">网站:
<a href="https://mdbootstrap.com/education/bootstrap/"> 点击此处进入</a>
</div>
<!-- Copyright -->
</footer>
<!-- Footer -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="js/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="js/mdb.min.js"></script>
<!-- jQuery -->
<!-- Your custom scripts (optional) -->
<script type="text/javascript">
// MDB Lightbox Init
$(function () {
$("#mdb-lightbox-ui").load("mdb-addons/mdb-lightbox-ui.html");
});
$("section").addClass("wow fadeIn");
$(document).ready(function () {
new WOW().init();
});
</script>
</body>
</html>
总结
本次课程了解和掌握如何利用HTML5来构建Web页面（网页），用CSS（bootstrap库）来美化Web页面（网页），以及利用JavaScript来进行简单的客户端交互等方面的基础知识。但效果相对简陋
1056
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
