Web结业报告

Web结业报告

经过一学期的学习，Web课程已经进入尾声。这学期我们从HTML,CSS,JAVASCRIPT,MDB,Agular已经入门了web开发的领域。但是这只是知识的冰山一角，需要我们以后再继续探索。

大作业中遇到的问题

问题1

在这次实践操作中，遇到最棘手的问题，就是在导航条中出现了url不能跳转的的问题，

在分析代码时，我发现了问题。
导航条代码如下：

<nav class="navbar navbar-expand-lg navbar-dark scrolling-navbar fixed-top">

      <div class="container">

        <!-- Navbar brand -->
        <a class="navbar-brand" href="#">Navbar</a>

        <!-- Collapse button -->
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#basicExampleNav"
          aria-controls="basicExampleNav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

        <!-- Collapsible content -->
        <div class="collapse navbar-collapse" id="basicExampleNav">

          <!-- Links -->
          <ul class="navbar-nav mr-auto smooth-scroll">
            <li class="nav-item">
              <a class="nav-link" href="#intro">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#best-features">Features</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#examples">Examples</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#gallery">Gallery</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#contact">Contact</a>
            </li>
          </ul>
          <!-- Links -->

          <!-- Social Icon  -->
          <ul class="navbar-nav nav-flex-icons">
            <li class="nav-item">
              <a class="nav-link"><i class="fab fa-facebook-f"></i></a>
            </li>
            <li class="nav-item">
              <a class="nav-link"><i class="fab fa-twitter"></i></a>
            </li>
            <li class="nav-item">
              <a class="nav-link"><i class="fab fa-instagram"></i></a>
            </li>
          </ul>
        </div>
        <!-- Collapsible content -->

      </div>

    </nav>

在这段代码中，有一段负责跳转平滑的代码

<ul class="navbar-nav mr-auto smooth-scroll">

smooth-scroll
这个属性会使导航在本页面的跳转变得平滑，但是也将跳转限制在了一个页面，所以不能进行其他页面的跳转。
当删除段代码时，导航条又能够继续工作。

问题2

在web的页面设计的时候，有时候需要一个返回按钮，但是当我们的页面做大后，找一个按钮显得很麻烦，所以我们需要将一个按钮固定到页面的一个位置。这需要用到CSS。这里提供一串简单的代码。

<div id="dg" style="z-index: 9999; position: fixed ! important; right: 0px; top: 600px;">
      <table width=""100% style="position: absolute; width:260px; right: 0px; top: 0px;">
        <a href="./index.html" target="_blank " class="btn btn-primary btn-md">返回主页 </a>
      </table>
      </div>

效果如下

心得

在进行问题分析时，我们首先需要找到问题的所在，从大方面深入到小的方面，可以采用试错的方法，逐步分析，这相应的需要我们熟悉每一个版块的功能，在细节上找到问题所在。