基于教学的网站框架@TOC
☆首先，思考我的建立一个网站的初衷，我的初衷是能有一个网站使用用来学习计算机网路这一门课的知识，所以我要建立一个总结计算机网络知识点的网站
☆canvas用于绘制主页的标题，优点是可以随时修改其中的样式
☆JS用于轮播图的，代码的图片素材准备不足，实际上可以添加一些关于平台的公告图片
网站主页面
（div盒子模型（CSS略））HTML代码如下
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html ">
<head lang="en ">
<meta charset="UTF-8 ">
<title>计网知识总结的网站</title>
<link rel="icon " href="img/1.ico "/>
<link class=" " rel="stylesheet
" href="css/style.css "/>
</head>
<body>
<div id="myBtn "></div>
<div class="header ">
<div class="top ">
<div class="wp ">
<div class="z ">
<span><a href=" ">设为首页</a></span>
<span><a href=" ">收藏本站</a></span>
</div>
<div class="y ">
<span><input type="date " class="ajun "/></span>
<span class="mr_0 ">多云25°C/32°C</span>
</div>
</div>
</div>
<div class="wp ">
<div class="logos ">
<div class="logo z ">
<h1>计算机网络(总结知识点)</h1>
</div>
<div class="dianhua y ">
<span>
计网考试：元年14号
</span>
</div>
<div class="sousuo y ">
<form action="index.html " method="get ">
<table cellspacing="0 " border="0
" cellpadding="0 ">
<tr>
<td class="s_z z "> </td>
<td class="s_c z ">
<input type="text " name="text
" id="s_c_txt "/>
</td>
<td class="s_y z ">
<button type="submit " name="submit
"></button>
</td>
</tr>
</table>
</form>
</div>
</div>
</div>
<div class="nav ">
<div class="wp ">
<ul>
<li class="a ">
<a href="index.html ">网站首页</a>
</li>
<li>
<a href="index.html ">课程简介</a>
</li>
<li>
<a href="index.html ">课程描述</a>
</li>
<li>
<a href="index.html ">考试范围</a>
</li>
<li>
<a href="index.html ">视频教程</a>
</li>
<li>
<a href="index.html ">学生管理</a>
</li>
<li>
<a href="index.html ">成绩查询</a>
</li>
<li>
<a href="index.html ">联系我们</a>
</li>
</ul>
</div>
</div>
</div>
<div class="center ">
<div class="wp ">
<canvas id="myCanvas " width="960 " height="260 " style="border: 2px solid darkslategrey ">
您的浏览器不支持HTML5 canvas 标签
</canvas>
<div class="jianjie z ">
<div class="tit ">
<h1><ins>计算机网络的原理体系结构
</ins>
</h1>
<span><a href=" ">More>></a>
</span>
</div>
<div class="jianj ">
<img src="img/jw1.PNG " alt=" "/>
<p>
</p>
<p>
在学习计算机网络的原理时可采用折衷的办法， 即综合OSI和TCP/IP的优点，采用一种原理体系结构，它只有五层，这样既简明又能将概念阐述清楚。明白网络分层的优缺点。
</p>
<p>应用程序：FTP、E-mail、Telnet
</p>
<p>传输层：将报文数据传给正确的应用程序，提供可靠的数据传输
</p>
<li>网络层：将分组（包）传给正确的主机，数据分组、路由选择</li>
<li>链路层：将数据组成帧，差错控制、流量控制、媒体访问控制
</li>
<li>物理层：规定物理信号、接口、信号形式、速率</li>
</div>
</div>
<div class="xinwen z ">
<div class="tit ">
<h1><ins>计算机网络的重点及难点
</ins>
</h1>
<span><a href=" ">More>></a>
</span>
</div>
<div class="xw_c ">
<ul>
<li class="a ">
<a href=" ">
<div>
<H2>
课程重点
</H2>
<b>计算机网络课程学习的难点:
计算网络是计算机技术和通信技术的结合
计算机网络是一个庞大系统，涉及的概念较多
计算机网络既是抽象的也是具体的，要充分理解Internet设计理念。
网络分层的目的与协议、接口的概念。
</b>
</div>
</a>
</li>
<li>
<a href=" ">
<h5>计算机网络类型</h5>
<span>2018-09-06</span>
</a>
<li>
<a href=" ">
<h5>计算机网络体系结构</h5>
<span>2018-09-26</span>
</a>
</li>
<li>
<a href=" ">
<h5>Internet和TCP/IP协议
</h5>
<span>2018-10-13</span>
</a>
</li>
<li>
<a href=" ">
<h5>计算机网络的安全</h5>
<span>2018-11-03</span>
</a>
</li>
<li>
<a href=" ">
<h5>因特网上的音频/视频服务</h5>
<span>2018-11-23</span>
</a>
</li>
<li>
<a href=" ">
<h5>无线网络与下一代因特网</h5>
<span>2018-12-03</span>
</a>
</li>
</ul>
</div>
</div>
<div class="chanpin z ">
<div class="tit ">
<img src="img/chanpin.jpg " alt=" "/>
<span><a href=" ">More>></a></span>
</div>
<div class="cp_c ">
<ul>
<li><a href=" "><img src="img/timg1.PNG " alt="
"/><span>网络类型1：按距离划分</span></a></li>
<li><a href=" "><img src="img/timg1.PNG " alt="
"/><span>网络类型2：按交换方式划分</span></a></li>
<li><a href=" "><img src="img/timg1.PNG " alt="
"/><span>网络类型3：按拓扑结构划分</span></a></li>
<li><a href=" "><img src="img/timg1.PNG " alt="
"/><span>网络类型4：按传输媒体划分</span></a></li>
<li><a href=" "><img src="img/timg1.PNG " alt="
"/><span>网络类型5：按传输速率划分</span></a></li>
<li class="mr_0 "><a href=" "><img src="img/timg1.PNG " alt=" "/><span>网络类型6：按适用范围分</span></a></li>
<li><a href=" "><img src="img/timg1.PNG " alt="
"/><span>物理层</span></a></li>
<li><a href=" "><img src="img/timg1.PNG " alt="
"/><span>网络层</span></a></li>
<li><a href=" "><img src="img/timg1.PNG " alt="
"/><span>数据链路层</span></a></li>
<li><a href=" "><img src="img/timg1.PNG " alt="
"/><span>应用层</span></a></li>
<li><a href=" "><img src="img/timg1.PNG " alt="
"/><span>传输层</span></a></li>
<li class="mr_0 "><a href=" "><img src="img/timg1.PNG " alt=" "/><span>HTTP及TCP/IP层</span></a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="cl "></div>
<div class="footer ">
<div class="wp ">
<div class="foot_top ">
<span class="z "><a href="index.html ">关于我们</a> |
<a href="index.html ">联系方式</a> |
<a href="index.html ">给我留言</a> |
<a href="index.html ">加入我们 </a>
</span>
<span class="y ">@2019 warrenLee版权所有
</span>
</div>
<div class="foot_bottom ">
<p>
友情链接：<a href=" " target="_blank ">麦子学院 </a>
<a href=" " target="_blank ">教育部</a>
<a href=" " target="_blank ">教务处 </a>
<a href=" " target="_blank ">学习网站 </a>
<a href=" " target="_blank ">图书馆 </a>
<a href="#myBtn " class="y ">返回顶部</a>
</p>
</div>
</div>
</div>
<script>
var c=document.getElementById("myCanvas ");
var ctx=c.getContext("2d
");
var ct=c.getContext("2d
");
// Create gradient
var grd=ctx.createRadialGradient(185,80,125,90,560,680);
grd.addColorStop(0,"black
");
grd.addColorStop(1,"darkred
");
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(0,0,960,260);
//在canvas元素中插入字体，和图片
ct.font = '45px 宋体';
ct.fillStyle = 'white';
ct.fillText("计算机网络 ", 360, 165);
ctx.font = ' 35px 楷体';
ctx.fillStyle = '#66cdaa';
ctx.fillText("一个总结计网知识点的网站 ", 240, 250);
function drawBeauty(beauty){
var myctx = c.getContext("2d ");
myctx.drawImage(beauty, 620, 260);
}
</script>
</body>
</html>
