web基础课程结业报告(原神介绍页面)

课程结业报告(原神介绍页面)"/>

web基础课程结业报告(原神介绍页面)

本学期学了web基础课，所以在期末的时候做了一个关于原神的介绍基础页面

一.首页(index)页面

在首页上方我利用MDB中的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></ul></div></div></nav>

然后背景是利用率原神官方的视频背景，然后在背景的基础上加了一层遮罩，从而可以在其上方添加我想要添加的字，同时还添加了一个用小图片做的超链接，点击可以利用锚点跳到本页面相应的位置

<div class="view"><video class="video-intro" poster=".jpg" playsinline autoplaymuted loop><source src="zhuomian.mp4" type="video/mp4"></video><!-- Mask & flexbox options--><div class="mask  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><a href="#intro" class="scroll-down "><span> <img  src="mdtubiao.png " class="rootcartoon"></span></a></div><!--Grid column--></div><!--Grid row--></div><!-- Content --></div><!-- Mask & flexbox options--></div>

然后往下滑会出现原神的蒙德地图的基本介绍

1.该部分是用一个图片做了背景，然后在图片上增加了遮罩，从而可以在图片上写我们想写的内容
2.遮罩我使用了栅格模式，上方“蒙德”和介绍占了一个row，然后又添加了一个row，在其左边6个colum放置了一个轮播，右边则是放了两个超链接，点击“角色”或者“风景”回跳到对应的页面去。

<!--Section: intro--><section id="intro" class="py-5 "><!-- Container --><div class="container "><!-- Section heading --><div class="row"><div class="col-lg-4 text-center text-lg-left"><img class="img-fluid" src="smallicon/mdsmallicon.png" alt="Sample image"></div><div class="col-lg-4"><h2 class="h1-responsive font-weight-bold text-center mb-5 mdbutton">蒙德</h2></div><div class="col-lg-4 text-center text-lg-left"><img class="img-fluid" src="smallicon/mdsmallicon.png" alt="Sample image"></div></div><!-- Section description --><p class="lead white-text text-center w-responsive mx-auto mb-5">位于提瓦特大陆东北部的自由城邦。群山和广袤的平原间，自由之风携着蒲公英的气息吹拂过果酒湖，为坐落于湖心岛上的蒙德城送去风神巴巴托斯的祝福与恩泽。</p><!-- Grid row --><div class="row"><!-- Grid column --><div class="col-md-6 mb-4"><!--Carousel Wrapper--><div id="carousel-example-1" class="carousel slide carousel-fade" data-ride="carousel"