其他分享
首页 > 其他分享> > 期末大作业

期末大作业

作者:互联网

大作业

要求

构建一个静态或动态网站即以下要求中任选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