通信软件开发与应用

m0_57421685

于 2022-07-10 21:06:51 发布

阅读量210

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/m0_57421685/article/details/125710463

版权

本次任务选择的是制作静态网站，选用了MDB框架构建了一个介绍APEX Legends的静态网页。

总体大致就是这样

开发过程：

首先下载MDB-Pro种子，可以在MDB官网获取免费版和专业版。

然后将种子全部解压到一个新文件夹，用Visual Studio Code打开就可以进行操作了。

这两部分代码是MDB需要的CSS和JS文件，不要变动它。

内容部分我分为了3个部分

header部分：

也就是如下图这一部分

这部分主要是导航和菜单内容，可以让别人快速了解你的网页分为几个部分。

<header>
      <!--Navbar-->
        <nav class="navbar navbar-expand-lg navbar-dark primary-color">
          <!-- Navbar brand -->
          <a class="navbar-brand" href="#">导航</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">        
              <li class="nav-item active">          
                <a class="网页" href="#"> 主页       
                  <span class="sr-only">(current)</span>          
                </a>        
              </li> 
              
              <li class="nav-item">          
                <a class="nav-link" href="#">
                  结业报告
                </a>        
              </li>


              <!-- Dropdown -->        
              <li class="nav-item dropdown">          
                <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"            aria-expanded="false">
                  菜单
                </a>          
                <div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">            
                  <a class="dropdown-item" href="https://www.origin.com/hkg/zh-tw/store/apex/apex">官网</a>             
                  <a class="dropdown-item" href="http://vip.hjsteam.com/origin/?channel=origin_360tg02_yx">橘子平台</a>                     
                </div>        
              </li>      
            </ul>      
            <!-- Links -->      
            <form class="form-inline">        
              <div class="md-form my-0">          
                <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">        
              </div>      
            </form>    
          </div>    
          <!-- Collapsible content -->  
        </nav>  
        <!--/.Navbar-->
  </header>

在这个地方遇到一个问题，原本的MDB模板中主页本来是英文，在导航条中原本和其他白色的字体一样，改成中文后就变蓝色而且在导航条中位置偏上。目前还未解决

main部分：

main中主要放的就是我们所看到的主要内容，也是网站的核心部分。

在写main中内容前，我们可以先给页面布置一个栅格布局。这样会让网页看起来更加的舒适，各部分内容更加清晰。比一条条罗列展示出的效果更好。

<div class="container">
  <div class="row">
    <div class="col-md-7">
      第一行,第一列, 中等尺寸屏幕及以上则宽 7/12
    </div>

    <div class="col-md-5">
      第一行,第二列, 中等尺寸屏幕及以上则宽 5/12
    </div>

  </div>
  <div class="row">
    <div class="col-lg-4 col-md-12">
      第二行,第一列, 大尺寸屏幕及以上则宽 4/12, 中等屏幕独占一行
    </div>

    <div class="col-lg-4 col-md-6">
      第二行,第二列, 大尺寸屏幕及以上则宽 4/12, 中等屏幕占6/12
    </div>

    <div class="col-lg-4 col-md-6">
      第二行,第三列, 大尺寸屏幕及以上则宽 4/12, 中等屏幕占6/12
    </div>
  </div>
</div>

我是分成了五个部分。第一部分放置一个较大的图，然后第二部分介绍大概内容，引入了一个超链接，可以通过跳转到一个新的网页来获取更详细的内容。

第二行的三个部分也是设置了一个超链接，只是粗略的介绍，想要了解更多信息可以通过点击跳转到一个新的网页获取详细信息。

footer部分：

也就是页面的底部。通常用于声明或者相关的链接。我们通常在一些官方页面下可以看到一大堆的声明和一大堆的相关链接，就是这个部分。

<footer class="page-footer font-small blue pt-4 mt-4">  
    <!-- Footer Links -->  
    <div class="container-fluid text-center text-md-left">    
      <!-- Grid row -->    
      <div class="row">      
        <!-- Grid column -->      
        <div class="col-md-6 mt-md-0 mt-3">        
          <!-- Content -->        
          <h5 class="text-uppercase">
            更多传奇详情
          </h5>        
          <p>
            你可以通过点击以下节点获取相应传奇详情
          </p>      
        </div>      
        <!-- Grid column -->      
        <hr class="clearfix w-100 d-md-none pb-3">      
        <!-- Grid column -->      
        <div class="col-md-3 mb-md-0 mb-3">        
          <!-- Links -->        
          <h5 class="text-uppercase">
            传奇名称
          </h5>        
          <ul class="list-unstyled">          
            <li>            
              <a href="https://www.yimasm.com/apex/656907.html">
                动力小子
              </a>          
            </li>          
            <li>            
              <a href="https://baike.baidu.com/item/%E5%AF%BB%E8%A1%80%E7%8C%8E%E7%8A%AC/53479032">
                寻血猎犬
              </a>          
            </li>          
            <li>            
              <a href="https://baike.baidu.com/item/%E7%9B%B4%E5%B8%83%E7%BD%97%E9%99%80/53485049">
                直布罗陀
              </a>          
            </li>                 
          </ul>      
        </div>