结业作业要求
构建一个静态或动态网站即以下要求中任选A或B，主题自选，要求如下：
A. 静态网站。可使用你喜欢的任何CSS框架如BootStrap、MDB、tailwind等，页面不少于5个，最后一个页面放置结业报告的超链接。网站需部署到你喜欢的托管服务器上如github等。
撰写结业报告，要求如下：
A. 题目为《通信软件开发与应用》课程结业报告；
B. 报告需阐述：做的什么、开发过程、遇到的问题、如何解决、哪些未解决、总结；
C. 该报告需表现为HTML格式，从你上面的网站中可访问到。
（我所选择的是构建一个静态网站，用的是bootstrap）
部分页面展示
因为个人能力有限，图片也找的不太好，所以页面处理的不是那么的美观。
最后一个页面的超链接用
<a href="D:\Web\重庆旅游" target="_blank" rel="noopener noreferrer">报告链接</a>
开发过程
先创建一个文件夹，根据老师的教程和网上的一些资料，自己编写了一个基础的的代码模板并保存分模块命名，我的网页用的技术是bootstrap
上网寻找自己所需的图片并保存在相应的文件夹里面
编写代码的时候要注意图片的位置
可以在浏览器中打开文件，然后在打开的页面点击右键检查，然后把鼠标移到相应位置就会显示相应代码所在位置，方便我进行修改
托管过程
先注册一个GitHub账号，在GitHub创建一个存储库，用来存放页面的相关代码文件
然后将网页文件都拷贝进去，然后返回GitHub客户端
完成左下角的简介和描述后点击commit to main
点击上方的publish
然后就构建好了，在网页输入相应的网址就能浏览了
部分代码
下面是主页的代码的展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- Required meta tags -->
<title>重庆旅游</title>
<!--<meta charset="utf-8">-->
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport">
<meta name="keywords" content="重庆旅游" />
<meta name="description" content="重庆旅游" />
<link type="image/x-icon" href="images/favicon.ico" rel="shortcut icon">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css?v=1572311855">
<link rel="stylesheet" href="css/animate.min.css?v=1572311855">
<link rel="stylesheet" href="css/main.css?v=1572311855">
<link rel="stylesheet" href="css/swiper.min.css?v=1572311855">
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="js/jquery.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/anime.min.js"></script>
<script src="js/swiper.min.js?v=1572311855"></script>
<link rel="stylesheet" href="css/index.css?v=1572311855">
</head>
<body>
<header id="header">
<div class="my-container">
<div class="row">
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="#">
<img src="images/logo1.jpg" width="167" height="43">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
<ul class="navbar-nav ">
<li class="nav-item active">
<a class="nav-link" href="index.html">网站首页</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="member.html">繁华景点</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="shopService.html">小众文艺</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="supplierService.html">传统文化</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="news.html">爱重庆</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="companyVideo.html">报告链接</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</header>
<div class="masker"></div>
<!-- 主要内容 开始 -->
<div class="swiper-container pc">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="images/30.jpg" alt="" class="img-responsive" >
</div>
</div>
<div class="swiper-pagination"></div>
</div>
<div class="swiper-container web">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="http://static-source.wukongzhanggui.com/images/20190708/5d2338f7947fd.png" alt="" class="img-responsive">
</div>
</div>
<div class="swiper-pagination"></div>
</div>
<div class="container">
<div class="about">
<img class="about-img" src="images/1.jpg">
<div class="about-desc">
<h3 class="desc-title">关于重庆</h3>
<p class="desc-p">重庆是一座美丽的城市</p>
<p class="desc-p2">
近年来，随着网络的发展，这所城市渐渐变成了人们口中的网红城市，接下来就让我带领大家来了解各个景点吧。
</p>
</div>
</div>
<div class="service">
<div class="service-title">为你服务</div>
<div class="service-content clearfix">
<div class="item fl mr28">
<div class="item-img">
<img src="images/2.jpg" alt="">
</div>
<div class="item-desc">
<h3 class="desc-h3">繁华景点</h3>
<p class="desc-p">各个标志性的景点。</p>
<div class="desc-btn"><a href="member.html" class="btn1">查看详情</a></div>
</div>
</div>
<div class="item fl mr28">
<div class="item-img">
<img src="images/5.jpg" alt="">
</div>
<div class="item-desc">
<h3 class="desc-h3">小众文艺</h3>
<p class="desc-p">让你拥有别致体验。 </p>
<div class="desc-btn"><a href="shopService.html" class="btn1">查看详情</a></div>
</div>
</div>
<div class="item fl">
<div class="item-img">
<img src="images/7.jpg" alt="">
</div>
<div class="item-desc">
<h3 class="desc-h3">传统文化</h3>
<p class="desc-p">重庆特色的文化底蕴。 </p>
<div class="desc-btn"><a href="supplierService.html" class="btn1">查看详情</a></div>
</div>
</div>
</div>
</div>
<div class="ser">
<div class="ser-item mb40">
<p class="title">繁华景点</p>
<p class="desc">各个标志性的景点 </p>
</div>
<div class="ser-item mb40">
<p class="title">小众文艺</p>
<p class="desc">让你拥有别致体验 </p>
</div>
<div class="ser-item">
<p class="title">传统文化</p>
<p class="desc">重庆特色的文化底蕴 </p>
</div>
<img src="images/2.jpg" alt="">
</div>
</div>
<div style="width: 100%;background: #F9F8F7" class="main">
<div class="swiper" style="background-image: url(images/swiper_bg.png)">
<div class="container">
<div class="swiper-top">
</div>
</div>
</div>
</div>
</div>
<script>
var swiper = new Swiper('.middle', {
slidesPerView: 3,
spaceBetween: 48,
// centeredSlides: true,
loop: false,
});
$('#prev').click(function () {
swiper.slidePrev();
})
$('#next').click(function () {
swiper.slideNext();
})
var swiper2 = new Swiper('.swiper2-container', {
slidesPerView: 'auto',
spaceBetween: 20,
loop: false,
});
</script>
<script language="javascript">
var count = 1;
if (count > 1) {
var mySwiper = new Swiper('.pc', {
autoplay: true,//可选选项，自动滑动
loop: true,//无缝
speed: 2000,
pagination: {
el: '.swiper-pagination'
},
})
var mySwiperWeb = new Swiper('.web', {
autoplay: true,//可选选项，自动滑动
loop: true,//无缝
speed: 2000,
pagination: {
el: '.swiper-pagination'
},
})
}
</script>
<!-- 主要内容 结束 -->
总结
本次大作业让我们学到了如何构建一个网站，学习过程中十分有趣，一个个代码变成网页上的一个个页面，让我感到很新奇，虽然说在制作的过程中困难重重，总是遇到一个问题，比如说一些代码的错误，后面托管过程的不顺利，但总之让我受益匪浅。
243
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
