Web应用基础报告

做的什么：

我这次选作的是A内容，创建5个静态网页。我做的网页介绍了几个NBA篮球巨星的介绍专栏，里面有他们的照片、视频、文字介绍等。

 

 

开发过程

因为我觉得自己纯CSS写的东西太丑了而且又浪废时间，于是，我选择了MDB框架进行开发。起初还不知道如何使用使用，摸索了一下才知道他的美妙之处，大大提高了开发的效率，反正用起来那叫一个爽。

遇到的问题

未解决：

在克里斯.保罗那一页我想设置一个轮播图的，但是他定死了，其他按键也没有反应，后面改来改去也不尽人意。：

    <!-- Carousel wrapper -->
    <div id="introCarousel" class="carousel slide carousel-fade shadow-2-strong" data-mdb-ride="carousel">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-mdb-target="#introCarousel" data-mdb-slide-to="0" class="active"></li>
        <li data-mdb-target="#introCarousel" data-mdb-slide-to="1"></li>
        <li data-mdb-target="#introCarousel" data-mdb-slide-to="2"></li>
      </ol>

      <!-- Inner -->
      <div class="carousel-inner">
        <!-- Single item -->
        <div class="carousel-item active">
          <div class="mask" style="background-color: rgba(0, 0, 0, 0.6);">
            <div class="d-flex justify-content-center align-items-center h-100">
              <div class="text-white text-center">
                <br>
                <br>
                <br>
                <h1 class="mb-3">Chris Paul</h1>
                <h5 class="mb-4">Leaders are not necessarily tall, but they must be looked up to!</h5>
                <a class="btn btn-outline-light btn-lg m-2" href="https://baike.baidu.com/item/%E5%85%8B%E9%87%8C%E6%96%AF%C2%B7%E4%BF%9D%E7%BD%97/967371?fromtitle=%E4%BF%9D%E7%BD%97&fromid=10836016&fr=aladdin"
                  role="button" rel="nofollow" target="_blank">Realize more</a>
              </div>
            </div>
          </div>
        </div>

        <!-- Single item -->
        <div class="carousel-item">
          <div class="mask" style="background-color: rgba(0, 0, 0, 0.3);">
            <div class="d-flex justify-content-center align-items-center h-100">
              <div class="text-white text-center">
                <h2>You can place here any content</h2>
              </div>
            </div>
          </div>
        </div>

        <!-- Single item -->
        <div class="carousel-item">
          <div class="mask" style="
                background: linear-gradient(
                  45deg,
                  rgba(29, 236, 197, 0.7),
                  rgba(91, 14, 214, 0.7) 100%
                );
              ">
            <div class="d-flex justify-content-center align-items-center h-100">
              <div class="text-white text-center">
                <h2>And cover it with any mask</h2>
                <a class="btn btn-outline-light btn-lg m-2"
                  href="https://mdbootstrap.com/docs/standard/content-styles/masks/" target="_blank" role="button">Learn
                  about masks</a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- Inner -->

      <!-- Controls -->
      <a class="carousel-control-prev" href="#introCarousel" role="button" data-mdb-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="carousel-control-next" href="#introCarousel" role="button" data-mdb-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
    <!-- Carousel wrapper -->
  </header>
  <!--Main Navigation-->

已解决：

有时候在进入一些模板是会出现错乱或者没有显示出想要的效果时就会考虑到是否引入了相对应的样式。

总结：

在学习一个新的东西时要胆大心细，多多试错，踩的坑多了就会了，这就需要我们我们熟悉每一个新版块的功能，在细节上找到问题所在。通过这次实验，收获了一个能够基本使用CSS模板的技能，希望接下来能够学会Angular、VUE 等技能。