网站平台（div+css+canvas+js布局）

最新推荐文章于 2023-06-08 17:08:54 发布
最新推荐文章于 2023-06-08 17:08:54 发布
阅读量629 收藏 2
点赞数
分类专栏： 前端 文章标签： HTML CSS canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43521227/article/details/88531880
版权

基于教学的网站框架@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>
LeeTikPaak19
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS基础12-canvas_canvas css(1)，2024年最新46道面试题带你了解中高级大数据开发面试
2301_76379606的博客
04-21 855
ctx.translate(x,y) 方法重新映射画布上的 (0,0) 位置。ctx.restore() 返回之前保存过的路径状态和属性。获取最近缓存的 ctx；需要和save()配合使用。ctx.save() 保存当前环境的状态。可以把当前绘制环境进行保存到缓存中。
采用html+div+css+js技术 纯手写的一个网站前台
11-26
采用html+div+css+js技术 纯手写的一个网站前台程序设计。
flex的Canvas可以和HTML的DIV一样做块状的网格布局
火舞天涯
05-25 2983
用到的MX标签：constraintColumns、ConstraintColumn、constraintRows、ConstraintRow 给大家说说前提情况：在做MXML布局时，要嵌套很多层级，这里面有很多问题：1、嵌套太多层级会影响效率！2、嵌套太多层级，代码的可读性、可维护性差！3、嵌套太多层级是因为Canvas、Vbox、Hbox功能单一，不能满足需要，而不是必须要
个人博客html+css+JavaScript完整代码
05-23
个人博客，基于html+css+JavaScript的完整代码，内容全面可以直接使用。
div悬浮在canvas上
11-24
div悬浮在canvas之上
Div+Css控制网页排版小记.
。
10-16 2168
新的学期，空闲时间比较多，借着刚买的玩具云服务器，准备搭建一个个人主页玩一玩。所以顺便学习下html的知识。        结果呢，学着html发现就要连着css,javascript,jquery顺带了解了一遍。这次就简单谈一下自己对div+css片面的理解。        这里先提一下做的第一个个人一面，简直简陋到想哭。当时博主还是一个php的懵懂小生，html嵌套着php实现了一个登录跳
HTML5七夕情人节表白网页制作【canvas爱心绘制相册】HTML+CSS+JavaScript
08-10
HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，首页使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部区域背景色为100%宽度。都是给学生定制的都符合学校或者学生考试期末作业的水平,有的有js，有的视频...
原生js+canvas实现贪吃蛇效果
11-19
本文实例为大家分享了canvas实现贪吃蛇效果的具体代码，供大家参考，具体内容如下 效果展示： 源码展示： 页面布局展示：worm.html <!DOCTYPE html> <html> <head> <meta charset="utf-8">...
HTML5七夕情人节表白网页制作【JavaScript和Canvas外太空表盘两款】HTML+CSS+JavaScript
08-10
HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，首页使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部区域背景色为100%宽度。都是给学生定制的都符合学校或者学生考试期末作业的水平,有的有js，有的视频...
HTML5七夕情人节表白网页制作【html5+canvas全屏的520爱心表白网页代码】HTML+CSS+JavaScript
08-10
HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，首页使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部区域背景色为100%宽度。都是给学生定制的都符合学校或者学生考试期末作业的水平,有的有js，有的视频...
HTML5七夕情人节表白网页制作【canvas生日快乐文字烟花背景动画特效】HTML+CSS+JavaScript 生日快乐代码
08-10
HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，首页使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部区域背景色为100%宽度。都是给学生定制的都符合学校或者学生考试期末作业的水平,有的有js，有的视频...
Html+CSS +Javascript实现的一个很炫个人主页网页
11-01
Html+CSS +Javascript实现的一个很炫个人主页网页，完全是原创，在Firefox下，IE下测试都通过。大部分都实现了三个浏览器的兼容。
DIV+CSS布局网页页面实现多风格选…
thewebcode
07-03 170
1. styleswitcher.js function setActiveStyleSheet(title) { var i, a, main; for(i=0; (a = document.getElementsByTagName_r("link")[i]); i++) { if(a.getAttribute("rel").indexOf("style") != -1 &am...
js将div内所有内容转为canvas,并实现点击下载为png图片
qq_43592064的博客
04-13 5225
js将div内所有内容转为canvas,并实现点击下载为png图片
div标签、html/css基本样式、canvas画布
huxia4815的博客
11-23 1873
Html/css Div也叫盒子，盒子一般用于页面的布局。 给这个盒子加上样式就是css 加样式有两种方式： 1、写在这个标签的内部。就直接将样式赋给了这个标签。 2、写在标签的外部：放在head中间。 为什么要放在外面： 1、格式更加清晰，分离比较清晰。 2、写在外面，可以减少代码，因为有的元素他们的样式是相同的，没必要同样的样式写多次 3、容易封装 写在外面就要区分到底是给
div/canvas实现放大镜、图片局部放大效果
最新发布
芝芝为荔枝
06-08 2109
放大图片的需求，一般是在原有的渲染之上，额外添加一个放大框，当鼠标在原图上移动，放大框内就以当前的鼠标为中心，局部放大一定范围，在淘宝商城中是常有的实现。下面将用两种实现。1、使用divimage标签，原理是放大框中有一个图片，这个图片是放大后的，放大框大小固定，图片超出的部分隐层，只需要调整图片的位置即可2、使用两个canvas其中一个用于渲染原图，另外一个做放大框，通过找到鼠标在原图位置，再选择出需要放大的范围，通过canvas方法渲染到放大框中原图：这个可以下载下来去测试代码。
将Div转换为Canvas，简直太好玩了~~~
http://xueshuai.top
09-30 5851
今天发现了一个神奇的玩意，简直不要太好玩~~ 用canvas做动画是很难，但是div能比canvas简单不少，只是因为canvas中不能操作Dom元素 这款神器，可以直接将Div+CSS转换为canvas 目测可以用在将div元素通过转变为canvas元素来实现图片的保存 纯Div+CSS： <!-- HTML --> <div class="box">&lt...
用js的div和canvas来玩个球
weixin_33811539的博客
10-23 239
2019独角兽企业重金招聘Python工程师标准>>> ...
使用div+css布局制作电脑学堂页面
06-07
好的，下面是一个简单的电脑学堂页面布局，使用div和CSS实现： HTML代码： ```html <!DOCTYPE html> 电脑学堂 <link rel="stylesheet" href="style.css"> <!-- 头部 --> <div class="logo"> 电脑...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值