第三周预习 平面空间转换以及移动端适配

最新推荐文章于 2024-07-25 11:26:35 发布
最新推荐文章于 2024-07-25 11:26:35 发布
阅读量881 收藏 23
点赞数 17
文章标签： html css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_83677222/article/details/137383688
版权

一、垂直对齐方式vertical-align

适用于图文排列

属性值效果
baseline基线对齐(默认)
top顶部对齐
middle居中对齐
bottom底部对齐

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div{
        border: 1px solid #000;
    }
    img{
        vertical-align: middle;
    }
</style>
<body>
    <div>
        <img src="./bg.png" alt=""/>
        煮饭锅
    </div>
    
</body>
</html>

效果如下：img

因为浏览器把行内块、行内标签当作文字处理，默认按基线对齐

使用后效果：图片img的底下有空白，转块级不按基线对齐，空白就消失了

二、过渡transition

作用：可以为一个元素在不同状态之间切换的时候添加过渡效果

属性名：transition (复合属性)

属性值：过渡的属性 花费的时间(s)

代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    img{
       width:150px;
       height: 200px;
       transition: all 1s;
    }
    img:hover{
        width: 200px;
        height: 250px;
    }
</style>
<body>
    <div>
        <img src="./bg.jpg" alt=""/>
    </div>
</body>
</html>

效果如下：

前：img

后：img

提示： a.过渡的属性可以是具体的CSS属性 (例如：宽、高)

​ b.也可以为all (两个状态属性值不同的所有属性，都产生过渡效果)

​ c.transition设置给元素本身

三、透明度opacity

作用：设置整个元素的透明度 (包含背景和内容)

属性值：0-1

​ 0：完全透明 (元素不可见)

​ 1：不透明

​ 0-1之间小数：半透明

代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div{
        background-color: pink;
        width: 200px;
        height: 300px;
        opacity: 0.5;
    }
</style>
<body>
    <div>
        你好前端！
    </div>
</body>
</html>

效果如下：img

四、光标类型 cursor

作用：鼠标悬停在元素上时指针的显示样式

属性值效果
default默认值，通常是箭头
pointer小手效果，提示用户可以点击
text工字型，提示用户可以选择文字
move十字光标，提示用户可以移动

五、平面转换transform

1.平面转换(2D转换)介绍

作用：为元素添加动态效果，一般与过渡配合使用

概念：改变盒子在平面内的形态 (位移、旋转、缩放、倾斜)

坐标轴分布：img

magrin-left:100px 盒子向右移动

margin-right:100px 盒子向下移动

2.平面转换——平移

属性： transform:translate(x轴移动距离，y轴移动距离)

取值： a. 像素单位数值

​ b. 百分比 (参照盒子自身尺寸计算结果)

​ c. 正负均可

技巧： a. translate( ) 只写一个值，表示沿着x轴移动

​ b. 单独设置x和y轴移动距离： translateX( ) translateY( )

代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div{
        background-color: pink;
        width: 200px;
        height: 300px;
    }
    div:hover{
        transform: translate(100px,50px);
    }
</style>
<body>
    <div>
        你好前端！
    </div>
</body>
</html>

效果如下：

前：img

后：img

3.平面转换——旋转

默认沿中心点旋转

属性：transform:rotate(旋转角度) (角度单位是deg)

技巧：a. 取值正负均可

​ b. 取值为正，顺时针旋转

​ c. 取值为负，逆时针旋转

代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div{
        background-color: pink;
        width: 200px;
        height: 300px;
    }
    div:hover{
        transform: rotate(180deg);
    }
</style>
<body>
    <div>
        你好前端！
    </div>
</body>
</html>

效果如下：

前：img

后：img

4.平面转换——改变转换原点

默认情况下，转换原点是盒子中心点

属性：transform-origin:水平原点位置 垂直原点位置

取值： a. 方位名词 (left top bottom right center)

​ b. 像素单位数值

​ c. 百分比

代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div{
        background-color: pink;
        width: 200px;
        height: 300px;
    }
    div:hover{
        transform: rotate(180deg);
        transform-origin: 200px 300px;
    }
</style>
<body>
    <div>
        你好前端！
    </div>
</body>
</html>

效果如下：

前：img

后：img

5.平面转换——多重转换

多重转换技巧：先平移再旋转 transform: translate( ) rotate( )

旋转会改变坐标轴向，所以不能先旋转再平移

6.平面转换——缩放

属性： transform:scale(缩放倍数)

​ transform:scale(x轴缩放倍数 y轴缩放倍数)

技巧： a. 通常，只为scale( )设置一个值，表示x轴和y轴等比例缩放

​ b. 取值大于1表示放大，取值小于1表示缩小

代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div{
        background-color: blueviolet;
        width: 200px;
        height: 300px;
    }

    div:hover{
        transform:scale(1.5);
    }
</style>
<body>
    <div>
    </div>
</body>
</html>

效果如下：

前：img

后：img

7.平面转换——倾斜

属性： transform:skew( )

取值：角度度数deg (取值为正 向左倾斜；取值为负 向右倾斜)

代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div{
        margin: 0 auto;
        background-color: blueviolet;
        width: 200px;
        height: 300px;
    }

    div:hover{
        transform:skew(20deg);
    }
</style>
<body>
    <div>
    </div>
</body>
</html>

效果如下：img

8.渐变

渐变是多个颜色逐渐变化的效果，一般用于设置盒子背景

分类：线性渐变 径向渐变

8.1线性渐变

属性：

background-image:linear-gradient(

渐变方向，

颜色1 终点位置，

颜色2 终点位置，

.........

);

取值：

a. 渐变方向：可选

  1. to 方位名词
  2. 角度度数

b.终点位置：可选

  1. 百分比

代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div{
        margin: 0 auto;
        background-image: linear-gradient( to right,
            red,
            green);
        width: 200px;
        height: 300px;
    }
</style>
<body>
    <div>
    </div>
</body>
</html>

效果如下：img

8.2径向渐变

作用：给按钮添加高光效果

属性：

background-image:radial-gradient(

半径 at 圆心位置，

颜色1 终点位置，

颜色2 终点位置

......);

取值：

a. 半径可以是2条，则为椭圆

b. 圆心位置取值：像素单位数值/百分比/方位名词

代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div{
        margin: 0 auto;
        background-image: radial-gradient(
            30px at 100px 150px,
            red,
            pink
        );
        width: 200px;
        height: 300px;
        background-color: pink;
        border-radius: 50%;
    }
</style>
<body>
    <div>
    </div>
</body>
</html>

效果如下：img

六、空间转换(3D转换)

1.空间转换介绍

空间：是从坐标轴角度定义的x，y，z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同

坐标轴分布：img

2.平移

属性：

transform:translate3d(x,y,z);

transform:translateX( ); transform:translateY( ); transform:translateZ( );

取值 (正负均可)：

a. 像素单位数值

b. 百分比 (参照盒子自身尺寸计算结果)

电脑是平面，默认无法观察Z轴平移效果

3.视距 perspective

作用：指定了观察者与z=0平面的距离，为元素添加透视效果 (近大远小 近实远虚)

视距添加给直接父级 (取值范围800-1200)

代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .father{
        perspective: 1000px;
    }
    .son{
        margin: 0 auto;
        width: 200px;
        height: 300px;
        background-color: pink;
        transition:  all 2s;
    }
    .son:hover{
        transform: translateZ(-500px);
    }
</style>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>

效果如下：

前：img

后：img

4.空间——旋转

属性：

transform:rotateZ( ); (与平面一样)

transform:rotateX( ); (横着转 正后 负前)

transform:rotateY( );(竖着转 正 右往里 负 左往里)

最好加上perspective，效果更明显

左手法则：根据旋转方向确定取值正负

左手握住旋转轴，拇指指向正值方向，其他四个手指弯曲方向为旋转正值方向

拓展：rotate3d(x,y,z,角度度数):用来设置自定义旋转轴的位置及旋转角度 (x，y，z取值为0-1之间的数字)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .father{
        perspective: 1000px;
    }
    .son{
        margin: 0 auto;
        width: 200px;
        height: 300px;
        background-color: pink;
        transition:  all 2s;
    }
    .son:hover{
        transform: rotateX(200deg);
    }
</style>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>

效果如下：

前：img

后：img

5.立体呈现transform-style

作用：设置元素的子元素是位于3D空间中还是平面中

属性值：

flat：子级处于平面中

preserve-3d：子级处于3D空间

立体呈现步骤：

1.父元素添加transform-style:preserve-3d;

2.子级定位

3.调整子盒子的位置 (位移或旋转)

立方体每个面都有独立的坐标轴，互不影响，旋转改变轴向

代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .father{
        margin: 0 auto;
        width: 200px;
        height: 200px;
        position: relative;
        transform-style: preserve-3d;
        transition: all 2s;
    }
    .son1{
        position: absolute;
        width: 200px;
        height: 200px;
        background-color: pink;
        transform: rotateX(-90deg) translateZ(100px);
    }
    .son2{
        position: absolute;
        width: 200px;
        height: 200px;
        background-color: aqua;
    }
    .father:hover{
        transform: rotateX(32deg);
    }
</style>
<body>
    <div class="father">
        <div class="son1"></div>
        <div class="son2"></div>
    </div>
</body>
</html>

效果如下：img

6.空间转换——缩放

属性：

transform:scale3d(x,y,z);

transform:scaleX( ); (左右缩放)

transform:scaleY( ); (上下缩放)

transform：scaleZ( ); (鼠标悬停缩放)

代码如下：

<!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>
        .father{
            margin: 0 auto;
            width: 200px;
            height: 200px;
            background-color: pink;
            transition: all 2s;
        }
        .father:hover{
            transform: scaleX(1.5);
        }
    </style>
</head>
<body>
    <div class="father">

    </div>
</body>
</html>

效果如下：

前：img

后：img

六、动画 animation

1.动画介绍

实现多个状态间的变化过程，动画过程可控 (重复播放，最终画面，是否暂停)

a. 定义动画

@keyframes 动画名称{

from{ }

to from{ }

}

@keyframes 动画名称{

0%{ }

10%{ }

.....

100%{ }

}

b. 使用动画 (改变哪个，给哪个加animation)

animation: 动画名称 动画花费时长

2.动画animation

animation:动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态

提示：

a. 动画名称和动画时长必须赋值

b. 取值不分先后顺序

c. 如果有两个时间值 第一个时间值表示动画时长 第二个时间值表示延迟时间

速度曲线：

linear：匀速

steps：分步动画 (配合精灵图使用)

动画方向：

alternate：反向

重复次数：

infinite：一直播放

执行完毕时的状态：

forwards：停在结束状态

属性作用取值
animation-name动画名称
animation-duration动画时长
animation-delay延迟时间
animation-fill-mode动画执行完毕时状态forwards：最后一帧状态 backwards：第一帧状态
animation-timing-function速度曲线steps(数字)：逐帧动画
animation-iteration-count重复次数infinite：无限循环
animation-direction动画执行方向alternate：反向
animation-play-state暂停动画paused：暂停 (通常配合：hover使用)

无缝动画原理：复制开头图片到结尾位置 (图片累加宽度=区域宽度)

3.逐帧动画

属性： animation-timing-function

取值： steps(数字)：逐帧动画

精灵动画制作步骤：

1.准备显示区域

盒子尺寸大小与一张精灵小图尺寸相同

2.定义动画

移动背景图 (移动距离=精灵图宽度)

3.使用动画

steps(N) N与精灵小图个数相同

4.多组动画

animation:

动画1，

动画2，

动画N

；

优化：当动画的开始状态样式和盒子默认样式相同，可以省略动画开始状态的代码

七、移动适配

1.屏幕分辨率

屏幕分辨率：纵横向上的像素点数，单位是px

a. 硬件分辨率——>物理分辨率 (出厂设置)

b. 缩放调节的分辨率——>逻辑分辨率 (软件/驱动设置)

2.视口

手机屏幕尺寸不同，网页宽度均为100%

网页的宽度和逻辑分辨率尺寸相同

**视口：**显示html网页的区域，用来约束html尺寸

​ width=device—width：视口宽度=设备宽度

​ initial—scale=1.0：缩放1倍 (不缩放)

3.rem

3.1rem适配

a. rem单位，是相对单位

b. rem单位是相对于html标签的字号计算结果

c. 1rem=1html字号大小

代码如下：

html{
font-size:30px;
}
.box{
width:5rem;
height:3rem;
}

3.2媒体查询

媒体查询能够检测视口的宽度，然后编写差异化的css样式

当某个条件成立，执行对应的CSS样式

代码如下：

@media (媒体特性){
选择器{
CSS属性
}
}

样例：

<!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>
        @media (width:375px){
            body{
                background-color: green;
            }
        }
    </style>
</head>
<body>
</body>
</html>

效果如下：img

3.3rem布局

目前rem布局方案中，将网页等分成10份，HTML标签的字号为视口宽度的1/10

例如：

@media (width:320px){
html{
font-size:32px;
}
}

3.4rem-flexible.js

flexible.js 是手淘开发的一个用来适配移动端的js库，核心原理就是根据不同的视口宽度给网页中HTML根节点设置不同的font-size

代码如下：

<body>
    ......
    <script src="./js/flexible.js"></script>
</body>

3.5rem单位尺寸

rem单位的尺寸=px单位数值 / 基准根字号

4.less

4.1 less—简介

Less是一个CSS预处理器，less文件后缀是.less,扩充了CSS语言，使CSS具备一定的逻辑性、计算能力

注意：浏览器不识别Less代码，目前阶段，网页要引入对应的CSS文件

4.2 less—运算

运算：

a. 加、减、乘直接书写计算表达式

b. 除法需要添加小括号或 .

代码如下：

.box{
    width: 100+60px;
    height: 300-70px;
    width: 20*60px;
    height: (300/10px);
}

4.3 less—嵌套

作用：快速生成后代选择器

& 表示的是当前选择器，代码写到谁的大括号里面就表示谁，不会生成后代选择器

代码如下：

.father{
    color: red;
    .son{
        color: blue;
        a{
            color: green;
            &:hover{
                color: aquamarine;
            }
        }
    }
}

对应CSS：

.father {
  color: red;
}
.father .son {
  color: blue;
}
.father .son a {
  color: green;
}
.father .son a:hover {
  color: aquamarine;
}

4.4 less—变量

概念：容器，存储数据

作用：存储数据，方便使用和修改

语法：

a. 定义变量：

@变量名:数据；

b.使用变量

css属性：@变量名

代码如下：

@myColor :pink;

.box{
    color: @myColor;
}

a{
    color: @myColor;
}

对应css：

.box {
  color: pink;
}
a {
  color: pink;
}

4.5 less—导入

作用：导入less公共样式文件

语法：导入：@import“文件路径”

提示：如果是less文件可以省略后缀

@import“./base.less”

@import"./common"

4.6 less—导出

写法：在less文件的第一行添加//out:存储URL

提示：文件夹名称后面添加/

//out:./index.css

//out:./css/

4.7 less—禁止导出

写法：在less文件第一行添加//out:false

5.vw

5.1介绍

a. 相对单位

b. 相对视口的尺寸计算结果

​ vw：viewport width (1vw=1/100视口宽度)

​ vh：viewport height (1vh=1/100视口高度)

vw和vh是相对视口宽高计算结果，可以直接实现移动端适配效果

5.2布局

vw单位的尺寸=px单位数值 / （1/100）视口宽度

5.3vh单位问题

开发中，不能把vw和vh混用

**vh是1 / 100视口高度，全面屏视口高尺寸大，如果混用可能会导致盒子变形

许的什么愿-
关注
  • 17
    点赞
  • 踩
  • 23
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
第三周 js入门预习
2301_81318560的博客
05-10 1710
浏览器分成两部分：渲染引擎和JS 引擎渲染引擎：用来解析HTML与CSS，俗称内核，比如 chrome 浏览器的 blink ，老版本的 webkitJS 引擎：也称为 JS 解释器。用来读取网页中的JavaScript代码，对其处理后运行，比如 chrome 浏览器的 V8注：浏览器本身并不会执行JS代码，而是通过内置 JavaScript 引擎(解释器) 来执行 JS 代码。
第六周预习-网络请求
zch_fhjb的博客
04-27 1344
网络请求（http请求、返回规范、Json）
2024春季蓝旭工作室培训第一周预习
Agazigi的博客
03-19 1697
这篇文章主要学习了Java的基本语法以及其面向对象的三大特性。主要内容为Java的输入输出、数组、分支、循环；面向对象：封装（私有等级）、继承（父子类、重写）、多态（接口、重载）。一、Java的基本语法。
第二周 预习：Java基本语法2、面向对象入门
m0_60796033的博客
09-02 265
预习作业
第一周预习-java面向对象
FPS_TamamoCross的博客
03-23 1559
一个类中包括成员变量，成员方法，构造器，代码块，内部类。publivc class Phone{ //"Phone"是类名//"brand"和"price"是属性（成员变量）//"call"和"playgame"是行为（方法）Javabean类：用来描述一类事物的类,Javabean类中不写main方法。测试类：编写main方法的类。类名首字母建议大写，驼峰模式起名。一个Java文件中可以定义多个class类，但只能有一个类是public修饰。public修饰的类名必须是代码文件名。
蓝旭工作室第五周课程预习
qq_35800782的博客
04-20 1376
JDBC(Java Database Connectivity)是Java语言中用于访问和操作数据库的标准 API(Application Programming Interface)。即：JDBC是Java暴露出来的用于操作数据库的接口。不同的数据库可以根据这些接口做相应的适配，以便Java程序可以用统一的方式操作不同的数据库。
第08周 预习、实验及作业：Java GUI编程
qq_64152665的博客
10-17 688
第08周 预习、实验及作业：Java GUI编程
第二周预习-Java异常类+常用类+容器、泛型
zch_fhjb的博客
03-30 2061
Java无法为全部问题都提供异常类来代表自定义运行时异常，定义一个异常类继承RuntimeException;自定义编译时异常，定义一个异常类继承Exception重写构造器通过throw new异常类（×××）来创造异常对象并抛出message = "入账金额"+m+"是负数或支出"+n+"是正数，不符合系统要求。//方法抛出异常，导致方法结束System.out.printf("本次计算出的纯收入是：%d元\n",netIncome);
蓝旭第三周预习（JavaScript介绍，数据类型，简单语法，对象基础，函数）
2301_80325289的博客
04-05 1836
字面量实际上就是一些固定的值，比如：1、2 、3、true、false、null、NaN、“hello”，字面量都是不可以改变的，由于字面量不是很方便使用，所以在JavaScript中很少直接使用字面量，使用的而是变量。随着时间的推移，ECMAScript标准已经发展到了多个版本，包括ECMAScript 5、ECMAScript 6（也称为ECMAScript 2015）等，每个版本都引入了新的特性和改进。ECMAScript是JavaScript的标准化版本，它确保了不同浏览器和环境下的兼容性。
第三周预习资料.rar
10-07
"第三周预习资料.rar"很可能包含了一系列与课程相关的文档、视频、代码示例或者练习题，帮助学生在正式上课前理解和掌握相关概念。 在预习的过程中，通常会涉及以下知识点： 1. **文件压缩格式**：RAR是一种常见的...
三年级下册语文部编版预习卡.pdf
03-23
三年级下册语文部编版预习卡.pdf
二年级下册数学青岛六三版预习卡.pdf
03-23
二年级下册数学青岛六三版预习卡.pdf
三年级下册数学苏教版预习卡.pdf
03-23
三年级下册数学苏教版预习卡.pdf
高等计算机体系结构-第三讲-预习版1
08-03
在《高等计算机体系结构》第三讲中，主要探讨了计算机体系结构中的重要概念，特别是单周期和多周期微体系结构。课程建议重点阅读Patterson & Hennessy的《计算机组织与设计：软硬件接口》的第四章4.1-4.4部分，预习...
基于 HTML+ECharts 实现的大数据可视化平台模板（含源码）
柯晓楠
07-24 3260
大数据的可视化对于企业决策、市场分析和业务洞察至关重要。通过直观的数据展示，团队可以快速理解复杂的数据模式，发现潜在的业务机会。本文将详细介绍如何利用 HTML 和 ECharts 实现一个功能丰富的大数据可视化平台模板。
基于 HTML+ECharts 实现的数据可视化大屏案例（含源码）
柯晓楠
07-24 669
数据可视化已成为企业决策和业务分析的重要工具。通过直观、动态的图表展示，数据可视化大屏能够帮助用户快速理解复杂的数据关系，发现潜在的业务趋势。本文将介绍如何利用 HTML 和 ECharts 实现一个功能丰富的数据可视化大屏案例。
【HTML — 构建网络】HTML 入门
07-24 1179
如果您查看许多其他站点的代码，您可能会遇到许多奇怪的标记样式，包括不带引号的属性值。在这一点上，你应该了解 HTML 是什么样子的，以及它在基本层面上是如何工作的。在 HTML 中，不需要在 void 元素标记的末尾添加 a，例如： .但是，它也是一种有效的语法，当您希望 HTML 是有效的 XML 时，您可以这样做。现在，您可以在 Web 浏览器中打开此文件，以查看呈现的代码的外观。在本练习中，您可以如前所述在计算机上本地编辑代码，也可以在下面的示例窗口中编辑代码（在本例中，可编辑示例窗口仅表示。
html实现酷炫美观的可视化大屏(十种风格示例，附源码)
最新发布
xcLeigh
07-25 1845
html实现酷炫美观的可视化大屏(十种风格示例，附源码)，大屏源码，可视化大屏模板源码，html可视化大屏源码下载，内含十种不同风格的大屏可视化代码，详细的讲解，酷炫的线条，美观的设计，让图文图表结合的更融洽。兼容各种大屏，调整页面到合适的分辨率，F12全屏观看。各种风格都有，代码上手简单，代码独立，可以直接使用。也可直接预览效果。
第三周课前预习——数值类型程序设计
09-18
第三周课前预习的内容是关于数值类型的程序设计。在这个阶段，你将学习如何使用不同的数值类型来进行数据的存储和操作。数值类型包括整数类型和浮点数类型，每种类型都有不同的表示范围和精度。 在数值类型程序设计...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值