一个计网知识总结网页（div+css布局）
网站主页面
![Alt]=(https://avatar.****.net/7/7/B/1_ralf_hx163com.jpg
（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>