周报14

对话空间小组

​ 工号： 姓名：潘瑞琪 班级：数据2302

本周工作计划：2024年05月27日-2024年06月02日

本周对c语言,高数,离散,大物的复习，javaweb的学习

序号 工作内容 状态 完成度 学习时长/h
1 英语15个单词+选词填空复习 已完成 100% 6
2 离散数学章节复习 已完成 70% 5
3 c语言练习题复习 已完成 100% 6
4 大学物理的习题+定理概念复习 已完成 100% 7
5 web（网页布局—显示与隐藏） 已完成 100% 4
6 高等数学复习+刷题 已完成 100% 8
7 JavaWeb（springBootweb入门–http协议） 已完成 100% 5
8 中国近现代史资料复习 已完成 70% 8
总时长： 49h
本周任务完成情况 本周工作总结&问题反馈
基本完成学习任务 多抽出时间完成学习任务

web之精灵图与字体图标的使用

精灵图

sprite

为什么会有精灵图的出现呢？

​ 在一个网页中，我们会用到各式各样的图片

  • 服务器会频繁地接收和发送请求图片，服务器加载速度会变慢
实质
  • 多张小的背景图片合并为一张大图片
原理

多个图片放在一个图片中 服务器端只需接收一次 就能得到多个小图片

特点

  • 对简单的背景图设置

  • 降低服务器的压力

过程

  • 导入精灵图

  • 移动背景图片位置：background-position（x,y）

  • 大图片向左与向上移动 x与y都为负值

使用精灵图的过程就是剪刀（大盒子）裁剪大图片上某一小背景图（小盒子）的过程

精灵图案例
  • 精灵图准备：

  • 度量尺寸：

  • 代码实现：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span{
            display: inline-block;
            background: url("精灵图.jpg") no-repeat;
        }
        .box1{
            width:180px;
            height:216px;
            background-position:-750px 0px;
        }
        .box2{
            width:180px;
            height:216px;
            background-position:-563px 0px;
        }
        .box3{
            width:180px;
            height:216px;
            background-position:-376px 0px;
        }
        .box4{
            width:180px;
            height:216px;
            background-position:-190px 0px;
        }
    </style>
</head>
<body>
    <span class="box1"></span>
    <span class="box2"></span>
    <span class="box3"></span>
    <span class="box4"></span>
</body>
</html>
  • 效果显示：

字体图标

字体图标的产生

应用：主要用于网页中的一些小图标

精灵图的缺点

  • 图片本身放大和缩小会出现失真的情况

  • 一旦图片切片完成后需要更换写起来十分复杂

一种技术就是字体图标iconfont 它可以为前端工程师提供高效的图标使用方式

展示的是图标，实质是字体，可以使用字体样式去变换该字体图标

字体图标的下载与使用
  • 下载：icomoon字库
1
http://icomoon.io

选择所想要的图标样式下载，然后进行解压

点击右下方的generate Font

下载后解压压缩包，将fonts文件夹拷贝一份放在项目的根目录下

复制fonts文件夹

将fonts文件夹复制到该项目根目录下

在css中引入下载的字体样式

引入方式

打开style.css文档复制其中的字体样式 引入到.html的css样式中即可

1
2
3
4
5
6
7
8
9
10
11
@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?91jje5');
  src:  url('fonts/icomoon.eot?91jje5#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?91jje5') format('truetype'),
    url('fonts/icomoon.woff?91jje5') format('woff'),
    url('fonts/icomoon.svg?91jje5#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

在demo.html文档中找到所需的图标样式或者再次登录该网址下载的地方，复制后面的样式以某标签的形式加入到html当中，css中为其标签设置font-family: ‘icomoon’;即可引用

将后面的那个复制下来 在所处的标签为其设置css属性 设置font-family: ‘icomoon’;即可引用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @font-face {
            font-family: 'icomoon';//此处命名可以发生变化，但在引用时该处的命名应该与引用时命名相同 否则不生效
            src: url('fonts/icomoon.eot?91jje5');
            src: url('fonts/icomoon.eot?91jje5#iefix') format('embedded-opentype'),
                url('fonts/icomoon.ttf?91jje5') format('truetype'),
                url('fonts/icomoon.woff?91jje5') format('woff'),
                url('fonts/icomoon.svg?91jje5#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }

        span{
            font-family: 'icomoon';
        }
    </style>
</head>

<body>
    <span></span>
</body>
</html>

浏览器显示效果呈现

添加新的字体图标

在icomoon字库中的左上角找到import icons,点击进入

然后选择selection.json文档,然后选择需要新加的字体图标后download即可

优点：

字体图标的字体已经在浏览器向服务器请求一次数据时拿到了 后续添加新的字体图标就不需要再次向服务器请求 减少了服务器的压力

web之精灵图与字体图标的使用

精灵图

sprite

为什么会有精灵图的出现呢？

​ 在一个网页中，我们会用到各式各样的图片

  • 服务器会频繁地接收和发送请求图片，服务器加载速度会变慢
实质
  • 多张小的背景图片合并为一张大图片
原理

多个图片放在一个图片中 服务器端只需接收一次 就能得到多个小图片

特点

  • 对简单的背景图设置

  • 降低服务器的压力

过程

  • 导入精灵图

  • 移动背景图片位置：background-position（x,y）

  • 大图片向左与向上移动 x与y都为负值

使用精灵图的过程就是剪刀（大盒子）裁剪大图片上某一小背景图（小盒子）的过程

精灵图案例
  • 精灵图准备：

  • 度量尺寸：

  • 代码实现：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span{
            display: inline-block;
            background: url("精灵图.jpg") no-repeat;
        }
        .box1{
            width:180px;
            height:216px;
            background-position:-750px 0px;
        }
        .box2{
            width:180px;
            height:216px;
            background-position:-563px 0px;
        }
        .box3{
            width:180px;
            height:216px;
            background-position:-376px 0px;
        }
        .box4{
            width:180px;
            height:216px;
            background-position:-190px 0px;
        }
    </style>
</head>
<body>
    <span class="box1"></span>
    <span class="box2"></span>
    <span class="box3"></span>
    <span class="box4"></span>
</body>
</html>
  • 效果显示：

字体图标

字体图标的产生

应用：主要用于网页中的一些小图标

精灵图的缺点

  • 图片本身放大和缩小会出现失真的情况

  • 一旦图片切片完成后需要更换写起来十分复杂

一种技术就是字体图标iconfont 它可以为前端工程师提供高效的图标使用方式

展示的是图标，实质是字体，可以使用字体样式去变换该字体图标

字体图标的下载与使用
  • 下载：icomoon字库
1
http://icomoon.io

选择所想要的图标样式下载，然后进行解压

点击右下方的generate Font

下载后解压压缩包，将fonts文件夹拷贝一份放在项目的根目录下

复制fonts文件夹

将fonts文件夹复制到该项目根目录下

在css中引入下载的字体样式

引入方式

打开style.css文档复制其中的字体样式 引入到.html的css样式中即可

1
2
3
4
5
6
7
8
9
10
11
@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?91jje5');
  src:  url('fonts/icomoon.eot?91jje5#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?91jje5') format('truetype'),
    url('fonts/icomoon.woff?91jje5') format('woff'),
    url('fonts/icomoon.svg?91jje5#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

在demo.html文档中找到所需的图标样式或者再次登录该网址下载的地方，复制后面的样式以某标签的形式加入到html当中，css中为其标签设置font-family: ‘icomoon’;即可引用

将后面的那个复制下来 在所处的标签为其设置css属性 设置font-family: ‘icomoon’;即可引用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @font-face {
            font-family: 'icomoon';//此处命名可以发生变化，但在引用时该处的命名应该与引用时命名相同 否则不生效
            src: url('fonts/icomoon.eot?91jje5');
            src: url('fonts/icomoon.eot?91jje5#iefix') format('embedded-opentype'),
                url('fonts/icomoon.ttf?91jje5') format('truetype'),
                url('fonts/icomoon.woff?91jje5') format('woff'),
                url('fonts/icomoon.svg?91jje5#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }

        span{
            font-family: 'icomoon';
        }
    </style>
</head>

<body>
    <span></span>
</body>
</html>

浏览器显示效果呈现

添加新的字体图标

在icomoon字库中的左上角找到import icons,点击进入

然后选择selection.json文档,然后选择需要新加的字体图标后download即可

优点：

字体图标的字体已经在浏览器向服务器请求一次数据时拿到了 后续添加新的字体图标就不需要再次向服务器请求 减少了服务器的压力

周报13

对话空间小组

​ 工号： 姓名：潘瑞琪 班级：数据2302

本周工作计划：2024年05月19日-2024年05月26日

本周对c语言,高数,离散,大物的复习，javaweb的学习

序号 工作内容 状态 完成度 学习时长/h
1 英语15个单词 已完成 100% 6
2 离散数学的（图的连通性–图的矩阵表示） 已完成 70% 4
3 c语言的练习+复习 已完成 100% 5
4 大学物理的热学的理想气体（能量均分定理–绝热过程） 已完成 100% 6
5 web（精灵图–字体图标的使用–css三角的使用） 已完成 80% 7
6 高等数学复习+刷题 已完成 100% 4
7 JavaWeb（springBootweb入门–http协议） 已完成 90% 12
总时长： 42h
本周任务完成情况 本周工作总结&问题反馈
基本完成学习任务 多抽出时间完成学习任务

周报12

对话空间小组

​ 工号： 姓名：潘瑞琪 班级：数据2302

本周工作计划：2024年05月12日-2024年05月19日

本周对c语言,高数,离散,大物的复习，javaweb的学习

序号 工作内容 状态 完成度 学习时长/h
1 英语15个单词 已完成 100% 6
2 离散数学的图论+复习 已完成 80% 6
3 c语言的结构体的使用+复习 已完成 100% 7
4 大学物理的热学的理想气体物态方程 + 复习 已完成 90% 6
5 web（定位–圆角边框的使用） 已完成 100% 6
6 高等数学复习+刷题 已完成 100% 9
7 JavaWeb（element综合案例–maven的依赖配置） 已完成 80% 10
总时长： 50h
本周任务完成情况 本周工作总结&问题反馈
基本完成学习任务 多抽出时间完成学习任务

周报12

对话空间小组

​ 工号： 姓名：潘瑞琪 班级：数据2302

本周工作计划：2024年05月12日-2024年05月20日

本周对c语言,高数,离散,大物的复习，javaweb的学习

序号 工作内容 状态 完成度 学习时长/h
1 英语15个单词 已完成 100% 6
2 离散数学的图论+复习 已完成 80% 6
3 c语言的结构体的使用+复习 已完成 100% 7
4 大学物理的热学的理想气体物态方程 + 复习 已完成 90% 6
5 web（定位–圆角边框的使用） 已完成 100% 6
6 高等数学复习+刷题 已完成 100% 9
7 JavaWeb（element综合案例–maven的依赖配置） 已完成 80% 10
总时长： 50h
本周任务完成情况 本周工作总结&问题反馈
基本完成学习任务 多抽出时间完成学习任务

周报11

对话空间小组

​ 工号： 姓名：潘瑞琪 班级：数据2302

本周工作计划：2024年05月05日-2024年05月12日

本周对c语言,高数,离散,大物的复习，web+javaWeb的学习

序号 工作内容 状态 完成度 学习时长/h
1 英语15个单词 已完成 100% 6
2 离散数学的哈斯图+一阶谓词逻辑的复习 已完成 100% 4
3 c语言的数组的使用+数组函数传参 已完成 90% 10
4 大学物理的振动方程+波动方程的计算 已完成 88% 7
5 web的定位+背景属性的熟练书写 已完成 50% 3
6 高等数学复习+刷题 已完成 100% 8
7 JavaWeb（前端工程化—element组件-form表单） 已完成 100% 12
总时长： 50h
本周任务完成情况 本周工作总结&问题反馈
基本完成学习任务 多抽出时间完成学习任务

周报11

对话空间小组

​ 工号： 姓名：潘瑞琪 班级：数据2302

本周工作计划：2024年05月05日-2024年05月12日

本周对c语言,高数,离散,大物的复习，web+javaWeb的学习

序号 工作内容 状态 完成度 学习时长/h
1 英语15个单词 已完成 100% 6
2 离散数学的哈斯图+一阶谓词逻辑的复习 已完成 100% 4
3 c语言的数组的使用+数组函数传参 已完成 90% 10
4 大学物理的振动方程+波动方程的计算 已完成 88% 7
5 web的定位+背景属性的熟练书写 已完成 50% 3
6 高等数学复习+刷题 已完成 100% 8
7 JavaWeb（前端工程化—element组件-form表单） 已完成 100% 12
总时长： 50h
本周任务完成情况 本周工作总结&问题反馈
基本完成学习任务 多抽出时间完成学习任务

周报10

对话空间小组

​ 工号： 姓名：潘瑞琪 班级：数据2302

本周工作计划：2024年04月27日-2024年05月05日

本周对c语言指针的深度了解，高数,离散,大物的刷课，javaWeb的学习

序号 工作内容 状态 完成度 学习时长/h
1 英语15个单词 已完成 100% 6
2 离散数学（等价关系–逆函数及其性质） 已完成 100% 8
3 c语言的指针数组—函数练习 已完成 90% 12
4 大学物理的波动方程–波动能量变化 已完成 88% 9
5 web的学成项目案例书写 已完成 50% 15
6 高等数学的常数项级数–函数展成幂级数 已完成 100% 15
7 JavaWeb（Vue概述–Ajax-Axios2） 已完成 100% 9
总时长： 74h
本周任务完成情况 本周工作总结&问题反馈
基本完成学习任务 多抽出时间完成学习任务

周报9

对话空间小组

​ 工号： 姓名：潘瑞琪 班级：数据2302

本周工作计划：2024年04月21日-2024年04月27日

本周对c语言知识点 复习，高数,离散,大物的刷课，javaWeb的学习

序号 工作内容 状态 完成度 学习时长/h
1 英语15个单词 已完成 100% 5
2 微信小程序开发课程（事件绑定——事件传参） 已完成 90% 6
3 c语言的函数练习——数组的实际运用 已完成 80% 12
4 大学物理的简谐运动的刷题 已完成 100% 6
5 web的css的盒子模型基本内容——综合案例实践 已完成 100% 9
6 高等数学刷题巩固（两类坐标曲线积分——曲面积分） 已完成 100% 8
7 JavaWeb js对象——DOM文本对象 已完成 100% 6
总时长： 52h
本周任务完成情况 本周工作总结&问题反馈
基本完成学习任务 多抽出时间完成学习任务