《通信软件开发与应用》课程结业报告
作者：互联网
《通信软件开发与应用》课程结业报告
报告要求
本课程期末结业需完成以下两个任务，提交url即可。
构建一个静态或动态网站即以下要求中任选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格式，从你上面的网站中可访问到。
开发过程
1.主题选择
这次主题我选的是原神，是一款开放类的二次元手游。
2.导航栏设计
我用的是MDB教程三的CSS的属性模板，并进行简单的代码修改。
/* Required for full background image */
html,
body,
header,
.view {
height: 100%;
}
@media (max-width: 740px) {
html,
body,
header,
.view {
height: 100vh;
}
}
.top-nav-collapse ,.page-footer{
background-color: #563e91 !important;
}
.navbar:not(.top-nav-collapse) {
background: transparent !important;
}
@media (max-width: 991px) {
.navbar:not(.top-nav-collapse) {
background: #563e91 !important;
}
}
.rgba-gradient {
background: rgba(35, 7, 77, 0.6); /* fallback for old browsers */
background: -webkit-linear-gradient(to right, rgba(204, 83, 51, 0.6), rgba(35, 7, 77, 0.6)); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, rgba(204, 83, 51, 0.6), rgba(35, 7, 77, 0.6)); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.streak.streak-photo {
background-attachment: fixed;
}
3.页面设计
2.首先是封面，亮出主题“原神”，并分类介绍原神的版块内容。
部分代码如下：.
<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>
2.简单展现出游戏的特色和风格。
代码如下
<!-- 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 -->
</header>
<!--Main layout-->
<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">原神是一款日系二次元游戏，原神游戏以3D引入到全自由的格斗游戏中，原神手游都有着极其精美华丽的画面，玩家将在游戏中踏入一个神奇的世界，跟随凯亚、琴、安柏等主角，完成一次充满趣味的冒险。
</p>
<!-- Grid row -->
<div class="row">
<!-- Grid column -->
<div class="col-lg-5 text-center text-lg-left">
<img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Others/screens-section.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">每个角色都将有着不一样的技能连招技巧以及华丽的技能特效，超强的视觉盛宴和打击感让人眼前一亮。.</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-->
3.游戏具体介绍–蒙德地区.
代码如下：
<!--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">蒙德称是风神巴巴托斯和风魔龙特瓦林守护的城邦，人们在这里自由快乐的生活，</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://img1.ali213.net/glpic/2020/06/20/584_2020062041044632.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 mb-md-0 mb-4">
<!--Featured image-->
<div class="view overlay rounded z-depth-1">
<img src="https://img1.ali213.net/glpic/2020/06/20/584_2020062041042551.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 -->
璃月地区展示。
代码如下：
!-- Section heading -->
<h2 class="h1-responsive font-weight-bold mb-5">璃月地区</h2>
<!-- Section description -->
<p class="grey-text w-responsive mx-auto mb-5">蒙德不同的是璃月港明显有着许多东方要素，风景也十分漂亮。有璃月港 、天衡山 、荻花洲、望舒客栈 、轻策庄 等优美的风景。由七神中的岩神钟离守护。
<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://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(145).jpg" data-size="1600x1067">
<img src="https://mini.eastday.com/game/imgfile/dfgame/202008/18/1597737815_5.jpg"
class="img-fluid z-depth-1-half">
</a>
</figure>
<figure class="col-md-4">
<a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(150).jpg" data-size="1600x1067">
<img src="https://mini.eastday.com/game/imgfile/dfgame/202008/18/1597737824_0.jpg"
class="img-fluid z-depth-1-half" />
</a>
</figure>
<figure class="col-md-4">
<a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(152).jpg" data-size="1600x1067">
<img src="https://mini.eastday.com/game/imgfile/dfgame/202008/18/1597737838_5.jpg"
class="img-fluid z-depth-1-half" />
</a>
</figure>
</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://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-img.18183.com%2Fimages%2F2020%2F03%2F19%2Fbe8a84fa65801b6b64f69f47725f9159.png%40%2118183&refer=http%3A%2F%2Fc-img.18183.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1626530612&t=f339294d5dc06236b7b430c75f56efde"
class="rounded-circle img-fluid">
</div>
<!--Content-->
<h4 class="font-weight-bold mt-4">温迪</h4>
<h6 class="blue-text font-weight-bold my-3">风神巴巴托斯</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://img2.woyaogexing.com/2021/04/11/28fd96f602b847c9bc19c13343f17ebf!400x400.jpeg"
class="rounded-circle img-fluid">
</div>
<!--Content-->
<h4 class="font-weight-bold mt-4">钟离</h4>
<h6 class="blue-text font-weight-bold my-3">钟离摩拉克斯</h6>
<p class="font-weight-normal"><i class="fas fa-quote-left pr-2"></i>“尘世七执政”中的岩神，守护璃月的神，千年的守护者。
<!--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://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.baizhan.net%2Fd%2Ffile%2F20201214%2Fa2de2199dce3d46da425575bf99a7ee9.png&refer=http%3A%2F%2Fimg.baizhan.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1626531111&t=9e079845892ac42afc064efa8ec93f79"
class="rounded-circle img-fluid">
</div>
<!--Content-->
<h4 class="font-weight-bold mt-4">甘雨</h4>
<h6 class="blue-text font-weight-bold my-3">璃月七星的秘书</h6>
<p class="font-weight-normal"><i class="fas fa-quote-left pr-2"></i>淌着人类与仙兽的血脉，天性优雅娴静。
<!--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://img0.baidu.com/it/u=782237804,2705930641&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">璃月七星中的玉衡星</h6>
<p class="font-weight-normal"><i class="fas fa-quote-left pr-2"></i>她坚信与人类命运相关的事，应当由人类去做，而且人类一定可以做得更好
<!--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://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpatchwiki.biligame.com%2Fimages%2Fys%2Fc%2Fcb%2Fdya61jxjnpbwznq14rtzm0nd9yjcoxb.png&refer=http%3A%2F%2Fpatchwiki.biligame.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1626531403&t=e009249e10e0cb5d0a524566f286a22a"
class="rounded-circle img-fluid">
</div>
<!--Content-->
<h4 class="font-weight-bold mt-4">迪卢克</h4>
<h6 class="blue-text font-weight-bold my-3">蒙德城第一富豪</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"> </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://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimage.9game.cn%2F2020%2F10%2F3%2F179558641.jpg&refer=http%3A%2F%2Fimage.9game.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1626531525&t=9be68b36dac557341fa4c8ec8f01bd67"
class="rounded-circle img-fluid">
</div>
<!--Content-->
<h4 class="font-weight-bold mt-4">行秋</h4>
<h6 class="blue-text font-weight-bold my-3">璃月港飞云商会的二少爷</h6>
<p class="font-weight-normal"><i class="fas fa-quote-left pr-2"></i>自幼便以勤奋好学、待人礼貌闻名
<!--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-->
<!--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://gimg2.baidu.com/image_search/src=http%3A%2F%2Fupload-bbs.mihoyo.com%2Fupload%2F2019%2F06%2F22%2F4724970%2F8aed79a4c2baad71e6ab638fc0e8e59d_3219974940213631774.jpg%3Fx-oss-process%3Dimage%2Fresize%2Cs_600%2Fquality%2Cq_80%2Fauto-orient%2C0%2Finterlace%2C1%2Fformat%2Cjpg&refer=http%3A%2F%2Fupload-bbs.mihoyo.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1626531851&t=af51153aa90c9e74f6116ed39cbd9795"
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">在原神手游中，风魔龙是一个BOSS级风属性怪物，所在区域：风龙废墟（为了青色的身影任务）。玩家击杀风魔龙后，可以掉落摩拉、北陆单手剑原胚、东风之翎、东风之爪、东风的吐息、最胜紫晶碎屑、最胜紫晶断片等。
<!-- 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://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimage.9game.cn%2F2020%2F11%2F13%2F185943500.jpg&refer=http%3A%2F%2Fimage.9game.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1626532475&t=a9cd97fe5b59643aee659797fe38499b"
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">愚人众公子作为黄金屋主线的boss，有两段形态的，一开始的正常形态击破之后会开启邪眼状态，体验不同的游戏视觉。
<!-- 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://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimage.9game.cn%2F2020%2F11%2F18%2F186443019.jpg&refer=http%3A%2F%2Fimage.9game.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1626532435&t=57069f87a80d741f21ccbe4df39b7b45"
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">原神北风之狼属于风、冰双属性的BOSS，对风、冰元素伤害免疫。旅行者要将等级提升到21级，开启雷泽的个人线，这个任务的终极BOSS北风狼王。.</p>
<!-- Button -->
<a class="btn btn-unique">首领boss之一</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">重庆交通大学《通信软件开发与应用》课程结业报告。
<!-- 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="">学号 631807030310 </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">邮箱 2476783656@qq.com </label>
</div>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</form>
</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>+18598571314</p>
</li>
<li>
<i class="fas fa-envelope fa-2x mt-4 purple-text"></i>
<p class="mb-0">2476783656@qq.com</p>
</li>
</ul>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</div>
</section>
<!--Section: contact-->
网站托管
1.在gitbub官网下载并进行注册。
2.新建一个存储库，把网站工程代码放入库中进行上传。
3.上传成功，生成链接。
问题和解决办法
在使用GitHub进行网络托管的时候，有些图片能在托管的网页上显示，而有些图片则不能在托管网页上显示。
我们需要找到代码中图片的链接，在网页上去下载图片到本地文件中，更改图片的代码后，在重新上传代码和图片文件就可以了。
把本地图片改到代码中，部分代码如下。
<!--Grid column-->
<div class="col-md-4 clearfix d-none d-md-block">
<div class="testimonial">
<!--Avatar-->
<div class="avatar mx-auto">
<img src="./tupian/ganyu.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">仙兽</h6>
<p class="font-weight-normal"><i class="fas fa-quote-left pr-2"></i>守护璃月的守护者。
<!--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-->
总结
本次课程结业，是自己第一次进行简单的Web网页设计，应用了比较简单的MDB框架和了HTM、CSS相关知识。HTM主要是建立一个网页的结构，CSS进行页面的美化和调整。在设计网页中，应用了老师给的MDB的网页模板进行了相关的修改，最后托管到GitHub网站上。本次课程让我对页面的设计有了一个整体的了解，自己也会学会了进行简单的网页设计，受益很大。
标签：结业,原神,网站,代码,课程,通信软件,background,蒙德 来源： https://blog.csdn.net/m0_45269126/article/details/118018716