期末大作业
作者：互联网
大作业
要求
构建一个静态或动态网站即以下要求中任选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