大作业
要求
构建一个静态或动态网站即以下要求中任选A或B，主题自选，要求如下：
A. 静态网站。可使用你喜欢的任何CSS框架如BootStrap、MDB、tailwind等，页面不少于5个，最后一个页面放置结业报告的超链接。网站需部署到你喜欢的托管服务器上如github等。
B. 动态网站。使用任何一个前端框架如Angular等进行某应用网站的开发如英雄之旅等，需要有CRUD即增删改查功能并有一定的样式，网站内放置结业报告的超链接。网站需部署到你喜欢的托管服务器上如github等（可参阅https://angular.io/guide/deployment#deploy-to-github-pages）。
撰写结业报告，要求如下：
A. 题目为《通信软件开发与应用》课程结业报告；
B. 报告需阐述：做的什么、开发过程、遇到的问题、如何解决、哪些未解决、总结；
C. 该报告需表现为HTML格式，从你上面的网站中可访问到
结果与代码展示
开头
<!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="#testimonials" data-offset="30">美女帅哥</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#articles" 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 -->
<div class="col-lg-5 text-center text-lg-left">
<img class="img-fluid" src="https://img2.baidu.com/it/u=240636872,3049949913&fm=26&fmt=auto&gp=0.jpg"
alt="Sample image">
</div>
<!-- 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="view overlay rounded z-depth-1">
<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2373804981,2128618373&fm=26&gp=0.jpg" class="img-fluid"
alt="Sample project image">
<a>
<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">战国时期（公元前314年），秦张仪灭巴国后修筑巴郡。三国蜀汉时期（公元226年），
李严主导了重庆历史上的第二次筑城。当时重庆人烟稀少，大规模开采山石困难，
所以为土城。南宋时期（1238年），彭大雅为抗击元兵第三次筑城，城墙由条石堆砌而成。明朝洪武四年（1371年），戴鼎第四次筑城，建九开八闭十七门，洪崖门为闭门。洪崖门原是一道开门，此地曾发生过一场惨烈战事。
据《新元史·汪世显传》记载：汪惟正于至元八年（1271年）与两川行枢密院合兵围重庆，夺洪崖门，获宋将何世贤.
</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 mb-md-0 mb-4">
<!--Featured image-->
<div class="view overlay rounded z-depth-1">
<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3789413737,1517127313&fm=26&gp=0.jpg" class="img-fluid"
alt="Sample project image">
<a>
<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="view overlay rounded z-depth-1">
<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=889912533,2815957670&fm=26&gp=0.jpg" class="img-fluid"
alt="Sample project image">
<a>
<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>
<!--Section: projects-->
解放碑
<!--Section: gallery-->
<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平方米。该处是中国人民反法西斯战争取得胜利的象征，也是重庆解放及重庆市的象征</p>
<div class="row">
<div class="col-md-12">
<div id="mdb-lightbox-ui"></div>
<div class="mdb-lightbox">
<figure class="col-md-4">
<a href="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2882476283,1264857397&fm=26&gp=0.jpg" data-size="1600x1067">
<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2882476283,1264857397&fm=26&gp=0.jpg"
class="img-fluid z-depth-1-half">
</a>
</figure>
<figure class="col-md-4">
<a href="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2754506160,3161364108&fm=26&gp=0.jpg" data-size="1600x1067">
<img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2754506160,3161364108&fm=26&gp=0.jpg"
class="img-fluid z-depth-1-half" />
</a>
</figure>
<figure class="col-md-4">
<a href="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3393567435,3622754545&fm=26&gp=0.jpg" data-size="1600x1067">
<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3393567435,3622754545&fm=26&gp=0.jpg"
class="img-fluid z-depth-1-half" />
</a>
</div>
</div>
</div>
</div>
<!-- Container -->
</section>
<!--Section: gallery-->
美女帅哥
<!-- Section: Testimonials v.4 -->
<section id="testimonials" class="text-center py-5" style="background-color: #eee;">
<!-- Section heading -->
<h2 class="h1-responsive font-weight-bold my-5">美女帅哥</h2>
<!-- Grid row -->
<div class="row">
<!--Carousel Wrapper-->
<div id="multi-item-example" class="carousel testimonial-carousel slide carousel-multi-item mb-5"
data-ride="carousel">
<!--Controls-->
<div class="controls-top">
<a class="btn-floating light-blue darken-4" href="#multi-item-example" data-slide="prev"><i
class="fas fa-chevron-left"></i></a>
<a class="btn-floating light-blue darken-4" href="#multi-item-example" data-slide="next"><i
class="fas fa-chevron-right"></i></a>
</div>
<!--Controls-->
<!--Indicators-->
<ol class="carousel-indicators">
<li data-target="#multi-item-example" data-slide-to="0" class="active light-blue darken-4"></li>
<li data-target="#multi-item-example" data-slide-to="1" class="light-blue darken-4"></li>
<li data-target="#multi-item-example" data-slide-to="2" class="light-blue darken-4"></li>
</ol>
<!--Indicators-->
<!--Slides-->
<div class="carousel-inner" role="listbox">
<!--First slide-->
<div class="carousel-item active">
<!--Grid column-->
<div class="col-md-4">
<div class="testimonial">
<!--Avatar-->
<div class="avatar mx-auto">
<img src="https://img0.baidu.com/it/u=3479313674,2821418786&fm=26&fmt=auto&gp=0.jpg"
class="rounded-circle img-fluid">
</div>
<!--Content-->
<h4 class="font-weight-bold mt-4">周也</h4>
<h6 class="blue-text font-weight-bold my-3">1998年5月20日出生于重庆市</h6>
<p class="font-weight-normal"><i class="fas fa-quote-left pr-2"></i>中国内地女演员，毕业于北京电影学院</p>
<!--Review-->
<div class="grey-text">
<i class="fas fa-star"> </i>
<i class="fas fa-star"> </i>
<i class="fas fa-star"> </i>
<i class="fas fa-star"> </i>
<i class="fas fa-star-half-alt"> </i>
</div>
</div>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-4 clearfix d-none d-md-block">
<div class="testimonial">
<!--Avatar-->
<div class="avatar mx-auto">
<img src="https://img1.baidu.com/it/u=3252410002,2053432201&fm=26&fmt=auto&gp=0.jpg"
class="rounded-circle img-fluid">
</div>
<!--Content-->
<h4 class="font-weight-bold mt-4">蒋勤勤</h4>
<h6 class="blue-text font-weight-bold my-3">1975年9月3日出生于重庆市南岸区</h6>
<p class="font-weight-normal"><i class="fas fa-quote-left pr-2"></i>，中国内地女演员，毕业于北京电影学院1994级表演系。</p>
<!--Review-->
<div class="grey-text">
<i class="fas fa-star"> </i>
<i class="fas fa-star"> </i>
<i class="fas fa-star"> </i>
<i class="fas fa-star"> </i>
<i class="fas fa-star"> </i>
</div>
</div>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-4 clearfix d-none d-md-block">
<div class="testimonial">
<!--Avatar-->
<div class="avatar mx-auto">
<img src="https://img1.baidu.com/it/u=3751948399,2501375296&fm=26&fmt=auto&gp=0.jpg"
class="rounded-circle img-fluid">
</div>
<!--Content-->
<h4 class="font-weight-bold mt-4">殷桃</h4>
<h6 class="blue-text font-weight-bold my-3">1979年12月6日出生于重庆市</h6>
<p class="font-weight-normal"><i class="fas fa-quote-left pr-2"></i>毕业于中国人民解放军国防大学军事文化学院戏剧系</p>
<!--Review-->
<div class="grey-text">
<i class="fas fa-star"> </i>
<i class="fas fa-star"> </i>
<i class="fas fa-star"> </i>
<i class="fas fa-star"> </i>
<i class="far fa-star"> </i>
</div>
</div>
</div>
<!--Grid column-->
</div>
<!--First slide-->
<!--Second slide-->
<div class="carousel-item">
<!--Grid column-->
<div class="col-md-4">
<div class="testimonial">
<!--Avatar-->
<div class="avatar mx-auto">
<img src="https://img2.baidu.com/it/u=918345595,3060791560&fm=26&fmt=auto&gp=0.jpg"
class="rounded-circle img-fluid">
</div>
<!--Content-->
<h4 class="font-weight-bold mt-4">陈坤</h4>
<h6 class="blue-text font-weight-bold my-3">1976年2月4日出生于重庆市</h6>
<p class="font-weight-normal"><i class="fas fa-quote-left pr-2"></i>1995年考入东方歌舞团担任独唱歌手，1996年以专业第一名成绩考入北京电影学院表演系本科班。</p>
<!--Review-->
<div class="grey-text">
<i class="fas fa-star"> </i>
<i class="fas fa-star"> </i>
<i class="fas fa-star"> </i>
<i class="fas fa-star"> </i>
<i class="fas fa-star-half-alt"> </i>
</div>
</div>
</div>
<!--Grid column-->
其他
<!--Section: call to action-->
<div class="streak streak-md streak-photo"
style="background-image:url('https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img(115).jpg')">
<div class="flex-center white-text rgba-black-light pattern-1">
<ul class="mb-0 list-unstyled">
<li>
<h2 class="h2-responsive"><i class="fas fa-quote-left" aria-hidden="true"></i> 朝辞白帝彩云间，千里江陵一日还。
两岸猿声啼不住，轻舟已过万重山。<i class="fas fa-quote-right"
aria-hidden="true"></i></h2>
</li>
<li class="mb-0">
<h5 class="text-center font-italic mb-0">~李白</h5>
</li>
</ul>
</div>
</div>
<!--Section: call to action-->
<!--Section: articles-->
<section id="articles" class="text-center py-5">
<!-- Container -->
<div class="container">
<!-- Section heading -->
<h2 class="h1-responsive font-weight-bold mb-5">其余景点</h2>
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-lg-4 col-md-12 mb-4">
<!-- Card Narrower -->
<div class="card card-cascade narrower">
<!-- Card image -->
<div class="view view-cascade overlay">
<img class="card-img-top" src="https://img2.baidu.com/it/u=422086740,1991313614&fm=26&fmt=auto&gp=0.jpg"
alt="Card image cap">
<a>
<div class="mask rgba-white-slight"></div>
</a>
</div>
<!-- Card content -->
<div class="card-body card-body-cascade">
<!-- Label -->
<h5 class="pink-text pb-2 pt-1"><i class="fas fa-utensils"></i> 磁器口</h5>
<!-- Title -->
<h4 class="font-weight-bold card-title">磁器口古镇，原名龙隐镇</h4>
<!-- Text -->
<p class="card-text">国家AAAA级景区，中国历史文化名街，重庆市重点保护传统街，重庆“新巴渝十二景”，
巴渝民俗文化旅游圈。磁器口古镇位于重庆市沙坪坝区嘉陵江畔，始建于宋代，拥有“一江两溪三山四街”的独特地貌，形成天然良港，是嘉陵江边重要的水陆码头。</p>
<!-- Button -->
<a class="btn btn-unique">其一</a>
</div>
</div>
<!-- Card Narrower -->
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-4 col-md-6 mb-4">
<!-- Card Narrower -->
<div class="card card-cascade narrower">
<!-- Card image -->
<div class="view view-cascade overlay">
<img class="card-img-top" src="https://img1.baidu.com/it/u=1021808462,787484381&fm=26&fmt=auto&gp=0.jpg"
alt="Card image cap">
<a>
<div class="mask rgba-white-slight"></div>
</a>
</div>
<!-- Card content -->
<div class="card-body card-body-cascade">
<!-- Label -->
<h5 class="pink-text pb-2 pt-1"><i class="fas fa-utensils"></i>三峡</h5>
<!-- Title -->
<h4 class="font-weight-bold card-title">“长江三峡”是重庆十大文化符号</h4>
<!-- Text -->
<p class="card-text">Ut enim ad minima veniam, quis nostrum exercitationem ullam
corporis suscipit laboriosam, nisi ut aliquid ex ea commodi.</p>
<!-- Button -->
<a class="btn btn-unique">其二</a>
</div>
</div>
<!-- Card Narrower -->
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-4 col-md-6 mb-4">
<!-- Card Narrower -->
<div class="card card-cascade narrower">
<!-- Card image -->
<div class="view view-cascade overlay">
<img class="card-img-top" src="https://img0.baidu.com/it/u=1576316004,1753310661&fm=26&fmt=auto&gp=0.jpg"
alt="Card image cap">
<a>
<div class="mask rgba-white-slight"></div>
</a>
</div>
<!-- Card content -->
<div class="card-body card-body-cascade">
<!-- Label -->
<h5 class="pink-text pb-2 pt-1"><i class="fas fa-utensils"></i>通远门</h5>
<!-- Title -->
<h4 class="font-weight-bold card-title">通远门建于明洪武初年，</h4>
<!-- Text -->
<p class="card-text">位于重庆老城的正西方，瓮门东北向，正门横书“克壮千秋”四字；
其瓮城门上书“通远门”三字，因通远门是古代重庆通往四川其它地区等地的起点，故名之曰“通远</p>
<!-- Button -->
<a class="btn btn-unique">其三</a>
</div>
</div>
<!-- Card Narrower -->
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</div>
<!-- Container -->
</section>
<!--Section: articles-->
实验报告
<!--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">
<input type="text" id="contact-name" class="form-control">
<label for="contact-name" class="">名字：黄怡凯</label>
</div>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-6">
<div class="md-form mb-0">
<input type="text" id="contact-email" class="form-control">
<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">
<input type="text" id="contact-Subject" class="form-control">
<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">
<textarea type="text" id="contact-message" class="form-control md-textarea" rows="3"></textarea>
<label for="contact-message">年级：1801</label>
</div>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</form>
<div class="text-center text-md-left">
<a class="btn btn-purple btn-md">最后</a>
</div>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-3 text-center">
<ul class="list-unstyled mb-0">
<li>
<i class="fas fa-map-marker-alt fa-2x purple-text"></i>
<p>重庆交通大学</p>
</li>
<li>
<i class="fas fa-phone fa-2x mt-4 purple-text"></i>
<p>学号：631807030312</p>
</li>
<li>
<i class="fas fa-envelope fa-2x mt-4 purple-text"></i>
<p class="mb-0">邮箱：835021608@qq.com</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 -->
<!-- jQuery -->
<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>
<!-- Your custom scripts (optional) -->
<script type="text/javascript">
// MDB Lightbox Init
$(function () {
$("#mdb-lightbox-ui").load("mdb-addons/mdb-lightbox-ui.html");
});
// 以下为动画效果新添加的两条语句
// Adding animations to the sections, 使用的是淡入, 你也可以试试zoomIn等动画
$("section").addClass("wow fadeIn");
// Animations Init, 注意必须放在ready方法中以防WOW对象没能加载成功
$(document).ready(function () {
new WOW().init();
});
</script>
</body>
</html>
标签：11,重庆市,重庆,洪崖,作业,期末,解放碑,崖洞 来源： https://blog.csdn.net/weixin_51103480/article/details/118003692
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。