《通信软件开发与应用》课程结业报告

最新推荐文章于 2024-11-14 00:00:11 发布

Moon in the water

最新推荐文章于 2024-11-14 00:00:11 发布

阅读量214

点赞数

文章标签： html

本文链接：https://blog.csdn.net/qq_50828712/article/details/118015052

版权

MDB学习总结

一、学习过程
二、学习心得

一、学习过程

1、导航栏

在学习的过程中我根据三个MDB模板进行了相关知识的学习，从模板中学习到了很多新的CSS的用法，比如导航栏的排版制作，如何制作一个直观，精美的导航等可以让人们在浏览网页的过程中对网页的内容有一个更加清楚的认识。
在这里插入图片描述
这一块是导航栏通过点击可以实现在本页面的章节跳转，实现代码大致如下：

<li class="nav-item">
              <a class="nav-link" href="#home">介绍
              </a>
            </li>

通过#h+id名称实现跳转的具体功能
通过以下类代码可以实现开启前小图标的改变

<i class="fas fa-home " ></i> 开启

可以将home改成bus、dog等喜欢的图标

2、章节内容

通过导航栏实现的章节跳转代码以及内容如下所示：
代码：

<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
          <ul class="navbar-nav mr-auto smooth-scroll">
            <li class="nav-item">
              <a class="nav-link" href="#home">介绍
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#chongqing" data-offset="90">重庆</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#wuhan" data-offset="90">武汉</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#beijing" data-offset="90">北京</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#korea" data-offset="30">韩国</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#japanese" data-offset="90">日本</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#report" data-offset="90">报告</a>
            </li>
          </ul>

内容：
在这里插入图片描述

3、具体内容

通过点击标题可以实现页面的跳转，进入各部分的详细介绍，点击首页即可回到原页面。跳转后北京选用的各地的城市图作为背景，加上地方美食的特点介绍，然后在下方显示各地具体美食，点击了解一下可以前往百度百科进行详细的了解。
代码如下：

<h2 class="h1-responsive font-weight-bold mb-5"><a href="chongqing.html">重庆美食</a></h2>

各跳转页面如下：
在这里插入图片描述

代码如下：

 <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">火锅（英文名：Hot Pot），古称“古董羹”，因食物投入沸水时发出的“咕咚”声而得名，它是中国独创的美食，历史悠久，是一种老少皆宜的食物，其特色为边煮边吃，由于锅本身具有保温效果，因此吃的时候食物仍热气腾腾。</p>
                <!-- Button -->
                <a class="btn btn-unique" href="https://baike.sogou.com/v2705869.htm?fromTitle=%E7%81%AB%E9%94%85">了解一下</a>

              </div>

剩下的页面如下所示：
在这里插入图片描述

在这里插入图片描述

二、学习心得

MDB的学习让我对于页面的排版能力有了进一步的提升，也通过MDB模板了解了如何在网页编写过程中有一个更加美观的界面可以在人们浏览网页时眼前一亮，引起浏览者的兴趣。在学习过程中也遇到了些问题，页面无法实现正确的跳转，后来通过查阅资料发现自己出出现的问题。在进行颜色选择的时候无法找到自己喜欢的颜色，通过查找功能在CSS文件中找到了对应的类，将颜色修改成了自己喜欢的颜色。还有一些其他的问题也通过对代码的学习理解一一得到了解决。此次学习的守护还是很大的，不仅加强了我对于网页编写的能力，知识点的掌握，还学会了如何将网页进行托管等，为以后的学习打下了结实的基础。也激发起了我对web的兴趣，在后面我也会不断的学习这一方面的知识，增强自己的能力，以能靠自己完整的编写出令自己满意的网页为目标努力。