前端知识的不足与补充

css中的grid布局

  display: grid;grid-template-columns: 1fr 25px 25px 25px 25px 1fr;grid-template-rows: 50px 1fr 1fr 50px;/* 创造一个网格布局6 个纵列(column) --  前后两列两等分 (可用 fr 代表一份),中间 4 列均为 25px 宽度4 个横行(row) -- 上下均为 50px,中间两等分*/

grid-area

grid-area: 2/2/3/3

grid-area 是用于定义一个项目的位置及大小的属性,通常在使用 CSS Grid 布局时使用。

语法为:grid-area: row-start / column-start / row-end / column-end;

  • row-start 定义项目开始的行位置。
  • column-start 定义项目开始的列位置。
  • row-end 定义项目结束的行位置。
  • column-end 定义项目结束的列位置。

在你提供的例子中,grid-area: 2/2/3/3; 表示项目从网格布局的第 2 行、第 2 列开始,到第 3 行、第 3 列结束。这意味着这个项目占据了一个单元格,位于网格的第 2 行和第 2 列。

   justify-self: end;align-self: end;

justify-selfalign-self 是用于调整网格项目在网格容器中的位置的属性,它们通常与 CSS Grid 布局一起使用。

  • justify-self 定义项目在水平方向上的对齐方式。justify-self: end; 表示项目会沿着水平方向的结束位置对齐。

  • align-self 定义项目在垂直方向上的对齐方式。align-self: end; 表示项目会沿着垂直方向的结束位置对齐。

这两个属性允许你在网格容器中独立地为每个项目设置水平和垂直方向的对齐方式,而不影响其他项目。

css中的旋转

/*** 创建一个文字水印的div* @param  {string} text - 水印文字* @param  {string} color - 水印颜色* @param  {number} deg - 水印旋转角度* @param  {number} opacity - 水印透明度* @param  {number} count - 水印数量*/ // TODO: 根据输入参数创建文字水印// TODO: 根据输入参数创建文字水印for(var i=0;i<count;i++){let ospan = document.createElement('span')ospan.innerHTML = textospan.style.color = colorospan.style.opacity = opacityospan.style.transform = `rotate(${deg}deg)`container.appendChild(ospan)}ospan.style.transform = `rotate(${deg}deg)`container.appendChild(ospan)

代码涉及到 CSS 的 transform 属性和 JavaScript 模板字符串的使用。

  1. ospan.style.transform = rotate(${deg}deg); 这行代码通过 JavaScript 设置了一个 CSS 的 transform 属性,用于旋转元素。${deg} 是模板字符串的语法,它允许在字符串中嵌入变量。在这里,${deg} 会被替换为传入的 deg 参数的值。整体来说,这行代码的作用是将创建的 span 元素进行旋转。

  2. container.appendChild(ospan); 这行代码将创建的 span 元素添加到 container 元素中。appendChild 是 JavaScript 中操作 DOM(文档对象模型)的方法,用于将一个元素添加为另一个元素的子元素。

综合起来,这两行代码的作用是创建一个带有指定旋转角度的 span 元素,并将它添加到指定的容器元素中。

9.地球漫游中的动画

    animation-name: orbit;animation-duration: 36.5s;animation-timing-function: linear;animation-iteration-count: infinite;
  1. animation-name: orbit; 指定动画的名称为 orbit。这表示要使用名为 orbit 的动画效果,该动画可能在其他地方通过 @keyframes 规则定义。

  2. animation-duration: 36.5s; 设置动画的持续时间为 36.5 秒。这表示完成一次动画循环所需的时间。

  3. animation-timing-function: linear; 指定动画的时间函数为线性(linear)。这表示动画的速度在整个过程中是均匀的,没有加速或减速效果。

  4. animation-iteration-count: infinite; 设置动画的迭代次数为无限。这表示动画将一直循环播放,而不停止。

综合起来,这段 CSS 代码的作用是创建一个名为 orbit 的无限循环动画,每次循环耗时 36.5 秒,动画速度保持匀速。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/585178.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

[Mac软件]App Cleaner Uninstaller 8.2.5应用程序清理和卸载

App Cleaner & Uninstaller是一款Mac应用程序&#xff0c;它可以帮助用户完全删除应用程序及其相关的服务文件、扩展文件等。以下是该应用程序的主要功能&#xff1a; 1. 完全删除应用程序&#xff1a;通过将应用程序图标拖到垃圾桶中删除程序&#xff0c;可以彻底清除应用…

【微服务核心笔记】

一、注册中心 Nacos Alibaba Nacos,服务提供者和服务消费者将自己的信息注册到注册中心,注册中心通过心跳机制来确保每个服务都可以正常运行,服务消费者订阅注册中心,注册中心为服务消费者推送变更信息 1、功能 动态服务发现配置管理2、搭建 创建 nacos 所需要的数据库在服…

根据文法求对应的语言

技巧&#xff1a;最后得到的是终结符组成的闭包 例题&#xff1a; 文法G[S]: S-->AB A-->aAb|ab B-->Bc|&#xff0c;求对应的语言 ①S-->(aAb|ab)(Bc|) ②我们可以观察到&#xff0c;无论A-->aAb还是A-->ab&#xff0c;都一定会同时出现ab,…

3、python-常见数据类型-元组(tuple)

简介 元组是一种不可变序列 元组也是一种序列&#xff0c;因此也可以对它进行索引、分片 一.定义元组 # TODO a 是一个元组 a (1, 2, 3) # TODO 空元组 b () # TODO 元组是以逗号分割 c (12) d (12,) print(a) print(b) print(c) print(d)# (1, 2, 3) # () # 12 # (12,)…

Java学习——设计模式——结构型模式1

文章目录 结构型模式代理模式适配器模式 结构型模式 结构型模式主要涉及如何组合各种对象以便获得更好、更灵活的结构。虽然面向对象的继承机制提供了最基本的子类扩展父类的功能&#xff0c;但结构型模式不仅仅简单地使用继承&#xff0c;而更多地通过组合与运行期的动态组合来…

NModbus-一个C#的Modbus协议库实现

NModbus-一个基于C#实现的Modbus通信协议库 最近在学习C#的时候&#xff0c;因为之前做过环保设备时使用C做过环保设备采集使用到了Modbus协议&#xff0c;当时看了一下基于C语言开发的libmodbus库。所以特意搜索看了一下C#下有什么Modbus协议库&#xff0c;在Github上面找了一…

Spring Cloud Gateway之Predicate断言详解

目录 Predicate&#xff08;断言&#xff09;内置Predicate请求参数匹配请求路径匹配Header 属性匹配Cookie 匹配请求方式匹配请求 ip 地址匹配时间匹配组合匹配 Predicate&#xff08;断言&#xff09; 在 Spring Cloud Gateway 中&#xff0c;Predicate&#xff08;断言&…

K8S学习指南(49)-k8s的证书管理

文章目录 引言什么是证书管理&#xff1f;证书管理的基本流程1. 证书生成2. 证书签发3. 证书使用4. 证书更新 Kubernetes 证书管理示例1. 生成自签名证书2. 使用自签名证书3. 部署使用证书的应用 证书续期与更新结论 引言 Kubernetes&#xff08;K8s&#xff09;是一款开源的容…

idea 如何开启mybatis控制台SQL日志打印

开启 application.yaml mybatis-plus:configuration:log-impl: org.apache.ibatis.logging.stdout.StdOutImplmybatis:configuration:log-impl: org.apache.ibatis.logging.stdout.StdOutImplmap-underscore-to-camel-case: truetypeAliasesPackage: XXXXmapper-locations: c…

【AI】人工智能爆发推进器之知识图谱

目录 一、什么是知识图谱 二、知识图谱的发展历程 三、知识图谱的应用场景 四、知识谱图的例子 知识图谱&#xff0c;一度被称作是人工智能的基石&#xff0c;这是应用组普遍的技术或者说是理念。 一、什么是知识图谱 **知识图谱&#xff08;Knowledge Graph&#xff09;…

node.js对应npm安装和使用

介绍 node.js是一个基于 Chrome V8 引擎的 JavaScript 运行环境&#xff0c;安装node后自带npm。NPM &#xff1a;Node Package ManagerNPM是Node.js标准的软件包管理器 。2010年底&#xff0c;Node.js 的包管理器 npm 诞生&#xff0c;是全球最大的开源库生态系统。 node 20…

SONiC和ONL所依赖的Debian版本说明

Debian 的最新几个版本 下一代 Debian 正式发行版的代号为 trixie — 测试&#xff08;testing&#xff09;版 Debian 12 (bookworm) — 当前的稳定&#xff08;stable&#xff09;版 Debian 11 (bullseye) — 当前的旧的稳定&#xff08;oldstable&#xff09;版 Debian 10&a…

idea配置docker推送本地镜像到远程私有仓库

目录 1&#xff0c;搭建远程Docker 私有仓库 Docker registry 2&#xff0c;Windows10/11系统上安装Docker Desktop 3&#xff0c;idea 配置远程私有仓库地址 4&#xff0c;idea 配置Docker 5&#xff0c;idea在本地构建镜像 6&#xff0c;推送本地Docker镜像到远程 Dock…

线性代数——(期末突击)行列式(上)-行列式计算、行列式的性质

目录 行列式 行列式计算 逆序数 行列式的性质 转置 两行&#xff08;列&#xff09;互换 两行&#xff08;列&#xff09;对应相等 提公因子 两行&#xff08;列&#xff09;对应成比例 某行&#xff08;列&#xff09;为零 行列式分裂 行列式变换及三角行列式 行…

Leetcode.2735 收集巧克力

题目链接 Leetcode.2735 收集巧克力 rating : 2043 给你一个长度为 n n n、下标从 0 0 0 开始的整数数组 n u m s nums nums&#xff0c; n u m s [ i ] nums[i] nums[i] 表示收集位于下标 i i i 处的巧克力成本。每个巧克力都对应一个不同的类型&#xff0c;最初&#xff…

通过ADB来实现脚本来控制手机

ADB 简介 adb的全称为Android Debug Bridge,安卓调试桥,可以通过调试命令来控制手机,诸如开机,关机等按键控制;或者启动,关闭应用;异或进行触摸模拟. 通过学习adb,可以实现简单的脚本控制,最大的特点是不需要root,对于普通手机都可以进行,帮助我们完成一些简单的重复性事件,…

centos搭建kubernetes集群步骤

目录 1. 修改host 2. 时间同步 3. 禁用firewalled 4. 禁用selinux 5. 禁用swap 6. 网桥设置 7. docker安装 8. 安装k8s 9. 异性操作 10. 配置flannel​​​​​​​ 1. 修改host cat >> /etc/hosts << EOF 172.16.188.175 master 172.16.188.176 node1 …

基于Freeswitch实现的Volte网视频通知应用

现在运营商的Volte网络已经很好的支持视频通话了&#xff0c;因此在原来的电话语音通知的基础上&#xff0c;可以更进一步实现视频的通知&#xff0c;让用户有更好的体验&#xff0c;本文就从技术角度&#xff0c;基于Freeswitch来实现此类应用&#xff08;本文假设读者已对Fre…

2分钟快速了解Nginx

1.简介 Nginx&#xff08;发音为 “engine x”&#xff09;是一个高性能的HTTP和反向代理服务器&#xff0c;也用作邮件代理服务器。它以其稳定性、丰富的功能集、简单的配置和低资源消耗而闻名。 2.详细解释 Nginx由俄罗斯程序员Igor Sysoev为解决C10k问题&#xff08;即同…

三台CentOS7.6虚拟机搭建Hadoop完全分布式集群(三)

这个是笔者大学时期的大数据课程使用三台CentOS7.6虚拟机搭建完全分布式集群的案例&#xff0c;已成功搭建完全分布式集群&#xff0c;并测试跑实例。 9 安装hbase 温馨提示&#xff1a;安装hbase先在master主节点上配置&#xff0c;然后远程复制到slave01或slave02 &#xf…