当前位置：网站首页>《通信软件开发与应用》课程结业报告
《通信软件开发与应用》课程结业报告
2022-07-08 00:43:00 【浩923】
一、做的什么
1.1 任务要求：
任务一：构建一个静态或动态网站。以下要求中任选A或B，要求如下：
A. 静态网站
采用纯 CSS 或你喜欢的任何 CSS 框架如 Bootstrap、MDB、Tailwind 等构建一个主题自选且不少于5个页面（Web Page）的网站
B. 动态网站
使用任何一个前端框架如 Angular 等进行某应用（如英雄之旅、代办事项、图书管理等）的开发，需要有 CRUD 即增删改查功能并有一定的样式。
无论你选择静态还是动态网站，该网站都需部署到你喜欢的网站托管服务器上如 Gitpage 等（Angular项目可参阅 https://angular.cn/guide/deployment）。
该网站需放置你的结业报告（要求见任务二）。
任务二：撰写结业报告，要求如下：
（1） 题目为《通信软件开发与应用》课程结业报告；
（2） 报告需阐述：做的什么、开发过程、遇到的问题、如何解决、哪些未解决、总结；
（3） 该报告以 Web 页面的形式呈现，从你上面开发的网站中可访问到。
1.2 设计主题
此次设计的网页主题是介绍天府之国——四川
二、效果展示
首页：
景点页面：
美食页面：
住宿页面：
更多了解页面：
三、实现过程
3.1 主页设计
导航条
通过设计一个topnav类和li中的item类为导航条附上超链接,从而实现主页面与其他子页面进行定位的功能；
具体代码：
<div class="topict">
<img src="images/images/tao.png" alt="">
<!-- 主页面最顶上的图片设计 -->
</div>
<div class="topnav">
<ul>
<li><a href="#数学181GaoLei"><img src="images/校徽.png" alt="school badge" width="40px"></a></li>
<!-- 页面的导航条logo用我们学校的校徽代替 -->
<li><a href="webpage.html" >首页</a></li>
<li><a href="index.html">景点</a></li>
<li><a href="food/index.html">美食</a></li>
<li><a href="accommodation.html">住宿</a></li>
<li><a href="vedio.html">了解更多</a></li>
</ul>
</div>
页面图片的轮播设计
通过一个navright类和.js的文件进行实现
lunbo.js的文件中设计了animate函数手动轮播和showButton函数显示出轮播图片的底部。
js的具体代码：
window.onload = function () {
var container = document.getElementById('container');
var list = document.getElementById('list');
var buttons = document.getElementById('buttons').getElementsByTagName('span');
var prev = document.getElementById('prev');
var next = document.getElementById('next');
var index = 1;
var len = 3;
var animated = false;
var interval = 3000;
var timer;
var size = 1350;
function animate(offset) {
if (offset == 0) {
return;
}
animated = true;
var time = 300;
var inteval = 10;
var speed = offset / (time / inteval);
console.log("speed:" + speed);
var left = parseInt(list.style.left) + offset;
var go = function () {
if ((speed > 0 && parseInt(list.style.left) < left) || (speed < 0 && parseInt(list.style.left) > left)) {
list.style.left = parseInt(list.style.left) + speed + 'px';
console.log(list.style.left);
setTimeout(go, inteval);
} else {
list.style.left = left + 'px';
if (left > -200) {
list.style.left = -size * len + 'px';
}
if (left < ( -size * len)) {
list.style.left = '-' + size + 'px';
}
animated = false;
console.log("left:" + list.style.left);
}
}
go();
}
function showButton() {
for (var i = 0; i < buttons.length; i++) {
if (buttons[i].className == 'on') {
buttons[i].className = '';
break;
}
}
buttons[index - 1].className = 'on';
}
function play() {
timer = setTimeout(function () {
next.onclick();
play();
},
interval);
}
function stop() {
clearTimeout(timer);
}
next.onclick = function () {
if (animated) {
return;
}
if (index == len) {
index = 1;
} else {
index += 1;
}
animate(-size);
showButton();
}
prev.onclick = function () {
if (animated) {
return;
}
if (index == 1) {
index = len;
} else {
index -= 1;
}
animate(size);
showButton();
}
for (var i = 0; i < buttons.length; i++) {
buttons[i].onclick = function () {
if (animated) {
return;
}
if (this.className == 'on') {
return;
}
var myIndex = parseInt(this.getAttribute('index'));
var offset = -size * (myIndex - index);
animate(offset);
index = myIndex;
showButton();
}
}
container.onmouseover = stop;
container.onmouseout = play;
play();
};
HTML文件设计：
</div>
<div class="navright">
<div id="container">
<div id="list" style="left: -1350px;">
<img src="images/picture5.jpg"/>
<img src="images/picture2.jpg"/>
<img src="images/picture4.jpg"/>
<img src="images/picture5.jpg">
<img src="images/picture2.jpg"/></div>
<div id="buttons">
<span index="1"></span>
<span index="2"></span>
<span index="3"></span>
</div>
<a href="javascript:;" id="prev" class="arrow" style="font-size:60px; text-align:center;"><</a>
<a href="javascript:;" id="next" class="arrow" style="font-size:60px; text-align:center;">></a></div>
</div>
</div>
左侧有关四川的简介
通过调用navboth、navleft、ft类将定位
具体代码：
<div class="navleft">
<h3 font="white 20px arial">简介</h3>
<p class="ft">
四川，简称“川”或“蜀”，省会——成都，位于中国大陆西南腹地，自古就有“天府之国”之美誉，是中国西部门户，大熊猫故乡。四川居住着彝族、藏族、回族、汉族、羌族等民族，是中国第二大藏区、唯一的羌族聚居区、最大的彝族聚居地。旅游资源极为丰富，历来有天下山水在于蜀之说，并有“峨眉天下秀，九寨天下奇，剑门天下险，青城天下幽”之誉。
</p>
<p class="ft">
被誉为“国宝”的珍稀动物大熊猫，85%栖息在四川西北的崇山峻岭之中，四川因此被誉为“大熊猫的故乡”。憨态可掬的大熊猫，是人们最喜爱的珍稀动之一，是世界野生动物保护基金会的标志动物。全国目前有大熊猫自然保护区18个，四川占16个，成都东北建有“大熊猫繁殖研究基地”；距成都136公里的卧龙大熊猫自然保护区是中国三大自然保护区之一，世界野生动物保护基金会在此建有“大熊猫研究中心”。
</p>
</div>
实现效果：
3.2 景点页面设计
该页面的整体设计就是通过列举一个景点再进行文字介绍，总共列举了4个景点。
通过调用section parallax bg1、section static、divstyle类对整体的页面进行布局和设计。
具体代码：
<main class="wrapper">
<section class="section parallax bg1">
</section>
<section class="section static">
<div class="divstyle">
<h1>九寨沟</h1>
<p>
九寨沟位于四川省阿坝藏族羌族自治州九寨沟县境内。地处青藏高原、川西高原、山地向四川盆地过渡地带，南距成都市300多公里，是一条纵深50余千米的山沟谷地，总面积64297公顷，森林覆盖率超过80%。因沟内有树正寨、荷叶寨、则查洼寨等九个藏族村寨坐落在这片高山湖泊群中而得名。
</p>
<p>
“九寨归来不看水”，是对九寨沟景色真实的诠释。泉、瀑、河、滩108个海子，构成一个个五彩斑斓的瑶池玉盆。长海、剑岩、诺日朗、树正、扎如、黑海六大景观，呈“Y”字形分布。翠海、叠瀑、彩林、雪峰、藏情、蓝冰，被称为“六绝”。神奇的九寨，被世人誉为“童话世界”，号称“水景之王”。
</p>
</div>
</section>
<section class="section parallax bg2">
</section>
<section class="section static">
<div class="divstyle">
<h1>峨眉山乐山大佛</h1>
<p>峨眉山（Mount
Emei）位于四川省西南部，四川盆地的西南边缘，是中国“四大佛教名山”之一，地势陡峭，风景秀丽，素有“峨眉天下秀”之称，山上的万佛顶最高，海拔3099米，高出峨眉平原2700多米。《峨眉郡志》云：“云鬘凝翠，鬒黛遥妆，真如螓首蛾眉，细而长，美而艳也，故名峨眉山。”
</p>
<p>峨眉山处于多种自然要素的交汇地区，区系成分复杂，生物种类丰富，特有物种繁多，保存有完整的亚热带植被体系，有植物3200多种，约占中国植物物种总数的1/10。峨眉山还是多种稀有动物的栖居地，动物种类达2300多种。
</p>
<p>乐山大佛，又名凌云大佛，位于四川省乐山市南岷江东岸凌云寺侧，濒大渡河、青衣江和岷江三江汇流处。大佛为弥勒佛坐像，通高71米，是中国最大的一尊摩崖石刻造像。</p>
</div>
</section>
<section class="section parallax bg3"></section>
<section class="section static">
<div class="divstyle">
<h1>阆中古城</h1>
<p>阆中古城位于四川盆地东北缘、嘉陵江中游，为四大古城之一。阆中古城“5A”景区总面积达4.59平方公里，古城核心区域2平方公里。截至2015年，古城已有2300多年的建城历史，为古代巴国蜀国军事重镇。</p>
<p>
阆中古城有张飞庙、永安寺、五龙庙、滕王阁、观音寺、巴巴寺、大佛寺、川北道贡院等8处全国重点文物保护单位；有邵家湾墓群、文笔塔、石室观摩崖造像、雷神洞摩崖造像、牛王洞摩崖造像、红四方面军总政治部旧址、华光楼、阆中文庙等22处省级文物保护单位
</p>
</div>
</section>
<section class="section parallax bg4"></section>
<section class="section static">
<div class="divstyle">
<h1>大熊猫栖息地</h1>
<p>四川大熊猫栖息地由世界第一只大熊猫发现地宝兴县及中国四川省境内的卧龙自然保护区等7处自然保护区，包括卧龙、四姑娘山、夹金山脉，和青城山—都江堰风景名胜区等9处风景名胜区组成</p>
<p>
四川大熊猫栖息地保存的野生大熊猫占全世界30%以上，是全球最大最完整的大熊猫栖息地；是全球所有温带区域（除热带雨林以外）中植物最丰富的区域，被保护国际（CI）选定为全球25个生物多样性热点地区之一，被世界自然基金会（WWF）确定为全球200个生态区之一。
</p>
</div>
</section>
</main>
在页面的右下角设计一个返回首页的按钮，通过<a> </a>引入首页的超链接
具体代码：
<div class="shouye"><a href="webpage.html">首页</a></div>
<a href="webpage.html" class="shouye">首页</a>
效果展示：
整个页面的样式设计：
.wrapper {
/* The height needs to be set to a fixed value for the effect to work. * 100vh is the full height of the viewport. */
height: 100vh;
/* width: 1400px; */
margin: 0px auto;
/* The scaling of the images would add a horizontal scrollbar, so disable x overflow. */
overflow-x: hidden;
/* Enable scrolling on the page. */
overflow-y: auto;
/* Set the perspective to 2px. This is essentailly the simulated distance from the viewport to transformed objects.*/
perspective: 2px;
}
.section {
/* Needed for children to be absolutely positioned relative to the parent. */
position: relative;
/* The height of the container. Must be set, but it doesn't really matter what the value is. */
height: 90vh;
/* For text formatting. */
display: flex;
align-items: center;
justify-content: center;
color: white;
text-shadow: 0 0 0px #000;
}
.parallax::after {
/* Display and position the pseudo-element */
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
/* Move the pseudo-element back away from the camera, * then scale it back up to fill the viewport. * Because the pseudo-element is further away, it appears to move more slowly, like in real life. */
transform: translateZ(-1px) scale(1.5);
/* Force the background image to fill the whole element. */
background-size: 100%;
/* Keep the image from overlapping sibling elements. */
z-index: -1;
}
/* The styling for the static div. */
.static {
background: rgba(170, 209, 235, 0.9);
background-image: url(pc_bg.jpg);
}
/* Sets the actual background images to adorable kitties. This part is crucial. */
.bg1::after {
background-image: url(jiuzhaigou.jpg);
}
.bg2::after {
background-image: url(emei-leshan.jpg);
}
.bg3::after{
background-image: url(langzhong.jpg);
}
.bg4::after{
background-image: url(xiongmao.jpg);
}
3.3 美食页面设计
该页面总共用了12张有关四川美食的图片和简介，编写了一个.js文件实现当鼠标放到图片上时显示简介，根据鼠标的移动方向，简介框移动，通过var建立一个坐标轴来确定鼠标的位置，再利用var和math计算鼠标距离下一个图片的上下左右的距离。
具体代码：
图片和简介的导入：
<div class="box">
<ul>
<li>
<img src="美食/东坡肘子.jpg">
<div class="txt">
<h2>东坡肘子</h2>
<p>
汤汁乳白，猪肘烂软，肉质细嫩、肉味醇香、有嚼头，肥而不腻。
</p>
<a href="javaScript:" ></a>
<a herf="#" class="btn">查看详情</a>
</div>
</li>
<li>
<img src="美食/冒菜.jpg">
<div class="txt">
<h2>冒菜</h2>
<p>
以肉类、豆制品、青菜、海鲜、菌菇类作为主要食材制作而成的菜品，味道又香又辣，甚为可口。
</p>
<a href="javaScript:" class="btn">查看详情</a>
</div>
</li>
<li>
<img src="美食/冷吃兔.jpg">
<div class="txt">
<h2>冷吃兔</h2>
<p>
吃兔又名香辣兔、麻辣兔丁，是源于四川自贡地区一种汉族传统美食，在川菜分类上属于小河帮菜系，迄今已有百余年历史。
</p>
<a href="javaScript:" class="btn">查看详情</a>
</div>
</li>
<li>
<img src="美食/钵钵鸡.jpg">
<div class="txt">
<h2>钵钵鸡</h2>
<p>
钵钵鸡是四川的传统名小吃，起源于乐山。“钵钵”是一种瓦罐，将鸡肉串串放入精心调制的料汁里煮熟，然后放在钵钵里涮着吃。
</p>
<a href="javaScript:" class="btn">查看详情</a>
</div>
</li>
<li>
<img src="美食/夫妻肺片.jpeg">
<div class="txt">
<h2>夫妻肺片</h2>
<p>
制作精细，色泽美观，质嫩味鲜，麻辣浓香，非常适口。
</p>
<a href="javaScript:" class="btn">查看详情</a>
</div>
</li>
<li>
<img src="美食/宜宾燃面.jpg">
<div class="txt">
<h2>宜宾燃面</h2>
<p>
以宜宾碎米芽菜、小磨麻油、鲜板化油、八角、山奈、芝麻、花生、核桃、金条辣椒等为辅料...
</p>
<a href="javaScript:" class="btn">查看详情</a>
</div>
</li>
<li>
<img src="美食/泸州黄粑.jpg">
<div class="txt">
<h2>泸州黄粑</h2>
<p>
用糯米、红糖和姜叶等食材经过传统的工艺制作而成，吃起来软糯香甜、满口留香。
</p>
<a href="javaScript:" class="btn">查看详情</a>
</div>
</li>
<li>
<img src="美食/富顺豆花.jpg">
<div class="txt">
<h2>富顺豆花</h2>
<p>
一道四川自贡的地方特色小吃，主要食材是优质大豆。其口味滋润、散酥、浓香。
</p>
<a href="javaScript:" class="btn">查看详情</a>
</div>
</li>
<li>
<img src="美食/川北凉粉.jpg">
<div class="txt">
<h2>川北凉粉</h2>
<p>
阆中川北凉粉是四川阆中地区传统特色美食之一。凉粉采用优质豌豆去壳，用水浸泡后，磨成细浆...
</p>
<a href="javaScript:" class="btn">查看详情</a>
</div>
</li>
<li>
<img src="美食/梅菜扣肉.jpg">
<div class="txt">
<h2>梅菜扣肉</h2>
<p>
肉烂味香，吃起来咸中略带甜味，肥而不腻。
</p>
<a href="javaScript:" class="btn">查看详情</a>
</div>
</li>
<li>
<img src="美食/火边子牛肉.jpg">
<div class="txt">
<h2>火边子牛肉</h2>
<p>
古老盐都四川自贡市传统名菜，制作原料主要有牛肉、食盐等。以质优味美、片薄如纸、酥香绵长而闻名遐迩。
</p>
<a href="javaScript:" class="btn">查看详情</a>
</div>
</li>
<li>
<img src="美食/荤豆花.jpg">
<div class="txt">
<h2>荤豆花</h2>
<p>
在豆花的基础上，加入瘦肉等形成与原豆花不同的风格，由于它有肉，故别于原豆花而叫做荤豆花。
</p>
<a href="javaScript:" class="btn">查看详情</a>
</div>
</li>
</ul>
</div>
简介的浮动：
<script type="text/javascript" src="js/jquery.js" ></script>
<script> $(".box ul li").hover(function(e){
var left = $(this).offset().left, top = $(this).offset().top, right = $(this).offset().left + $(this).width(), bottom = top +$(this).height();//offset偏移值 //获取挡墙鼠标坐标 var x = e.pageX, y = e.pageY; //计算鼠标到边的距离 var sT = Math.abs(top - y), sL = Math.abs(left - x), sB = Math.abs(bottom - y), sR = Math.abs(right - x); var min = Math.min(sT,sL,sB,sR); if(min == sT){
//上面进入 $(this).find(".txt").css({
left:0,top:"-220px"}).stop().animate({
left:0,top:0},500); }else if(min == sB){
//下面进入 $(this).find(".txt").css({
left:0,top:"220px"}).stop().animate({
left:0,top:0},500); }else if(min == sR){
//右面进入 $(this).find(".txt").css({
left:"164px",top:0}).stop().animate({
left:0,top:0},500); }else if(min == sL){
//左面进入 $(this).find(".txt").css({
left:"-164px",top:0}).stop().animate({
left:0,top:0},500); } },function(e){
var left = $(this).offset().left, top = $(this).offset().top, right = $(this).offset().left + $(this).width(), bottom = top +$(this).height();//offset偏移值 //获取挡墙鼠标坐标 var x = e.pageX, y = e.pageY; //计算鼠标到边的距离 var sT = Math.abs(top - y), sL = Math.abs(left - x), sB = Math.abs(bottom - y), sR = Math.abs(right - x); var min = Math.min(sT,sL,sB,sR); if(min == sT){
//上面出去 $(this).find(".txt").stop().animate({
left:0,top:"-220px"},500); }else if(min == sB){
//下面出去 $(this).find(".txt").stop().animate({
left:0,top:"220px"},500); }else if(min == sR){
//右面出去 $(this).find(".txt").stop().animate({
left:"164px",top:0},500); }else if(min == sL){
//左面出去 $(this).find(".txt").stop().animate({
left:"-164px",top:0},500); } }); </script>
页面效果：
3.4 住宿页面
该页面设计的比较简单，就是通过文字和简单样式框的堆叠。
该页面需要用户进行输入包括入住地点、入住时间等等，其中关于入住的时间直接让用户进行选择，利用select实现选择功能，option实现列举所有的选项：年列举了2022到2023年，月列举12个选项，日列举了31选项。
具体代码：
<body>
<div>
<!-- <h2>这是一个住宿登记表</h2> -->
<div class="divtopic">
<h2>来一场说走就走的旅行</h2>
</div>
<table class="regist">
<tr>
<!-- <td colspan="3" class="btn"><h3></h3></td> -->
</tr>
<tr>
<td>地区：</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td class="rgtd">性别:</td>
<td>
<input type="radio" name="sex">男
<input type="radio" name="sex">女
</td>
</tr>
<tr>
<td class="rgtd">姓名：</td>
<td>
<input type="text">
</td>
</tr>
<tr></tr>
<tr>
<td>入住日期：</td>
<td width="40px">年：<select name="" id="">
<option value="">2022</option>
<option value="">2023</option>
</select></td>
<td>月：<select name="" id="">
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
<option value="">5</option>
<option value="">6</option>
<option value="">7</option>
<option value="">8</option>
<option value="">9</option>
<option value="">10</option>
<option value="">11</option>
<option value="">12</option>
</select></td>
<td>日:
<select name="" id="">
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
<option value="">5</option>
<option value="">6</option>
<option value="">7</option>
<option value="">8</option>
<option value="">9</option>
<option value="">10</option>
<option value="">11</option>
<option value="">12</option>
<option value="">13</option>
<option value="">14</option>
<option value="">15</option>
<option value="">16</option>
<option value="">17</option>
<option value="">18</option>
<option value="">19</option>
<option value="">20</option>
<option value="">21</option>
<option value="">22</option>
<option value="">23</option>
<option value="">24</option>
<option value="">25</option>
<option value="">26</option>
<option value="">27</option>
<option value="">28</option>
<option value="">29</option>
<option value="">30</option>
<option value="">31</option>
</select>
</td>
</tr>
<tr></tr>
<td height="20px"></td>
<tr>
<td>退房日期：</td>
<td width="40px">年：<select name="" id="">
<option value="">2022</option>
<option value="">2023</option>
</select></td>
<td>月：<select name="" id="">
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
<option value="">5</option>
<option value="">6</option>
<option value="">7</option>
<option value="">8</option>
<option value="">9</option>
<option value="">10</option>
<option value="">11</option>
<option value="">12</option>
</select></td>
<td>日:
<select name="" id="">
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
<option value="">5</option>
<option value="">6</option>
<option value="">7</option>
<option value="">8</option>
<option value="">9</option>
<option value="">10</option>
<option value="">11</option>
<option value="">12</option>
<option value="">13</option>
<option value="">14</option>
<option value="">15</option>
<option value="">16</option>
<option value="">17</option>
<option value="">18</option>
<option value="">19</option>
<option value="">20</option>
<option value="">21</option>
<option value="">22</option>
<option value="">23</option>
<option value="">24</option>
<option value="">25</option>
<option value="">26</option>
<option value="">27</option>
<option value="">28</option>
<option value="">29</option>
<option value="">30</option>
<option value="">31</option>
</select>
</td>
</tr>
<tr></tr>
<td height="20px"></td>
<tr>
<td>卧室数：</td>
<td colspan="2"><input type="checkbox" name="num">一室<input type="checkbox" name="num">二室<input type="checkbox" name="num">三室<input type="checkbox" name="num">不限</td>
</tr>
<tr></tr>
<td height="20px"></td>
<tr>
<td></td>
<td rowspan="2" colspan="2" fontsize="40px"><input type="submit" value="搜索" class="btn"></td>
</tr>
</table>
</div>
<div class="shouye"><a href="webpage.html"> 首页</a></div>
</body>
效果展示：
3.5 了解更多页面
该页面通过视频的方式展示四川的相关美食、文化、景点等。
通过mainbox类放入格式为MP4的视频，利用video标签进行播放视频。
具体代码：
<body>
<div class="mainbox">
<div>
<video controls="controls" height="100%">
<source src="vedio/四川美食.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
<source src="movie.webm" type="video/webm">
<object data="movie.mp4"controls="controls" height="100%">
<embed src="vedio/四川美食.mp4" controls="controls" height="100%">
</object>
</video>
<!-- <embed src="vedio/四川美食.mp4" type="vedio/webm" controls="controls" height="100%"> -->
</div>
<a href="webpage.html" class="shouye">首页</a>
</div>
</body>
样式：
<style> .mainbox {
position: relative; height: 979px; width: 1300px; margin: 0px auto; /* line-height: 40px; background-color: #47915d; background-color: black; */ background-image: url(images/images/tv_02.png); overflow: hidden; } .mainbox div{
position: absolute; width: 720px; height: 590px; top: 150px; left: 145px; border-radius: 50px; background-color: rgba(209, 41, 41, 0.3); overflow: hidden; /* z-index: -1; */ } </style>
效果展示：
四、遇到的问题及如何解决
问题一 、未解决
视频页面中的回到首页按钮不在右下而跑到左上了，但是其他四个页面的这个按钮却在右下，相同的代码，结果却不同。
解决方法：通过仔细的查看代码，并没有发现任何不对的地方，最后问题没有得到解决；但是这个问题并不影响功能的实现，仅仅是位置不对。
问题二、已解决
视频格式为MP4
开始仅仅用了video标签，但是将视频导入后网页没有所导入的视频。
通过查询资料，使用了embed标签，但是显示没有相关插件；直到最后发现标签video用的不正确，
<video controls="controls" height="100%">
<source src="vedio/四川美食.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
<source src="movie.webm" type="video/webm">
<object data="movie.mp4"controls="controls" height="100%">
<embed src="vedio/四川美食.mp4" controls="controls" height="100%">
</object>
</video>
问题三、已解决
在将编写的文件上传到gitee时出现错误显示某个文件超过有126.74MB的大小超过了git能够上传的大小，但是这个错误提示的文件名在我的文件夹中根本找不到。
通过对比大小找到了我的视频文件太大了。
五、总结
经过一个学期的学习，在老师的讲解下对网页的设计有了一定的认识和了解。再加上对教程有一个实践操作，基本上熟悉了html、css、JavaScript、bootstrap等各部分在网页制作中的功能。其唯一让我觉得有点遗憾的是，未能学会动态网页的制作，即Angular。在配置环境中遇到了太多问题，由于自身原因未能坚持学下去。但学无止境，我会在接下来的时间里继续学习对网页的设计包括自己还没学习到的知识，通过这中途径来加强自己的前端设计能力。
边栏推荐
- CV2 read video - and save image or video
- PHP 计算个人所得税
- Clickhouse principle analysis and application practice "reading notes (8)
- Why does the updated DNS record not take effect?
- 快手小程序担保支付php源码封装
- Redismission source code analysis
- Nanny level tutorial: Azkaban executes jar package (with test samples and results)
- XMeter Newsletter 2022-06｜企业版 v3.2.3 发布，错误日志与测试报告图表优化
- Why did MySQL query not go to the index? This article will give you a comprehensive analysis
- JVM memory and garbage collection-3-direct memory
猜你喜欢
Wechat applet uniapp page cannot jump: "navigateto:fail can not navigateto a tabbar page“
咋吃都不胖的朋友，Nature告诉你原因：是基因突变了
【SolidWorks】修改工程图格式
Flutter 3.0框架下的小程序运行
Matlab r2021b installing libsvm
Beaucoup d'enfants ne savent pas grand - chose sur le principe sous - jacent du cadre orm, non, ice River vous emmène 10 minutes à la main "un cadre orm minimaliste" (collectionnez - le maintenant)
【目标跟踪】|DiMP: Learning Discriminative Model Prediction for Tracking
Introduction à l'outil nmap et aux commandes communes
MQTT X Newsletter 2022-06 | v1.8.0 发布，新增 MQTT CLI 和 MQTT WebSocket 工具
CorelDRAW2022下载安装电脑系统要求技术规格
随机推荐
软件测试笔试题你会吗？
[target tracking] |dimp: learning discriminative model prediction for tracking
静态路由配置全面详解，静态路由快速入门指南
鱼和虾走的路
OpenGL/WebGL着色器开发入门指南
Is it necessary for project managers to take NPDP? I'll tell you the answer
2022国内十大工业级三维视觉引导企业一览
QML fonts use pixelsize to adapt to the interface
生命的高度
XMeter Newsletter 2022-06｜企业版 v3.2.3 发布，错误日志与测试报告图表优化
Introduction to Microsoft ad super Foundation
VIM string substitution
mysql/mariadb怎样生成core文件
Node JS maintains a long connection
A comprehensive and detailed explanation of static routing configuration, a quick start guide to static routing
XXL job of distributed timed tasks
数据链路层及网络层协议要点
metasploit
Summary of log feature selection (based on Tianchi competition)
The function of carbon brush slip ring in generator