《通信软件开发与应用》课程结业报告
1.报告要求
任务一：构建一个静态或动态网站。以下要求中任选A或B，要求如下：
A. 静态网站
采用纯 CSS 或你喜欢的任何 CSS 框架如 Bootstrap、MDB、Tailwind 等构建一个主题自选且不少于5个页面（Web Page）的网站
B. 动态网站
使用任何一个前端框架如 Angular 等进行某应用（如英雄之旅、代办事项、图书管理等）的开发，需要有 CRUD 即增删改查功能并有一定的样式。
无论你选择静态还是动态网站，该网站都需部署到你喜欢的网站托管服务器上如 Gitpage 等。
2.做的什么
这次我采用纯CSS以及BootStrap框架构造了一个有关于HTML学习网页的网站，根据qige.io以及自我总结的知识点分成了几个版块儿，每一个版块儿分用一个页面，其中还包括一个表格的实例以及最后面的引出JS部分学习的值得学习的案例。
采用的CSS样式设计出来的整体页面都较为简单，老实说也没有设计出来比较好看或者比较复杂的样式，都是采用最基本的CSS的东西，选用这个HTML学习的主题，这个想法也是我一开始就有的，打算根据老师的网页或者格式怎么样做一个类似的东西，但是最后就结果上面来说，做的很一般，比起老师做的教学网站上来说差很多，无论是从整体板式上来说还是从内容上来说。但是也是我跟着设计出来的成果，这里将它完整的呈现给大家。
3.开发过程
本次开发过程的开始时间比较晚，因此整体上面做的比较粗糙不够好。
1.主题选择
我这次选择的主题是有关于HTML教学的主题，将HTML学习划分成了几个部分，分开组成了几个网页。
2.关于登录页面
首先设置了一个登录的界面，用于登录本网站。
这里附上登录模板，与本人上学期采用的综合实践登录界面设计一致。
html {
height: 100%;
}
body {
margin:0;
padding:0;
font-family: sans-serif;
background: linear-gradient(#141e30, #243b55);
}
.login-box {
position: absolute;
top: 50%;
left: 50%;
width: 400px;
padding: 40px;
transform: translate(-50%, -50%);
background: rgba(0,0,0,.5);
box-sizing: border-box;
box-shadow: 0 15px 25px rgba(0,0,0,.6);
border-radius: 10px;
}
.login-box h2 {
margin: 0 0 30px;
padding: 0;
color: #fff;
text-align: center;
}
.login-box .user-box {
position: relative;
}
.login-box .user-box input {
width: 100%;
padding: 10px 0;
font-size: 16px;
color: #fff;
margin-bottom: 30px;
border: none;
border-bottom: 1px solid #fff;
outline: none;
background: transparent;
}
.login-box .user-box label {
position: absolute;
top:0;
left: 0;
padding: 10px 0;
font-size: 16px;
color: #fff;
pointer-events: none;
transition: .5s;
}
.login-box .user-box input:focus ~ label,
.login-box .user-box input:valid ~ label {
top: -20px;
left: 0;
color: #03e9f4;
font-size: 12px;
}
.login-box form a {
position: relative;
display: inline-block;
padding: 10px 20px;
color: #03e9f4;
font-size: 16px;
text-decoration: none;
text-transform: uppercase;
overflow: hidden;
transition: .5s;
margin-top: 40px;
letter-spacing: 4px
}
.login-box a:hover {
background: #03e9f4;
color: #fff;
border-radius: 5px;
box-shadow: 0 0 5px #03e9f4,
0 0 25px #03e9f4,
0 0 50px #03e9f4,
0 0 100px #03e9f4;
}
.login-box a span {
position: absolute;
display: block;
}
.login-box a span:nth-child(1) {
top: 0;
left: -100%;
width: 100%;
height: 2px;
background: linear-gradient(90deg, transparent, #03e9f4);
animation: btn-anim1 1s linear infinite;
}
@keyframes btn-anim1 {
0% {
left: -100%;
}
50%,100% {
left: 100%;
}
}
.login-box a span:nth-child(2) {
top: -100%;
right: 0;
width: 2px;
height: 100%;
background: linear-gradient(180deg, transparent, #03e9f4);
animation: btn-anim2 1s linear infinite;
animation-delay: .25s
}
@keyframes btn-anim2 {
0% {
top: -100%;
}
50%,100% {
top: 100%;
}
}
.login-box a span:nth-child(3) {
bottom: 0;
right: -100%;
width: 100%;
height: 2px;
background: linear-gradient(270deg, transparent, #03e9f4);
animation: btn-anim3 1s linear infinite;
animation-delay: .5s
}
@keyframes btn-anim3 {
0% {
right: -100%;
}
50%,100% {
right: 100%;
}
}
.login-box a span:nth-child(4) {
bottom: -100%;
left: 0;
width: 2px;
height: 100%;
background: linear-gradient(360deg, transparent, #03e9f4);
animation: btn-anim4 1s linear infinite;
animation-delay: .75s
}
@keyframes btn-anim4 {
0% {
bottom: -100%;
}
50%,100% {
bottom: 100%;
}
}
这里展示效果图：
3.关于主页面
成功登陆以后就可以来到我们的主界面：
展示部分代码:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Web学习</title>
<!-- Custom-Files -->
<link rel="stylesheet" href="css/bootstrap.css">
<!-- Bootstrap-Core-CSS -->
<link rel="stylesheet" href="css/mainpage.css" type="text/css" media="all" />
<!-- Style-CSS -->
<link href="css/font-awesome.min.css" rel="stylesheet">
<!-- Font-Awesome-Icons-CSS -->
<!-- //Custom-Files -->
</head>
<body>
<div id="fullpage">
<div id="banner" class="banner">
<img src= "images/demo.png" width="100" height="80" />
<a style="font-size: 60px;margin-bottom: 20p;">HTML学习</a>
</div>
<div id="navfirst">
<ul id="menu_upper" class="shape_top">
<li><a href="mainpage.html">何为HTML</a></li>
<li><a href="document.html">HTML文档分析</a></li>
<li><a href="link.html">HTML超链接图片路径</a></li>
<li><a href="table.html">表格样例（数据库）</a></li>
<li><a href="example.html">一个值得学习的样例</a></li>
</ul>
</div>
<div id="rua">
<div id="navsecond">
<ul id="menu_left" class="shape_left">
<li><a href="https://www.icourse163.org/">结课报告</a></li>
<li><a href="https://qige.io/"><棋歌></a></li>
<li><a href="https://www.csdn.net/"><CSDN></a></li>
<li><a href="https://www.acwing.com/"><Acwing></a></li>
<li><a href="https://www.bilibili.com/"><B站></a></li>
<li><a href="https://www.icourse163.org/"><慕课></a></li>
</ul>
</div>
<div id="mainpage">
<div class="div_content">
<h2>何为HTML</h2>
HTML是超文本标记语言（HyperText Markup Language）的缩写。我们用 HTML 来构建 Web 页面即所谓的网页。
<br>
<br>
"超文本"（hypertext）是指连接单个网站内或多个网站间的网页的链接。链接是网络的一个基本方面。只要将内容上传到互联网，并将其与他人创建的页面相链接，你就成为了万维网的积极参与者。
<br>
<br>
HTML 是构成 Web 世界的一砖一瓦。它定义了网页内容的含义和结构。除 HTML 以外的其它技术则通常用来描述一个网页的表现与展示效果（如 CSS），或功能与行为（如 JavaScript）。
<br>
<br>
HTML 不是一门编程语言，而是一种用于定义内容结构的标记语言。
<br>
<br>
在浏览器中看到的任何网页背后都是一个 HTML 文档，只要在网页上点击鼠标右键->查看源代码（用控制台工具也可）就可看到。
<br>
<br>
HTML以及我们后面将要学习的 CSS（Cascading Style Sheets 级联式样式表) 和 JavaScript 是构建广泛使用的Web程序的三剑客。
<br>
<br>
HTML以及我们后面将要学习的 CSS（Cascading Style Sheets 级联式样式表) 和 JavaScript 是构建广泛使用的Web程序的三剑客。
<br>
<br>
推荐前往W3School去学习网页知识<a href="https://www.w3school.com.cn/">W3school</a>
<p class="tip"><span>提示：</span>您可能已经注意到了，W3School 站点内的链接外观与默认的链接外观非常不同。您可以使用 <a href="https://m.runoob.com/css/css-pseudo-classes.html" title="CSS 伪类 (Pseudo-classes)">CSS 伪类</a> 向文本超链接添加复杂而多样的样式。</p>
</div>
<div class="div_content">
<h2>术语解释</h2>
<p><a href="https://baike.baidu.com/item/%E8%B6%85%E6%96%87%E6%9C%AC/2832422?fr=aladdin">什么是超文本？</a></p>
</div>
<div class="div_content">
<h2>提示和注释</h2>
<p class="tip"><span>提示：</span>如果不使用 href 属性，则不可以使用如下属性：download, hreflang, media, rel, target 以及 type 属性。</p>
<p class="tip"><span>提示：</span>被链接页面通常显示在当前浏览器窗口中，除非您规定了另一个目标（target 属性）。</p>
<p class="tip"><span>提示：</span>请使用 CSS 来设置链接的样式。</p>
</div>
</div>
</div>
</div>
</body>
</html>
展示相关CSS代码块：
*{
padding: 0;
margin: 0;
}
body{
background-color: rgba(255,247,230,1.00);
}
.shape_top{
margin-bottom: 10px;
margin-left: 5px;
width: 79.68%;
height: 50px;
background-color: gray;
list-style: none;
}
.shape_top li{
width: 19.99%;
text-align: center;
padding-top: 12px;
padding-bottom: 12px;
float: left;
border-right: 0.1px solid #164788;
}
.shape_top li a{
font-size: 20px;
display: block;
width: 100%;
text-decoration: none;
color: white;
font-weight: bold;
}
.shape_top li:hover{
background-color: lightgray;
}
.banner{
margin: auto;
}
.banner img{
margin-left: 5px;
}
.shape_left{
width: 80%;
height: 25%;
margin-left: 5px;
background-color: gray;
list-style: none;
}
.shape_left li{
height: 20%;
width: 100%;
text-align: left;
float: left;
border-bottom: 0.2px solid #164788;
}
.shape_left li a{
font-size: 15px;
display: block;
width: 40%;
text-decoration: none;
color: white;
font-weight: bold;
margin-bottom: 0px;
margin-top: 8px;
}
.shape_left li:hover{
background-color: lightgray;
}
.div_content{
border-bottom: 2px solid #164788;
margin-bottom: 10px;
margin-top: 5px;
margin-left: 20px;
margin-right: 20px;
}
div#rua{
width: 80%;
display:flex;
flex-direction:row;
}
div#navsecond{
float: left;
width: 20%;
}
div#mainpage{
width: 80%;
height: 800px;
background-color: darkgray;
}
4 .关于其他页面
这里展示一下整体页面并且附上相关部分代码：
HTML文档分析部分：
相关CSS代码：
/* css for all */
* {background-image:url('https://37.media.tumblr.com/96afd6735a6dc54741e6a4d1c4235590/tumblr_n47g5hfpkh1tv9xj5o1_400.png')}
.all {text-align: center;font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;}
a {text-decoration:none;}
/* css for all */
/* mainpage link */
#mainpage {color:#451660;text-decoration:underline;}
#mainpage:link {color:#451660;}
#mainpage:visited {color:#451660;}
#mainpage:hover {color:#BA1660;}
#mainpage:active {color:#DC3882;}
/* mainpage link */
/* header */
.head {font-family: Perpetua, Baskerville, "Big Caslon", "Palatino Linotype", Palatino, "URW Palladio L", "Nimbus Roman No9 L", serif;font-size:4.5em;margin:20px auto 0px auto;color:#451660;background-image:none;background-color:#DED9C2;border-radius:20px;width:70%;}
/* header */
/* list */
.list1>a {padding:0px 10px;font-size:24px;background-image:none;background-color: #CDC8B1;border-style:groove;border-color:#707070;}
.list1>a:link {color:#780570;}
.list1>a:visited {color:#780570;}
.list1>a:hover {color:#CD0570;}
.list1>a:active {color:#DF2792;}
/* list */
/* text */
/* text *//* css for all */
* {background-image:url('https://37.media.tumblr.com/96afd6735a6dc54741e6a4d1c4235590/tumblr_n47g5hfpkh1tv9xj5o1_400.png')}
.all {text-align: center;}
a {text-decoration:none;}
/* css for all */
/* mainpage link */
#mainpage {color:#451660;text-decoration:underline;font-size:1.5em;}
#mainpage:link {color:#451660;}
#mainpage:visited {color:#451660;}
#mainpage:hover {color:#BA1660;}
#mainpage:active {color:#DC3882;}
/* mainpage link */
/* list */
.list1>a {padding:0px 10px;font-size:1.5em;background-image:none;background-color: #CDC8B1;border-style:groove;border-color:#707070;}
.list1>a:link {color:#780570;}
.list1>a:visited {color:#780570;}
.list1>a:hover {color:#CD0570;}
.list1>a:active {color:#DF2792;}
/* list */
/* text */
/* text */
.textblock {width:63%;margin:0 auto;text-align:justify;}
.textblock {line-height:270%;}
.textblock {width:800px;}
.textblock {margin:4% 0px 0px 0px;padding:10px 40px;display:inline-block;background-image:none;background-color:#EFD9C2;border-style:groove;border-color:#707070;}
.textblock>p, .textblock p strong {background-image:none;background-color:#EFD9C2;font-size:28px;font-family:Times New Roman}
/* text */
/* text */
/* footer */
footer>p {font-size:1.3em;}
/* footer */
相关HTML页面：
<html>
<head>
<title> How to accumulate happiness? </title>
<meta name="description" content="Religion: Hedonism">
<meta name="keywords" content="Hedonism,Hedonion,happiness,joy">
<meta name="author" content="Sam Tsai">
<meta charset="UTF-8">
<!-- Custom-Files -->
<link rel="stylesheet" href="css/bootstrap.css">
<!-- Bootstrap-Core-CSS -->
<link rel="stylesheet" href="css/docement.css" type="text/css" media="all" />
<!-- Style-CSS -->
<link href="css/font-awesome.min.css" rel="stylesheet">
<!-- Font-Awesome-Icons-CSS -->
<!-- //Custom-Files -->
</head>
<div class="all">
<header class="head">HTML文档分析结构</header>
<!-- separating line -->
<body>
<br/><br/><br/><br/>
<div class="list1">
<a href="mainpage.html"> 何为HTML </a>
<a href="document.html"> HTML文档分析 </a>
<a href="link.html"> HTML超链接图片路径</a>
<a href="table.html"> 表格样例（数据库）</a>
<a href="example.html"> 一个值得学习的样例 </a>
</div>
<div class="textblock"
<p>
<p><strong>HTML文档分析</strong> </p>
<br>
<h3>HTML元素</h3>
<p>
HTML 使用"标记"（markup）来注明文本、图片和其他内容，以便于在浏览器中显示。HTML 标记包含一些规定的"元素"如 <head>，<title>，<body>，<header>，<footer>，
<section>，<p>，<div>，<span>，<img>，<aside>，<audio>，<canvas>，<datalist>，<details>，<embed>，<nav>，<output>，<progress>，<video> 等等。
检查我们刚创建的 HTML 文档你会发现，整个 HTML 就由一个个元素组成（可以嵌套），而元素则一般由一对标签（tag）构成。
</p>
<br>
<h3>剖析一个HTML元素</h3>
<p>
如下所示的一个用于展示段落的元素：
<br>
<img src= "images/demo1.png" width="500" height="250" />
<br>
1.开始标签（Opening tag）：包含元素的名称（本例为 p），被左、右角括号所包围。表示元素从这里开始或者开始起作用 —— 在本例中即段落由此开始。<br>
2.结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾 —— 在本例中即段落在此结束。初学者常常会犯忘记包含结束标签的错误，这可能会产生一些奇怪的结果。<br>
3.内容（Content）：元素的内容，本例中就是所输入的文本本身。<br>
4.元素（Element）：开始标签、结束标签与内容相结合，便是一个完整的元素。<br>
</p>
<h3>剖析HTML文档</h3>
<p>
对于我们前面创建的 HTML 文档，分析如下：
<br>
1.<!DOCTYPE html>: 声明文档类型。出于历史原因需要，现在可有可无。<br>
2.<html></html>: <html>元素。这个元素包裹了整个完整的页面，是一个根元素，其它元素都嵌套到其中。<br>
3.<head></head>: <head>元素。 这个元素是一个容器，它包含了所有你想包含在HTML页面中但不想在HTML页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述，CSS样式，字符集声明等等。<br>
4.<meta charset="utf-8">: 这个元素设置文档使用utf-8字符集编码，utf-8字符集包含了人类大部分的文字。基本上他能识别你放上去的所有文本内容。毫无疑问要使用它，并且它能在以后避免很多其他问题。<br>
5.<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">: 指定页面的图标，出现在浏览器标签上。(试一试：你可随意下载一个.ico图标文件到工作目录中)<br>
6.<title></title>: 设置页面标题，出现在浏览器标签上，当你标记/收藏页面时它可用来描述页面。<br>
7.<body></body>: <body>元素。 包含你能在页面看到的所有内容，包括文本，图片，音频，游戏等等。
<br>
<br>
</p>
</div>
<hr/>
<br>
<br>
<footer>
<p>这是一个底栏啊，我不知道写什么<br/>
</p>
</footer>
</body>
</div>
表单格式样例展示及相关代码：
HTML页面部分代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Web学习</title>
<link rel="stylesheet" href="css/table.css" type="text/css" media="all" />
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet"
href="css/bootstrap.min.css">
<link rel="stylesheet"
href="resource/dist/css/AdminLTE.min.css">
<link rel="stylesheet"
href="resource/dist/css/skins/_all-skins.min.css">
<link rel="stylesheet"
href="resource/font-awesome-4.4.0/css/font-awesome.min.css">
<link rel="stylesheet"
href="css/dataTables.bootstrap.css">
</head>
<body>
<section>
<!--for demo wrap-->
<h1>数据库作业表格样例</h1>
<div class="wrapper">
<div class="main-header " >
<div class="navbar navbar-static-top pull-left">
<!--顶部导航栏菜单按钮-->
<div class="collapse navbar-collapse pull-left" id="navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown"><a href="mainpage.html">何为HTML</html> <span
class=""></span></a></li>
<li class="dropdown"><a href="document.html" class="dropdown-toggle" id="goodsupplier"
data-toggle="dropdown">HTML文档分析结构<span class=""></span></a></li>
<li class="dropdown"><a href="link.html" class="dropdown-toggle" id="good"
data-toggle="dropdown">HTML超链接图片路径<span class=""></span></a></li>
<li class="dropdown"><a href="table.html" class="dropdown-toggle" id="goodsort"
data-toggle="dropdown">表格样例（数据库）<span class=""></span></a></li>
<li class="dropdown"><a href="example.html" class="dropdown-toggle" id="buygood"
data-toggle="dropdown">一个值得学习的样例<span class=""></span></a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
<!--顶部导航栏右侧的-->
</div>
</div>
</div>
<div class="box-header with-border">
<button type="button" name="add" id="addgoodsorder"
class="btn btn-default pull-left addBtn ">
<i class="fa fa-plus-circle btn-default"></i>提交订单
</button>
<button type="button" name="cancel" id="cancel-btn"
class="btn pull-left resetBtn btn-default" title="刷新">
<i class="fa fa-refresh btn-default"></i>刷新
</button>
<button type="button" name="returnBtn" id="returnBtn"
class="btn pull-left resetBtn btn-default" title="返回">
<i class="fa fa-left btn-default"></i>返回
</button>
<div class="form-inline pull-right">
<button type="button" name="search" id="search-btn"
class="btn btn-default pull-right searchBtn btn-default" title="查询">
<i class="fa fa-search btn-default"></i>
</button>
<input type="text"
class="form-control pull-right name-search position-search"
id="findBrandById" placeholder="编号" />
</div>
</div>
<div class="tbl-header">
<table cellpadding="0" cellspacing="0" border="0">
<thead>
<tr>
<th>Code</th>
<th>Company</th>
<th>Price</th>
<th>Change</th>
<th>Change %</th>
</tr>
</thead>
</table>
</div>
<div class="tbl-content">
<table cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td>AAC</td>
<td>AUSTRALIAN COMPANY </td>
<td>$1.38</td>
<td>+2.01</td>
<td>-0.36%</td>
</tr>
<tr>
<td>AAD</td>
<td>AUSENCO</td>
<td>$2.38</td>
<td>-0.01</td>
<td>-1.36%</td>
</tr>
<tr>
<td>AAX</td>
<td>ADELAIDE</td>
<td>$3.22</td>
<td>+0.01</td>
<td>+1.36%</td>
</tr>
<tr>
<td>XXD</td>
<td>ADITYA BIRLA</td>
<td>$1.02</td>
<td>-1.01</td>
<td>+2.36%</td>
</tr>
<tr>
<td>AAC</td>
<td>AUSTRALIAN COMPANY </td>
<td>$1.38</td>
<td>+2.01</td>
<td>-0.36%</td>
</tr>
<tr>
<td>AAD</td>
<td>AUSENCO</td>
<td>$2.38</td>
<td>-0.01</td>
<td>-1.36%</td>
</tr>
<tr>
<td>AAX</td>
<td>ADELAIDE</td>
<td>$3.22</td>
<td>+0.01</td>
<td>+1.36%</td>
</tr>
<tr>
<td>XXD</td>
<td>ADITYA BIRLA</td>
<td>$1.02</td>
<td>-1.01</td>
<td>+2.36%</td>
</tr>
<tr>
<td>AAC</td>
<td>AUSTRALIAN COMPANY </td>
<td>$1.38</td>
<td>+2.01</td>
<td>-0.36%</td>
</tr>
<tr>
<td>AAD</td>
<td>AUSENCO</td>
<td>$2.38</td>
<td>-0.01</td>
<td>-1.36%</td>
</tr>
<tr>
<td>AAX</td>
<td>ADELAIDE</td>
<td>$3.22</td>
<td>+0.01</td>
<td>+1.36%</td>
</tr>
<tr>
<td>XXD</td>
<td>ADITYA BIRLA</td>
<td>$1.02</td>
<td>-1.01</td>
<td>+2.36%</td>
</tr>
<tr>
<td>AAC</td>
<td>AUSTRALIAN COMPANY </td>
<td>$1.38</td>
<td>+2.01</td>
<td>-0.36%</td>
</tr>
<tr>
<td>AAD</td>
<td>AUSENCO</td>
<td>$2.38</td>
<td>-0.01</td>
<td>-1.36%</td>
</tr>
<tr>
<td>AAX</td>
<td>ADELAIDE</td>
<td>$3.22</td>
<td>+0.01</td>
<td>+1.36%</td>
</tr>
<tr>
<td>XXD</td>
<td>ADITYA BIRLA</td>
<td>$1.02</td>
<td>-1.01</td>
<td>+2.36%</td>
</tr>
<tr>
<td>AAC</td>
<td>AUSTRALIAN COMPANY </td>
<td>$1.38</td>
<td>+2.01</td>
<td>-0.36%</td>
</tr>
<tr>
<td>AAD</td>
<td>AUSENCO</td>
<td>$2.38</td>
<td>-0.01</td>
<td>-1.36%</td>
</tr>
<tr>
<td>AAX</td>
<td>ADELAIDE</td>
<td>$3.22</td>
<td>+0.01</td>
<td>+1.36%</td>
</tr>
<tr>
<td>XXD</td>
<td>ADITYA BIRLA</td>
<td>$1.02</td>
<td>-1.01</td>
<td>+2.36%</td>
</tr>
<tr>
<td>AAC</td>
<td>AUSTRALIAN COMPANY </td>
<td>$1.38</td>
<td>+2.01</td>
<td>-0.36%</td>
</tr>
<tr>
<td>AAD</td>
<td>AUSENCO</td>
<td>$2.38</td>
<td>-0.01</td>
<td>-1.36%</td>
</tr>
<tr>
<td>AAX</td>
<td>ADELAIDE</td>
<td>$3.22</td>
<td>+0.01</td>
<td>+1.36%</td>
</tr>
<tr>
<td>XXD</td>
<td>ADITYA BIRLA</td>
<td>$1.02</td>
<td>-1.01</td>
<td>+2.36%</td>
</tr>
<tr>
<td>AAC</td>
<td>AUSTRALIAN COMPANY </td>
<td>$1.38</td>
<td>+2.01</td>
<td>-0.36%</td>
</tr>
<tr>
<td>AAD</td>
<td>AUSENCO</td>
<td>$2.38</td>
<td>-0.01</td>
<td>-1.36%</td>
</tr>
<tr>
<td>AAX</td>
<td>ADELAIDE</td>
<td>$3.22</td>
<td>+0.01</td>
<td>+1.36%</td>
</tr>
<tr>
<td>XXD</td>
<td>ADITYA BIRLA</td>
<td>$1.02</td>
<td>-1.01</td>
<td>+2.36%</td>
</tr>
<tr>
<td>AAC</td>
<td>AUSTRALIAN COMPANY </td>
<td>$1.38</td>
<td>+2.01</td>
<td>-0.36%</td>
</tr>
<tr>
<td>AAD</td>
<td>AUSENCO</td>
<td>$2.38</td>
<td>-0.01</td>
<td>-1.36%</td>
</tr>
<tr>
<td>AAX</td>
<td>ADELAIDE</td>
<td>$3.22</td>
<td>+0.01</td>
<td>+1.36%</td>
</tr>
<tr>
<td>XXD</td>
<td>ADITYA BIRLA</td>
<td>$1.02</td>
<td>-1.01</td>
<td>+2.36%</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
</body>
</html>
CSS样式：
h1{
font-size: 30px;
color: #fff;
text-transform: uppercase;
font-weight: 300;
text-align: center;
margin-bottom: 15px;
}
table{
width:100%;
table-layout: fixed;
}
.tbl-header{
background-color: rgba(255,255,255,0.3);
}
.tbl-content{
height:300px;
overflow-x:auto;
margin-top: 0px;
border: 1px solid rgba(255,255,255,0.3);
}
th{
padding: 20px 15px;
text-align: left;
font-weight: 500;
font-size: 12px;
color: #fff;
text-transform: uppercase;
}
td{
padding: 15px;
text-align: left;
vertical-align:middle;
font-weight: 300;
font-size: 12px;
color: #fff;
border-bottom: solid 1px rgba(255,255,255,0.1);
}
/* demo styles */
@import url(https://fonts.googleapis.com/css?family=Roboto:400,500,300,700);
body{
background: -webkit-linear-gradient(left, #25c481, #25b7c4);
background: linear-gradient(to right, #25c481, #25b7c4);
font-family: 'Roboto', sans-serif;
}
section{
margin: 50px;
}
/* follow me template */
.made-with-love {
margin-top: 40px;
padding: 10px;
clear: left;
text-align: center;
font-size: 10px;
font-family: arial;
color: #fff;
}
.made-with-love i {
font-style: normal;
color: #F50057;
font-size: 14px;
position: relative;
top: 2px;
}
.made-with-love a {
color: #fff;
text-decoration: none;
}
.made-with-love a:hover {
text-decoration: underline;
}
/* for custom scrollbar for webkit browser*/
::-webkit-scrollbar {
width: 6px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
::-webkit-scrollbar-thumb {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
最后的JS样例展示：
部分代码：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Do You Know Javascript?</title>
<meta
name="description"
content="A quiz to test your knowledge of basic Javascript."
/>
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="css/example.css" />
<link
rel="stylesheet"
type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.1.1/normalize.min.css"
/>
</head>
<body>
<section role="main" id="start-page">
<div id="start-title"><h1>Do You Know Javascript?</h1></div>
<div id="intro-page">
<p>
A quick quiz to test your
<strong>knowledge of basic Javascript</strong>
</p>
</div>
<div id="start-page-button">
<button id="js-start-button">Start</button>
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="scripts.js">
"use strict";
//Global Variable declarations for initial question and initial correct answer points
let questionNum = 1;
let correctAnswers = 0;
/* Create arrays of questions and answers */
//All Questions Object
const createQuestionSet = [
{
number: 1,
text: `Javascript is going to be an outdated technology, don't learn it`,
ans1: `(a) True: Go is the new hype man! `,
ans2: `(b) False: Jeff Atwood said "Any application that can be written in JavaScript, will eventually be written in JavaScript"`,
ans3: `(c) Javascript is lame of course`
},
{
number: 2,
text: `JavaScript is the best language for data science?`,
ans1: `(a) True: Dude, JavaScript can do anything`,
ans2: `(b) False: Yes you can use JavaScript for data science, but Python is better designed for data science`,
ans3: `(c) It's the best type of language to talk about
coffee brewery scripting art using Java beans`
},
{
number: 3,
text: `JavaScript can only be used on the frontend`,
ans1: `(a) True`,
ans2: `(b) False`,
ans3: `(c) You can do whatever you want with Javacript, like build complex desktop app`
},
{
number: 4,
text: `The name JavaScript is borrowed from another programming language
"Java"`,
ans1: `(a) True`,
ans2: `(b) False`,
ans3: `(c) Yes, someone felt down from a tree and a Java bean hit their head and they saw "script" in the clouds`
},
{
number: 5,
text: `You cannot become a Web Developer just with JavaScript`,
ans1: `(a) True`,
ans2: `(b) False`,
ans3: `(c) You need a 4 year undergrad degree, 2 year masters, and 5 year PHD to become a web developer`
}
];
//All Answers Object
const ANSWERS = [
`(b) False: Jeff Atwood said "Any application that can be written in JavaScript, will eventually be written in JavaScript"`,
`(b) False: Yes you can use JavaScript for data science, but Python is better designed for data science`,
`(b) False`,
`(b) False`,
`(b) False`
];
/* Create arrays of questions and answers */
/* Render the first question set*/
//Start Button function
function startButton() {
$("#js-start-button").click(function(event) {
nextQuestion();
});
}
//Next Question Render Function
function nextQuestion() {
const question = createQuestionSet[questionNum - 1];
const questionsAnswered = questionNum - 1;
$("#start-page").html(
questionTemplate(correctAnswers, question, questionsAnswered)
);
}
//Question Templates
function questionTemplate(correctAnswers, question, questionsAnswered) {
return `
<section id="quiz-app" role="main">
<div id ="question-title">
<h2 id="question">${question.text}</h2>
</div>
<form id= "js-form">
<fieldset>
<br>
<label>
<input class="answer" type="radio" name="option" checked></input>
<span>${question.ans1}</span>
</label>
<br>
<label>
<input class="answer" type="radio" name="option"></input>
<span>${question.ans2}</span>
</label>
<br>
<label>
<input class="answer" type="radio" name="option"></input>
<span>${question.ans3}</span>
</label>
<br>
</fieldset>
</form>
<button id="js-submit-button">Submit</button>
<div id="status-bar">
<span id="question-count">Question: ${question.number}/5</span> <br>
<span id="score-count">Score: ${correctAnswers}/${questionsAnswered}</span>
</div>
</section>
`;
}
function findLongestWordLength(str) {
return str.split(" ").sort(function(a, b) {
return b.length - a.length;
})[0];
}
// findLongestWordLength("The quick brown fox jumped over the lazy dog")
//Submit Button function
function submitButton() {
$("#start-page").on("click", "#js-submit-button", function(event) {
event.preventDefault();
const answer = $("input:checked").siblings("span");
const userIsCorrect = userAnswer(answer);
if (userIsCorrect) {
rightFeedback();
} else {
wrongFeedback();
}
});
}
//Next Question button function
function nextButton() {
$("#start-page").on("click", "#js-next-button", function(event) {
if (questionNum === 5) {
resultsPage(correctAnswers);
} else {
iterateQuestion();
nextQuestion();
}
});
}
/* Render the first question set*/
/* Question Logics & Rendering */
//Check if its the right answer
function userAnswer(answer) {
if (answer.text() === ANSWERS[questionNum - 1]) {
return true;
} else {
return false;
}
}
//Generate correct answer feedback
function rightFeedback() {
$("#start-page").html(correctFeedback);
iterateCorrectAnswers();
}
//Correct answer feedback UI template
const correctFeedback = `
<section id="feedback-page" role="main">
<h2 >Correct! The right answer is: ${ANSWERS[questionNum + 1]}</h2>
<img src="https://media.giphy.com/media/3o7absbD7PbTFQa0c8/giphy.gif" alt="Spongebod thumbs up">
</section>
<button id="js-next-button">Next</button>
`;
//Wrong answer feedback html
function wrongFeedback() {
$("#start-page").html(wrongTemplate(questionNum));
}
//Wrong answer feedback UI template
function wrongTemplate(questionNum) {
return `
<section id="feedback-page" role="main">
<h2>Sorry, wrong answer! The right answer was ${
ANSWERS[questionNum - 1]
}!</h2>
<img src="https://media.giphy.com/media/l4FGuhL4U2WyjdkaY/giphy.gif" alt="Trump Wrong">
</section>
<button id="js-next-button">Next</button>
`;
}
//Iterate through questions function
function iterateQuestion() {
questionNum++;
}
//Iterate through correct answers
function iterateCorrectAnswers() {
correctAnswers++;
}
/* Question Logics & Rendering */
//Results page UI template
function resultsPage(correctAnswers) {
$("#start-page").html(`
<section id="final-page">
<h2>Final Score: ${correctAnswers} out of 5</h2>
</section>
<button id="js-restart-button">Try Again?</button>
`);
}
//Restart Button Function
function restartButton() {
$("#start-page").on("click", "#js-restart-button", function(event) {
questionNum = 1;
correctAnswers = 0;
//Recursion to call nextQuestion method
nextQuestion();
});
}
//Function to handle button clicks (Recursion)
function handleButtons() {
startButton();
submitButton();
nextButton();
restartButton();
}
//Call action button that sets all the other functions
handleButtons();
/* 'use strict';
function renderIntroPage() {
console.log('`renderIntroPage` ran');
};
function renderQuestionPage() {
console.log('`renderQuestionPage` ran');
};
function renderAnswerPage() {
console.log('`renderAnswerPage` ran');
};
function renderFinalPage() {
console.log('`renderFinalPage` ran');
};
function handleQuestions() {
renderIntroPage();
renderQuestionPage();
renderAnswerPage();
renderFinalPage();
}
$(handleQuestions);
*/
</script>
</body>
</html>
4.遇到的问题及解决方法
在使用GitHub进行网络托管的时候，有些图片能在托管的网页上显示，而有些图片则不能在托管网页上显示。
我们需要找到代码中图片的链接，在网页上去下载图片到本地文件中，更改图片的代码后，在重新上传代码和图片文件就可以了。
即可解决问题。
5.遇到的问题
本次课程结束后还是存在很多遗憾的，比如未能掌握Angular框架，所以我打算再暑假的时候学习，掌握至少一样或VUE或Angular框架，以便于后续的学习帮助。
6.实验总结
本次课程设计要求我们通过自己制作并完成一整个的网页整体设计，学习并且运用了HTML,CSS,JS学习的相关知识，对于以后的课程设计都有很大的帮助，这门选修课也让我收获了很多。比如我学习到了很多关于做人方面的东西，在比如我学会了对于网页进行相关编写，并且将他托管到GITHUB上，自己也学会了网页设计可以说受益匪浅。
153
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
