黑马前端——days14_js
案例 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><link rel="stylesheet" href="style1.css">
</head><body><script src="index1.js"></script>
</body></html>
格式文件
span {/* 需要給span指定内外边距 */display: inline-block;width: 80px;height: 30px;text-align: center;line-height: 30px;padding: 5px 10px;margin: 2px;border: 1px solid #000;border-radius: 5px;box-shadow: 2px 2px 2px rgba(255, 192, 203, 0.4);color: hotpink;background-color: rgba(255, 192, 203, 0.1);
}
事件文件
for (let i = 1; i <= 9; i++) {for (let j = 1; j <= i; j++) {document.write(`<span>${j} * ${i} = ${i * j}</span>`)}document.write(`<br>`)
}
案例 2
页面框架文件
<!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><link rel="stylesheet" href="style2.css">
</head><body><script src="index2.js"></script>
</body></html>
格式文件
* {margin: 0;padding: 0;
}.box {/* 弹性盒子布局 */display: flex;width: 700px;height: 300px;border-left: 1px solid #000;border-bottom: 1px solid #000;margin: 50px auto;text-align: center;/* 均匀排列每个元素 每个元素周围分配相同的空间 */justify-content: space-around;/* 将元素与 flex 容器的主轴末端或交叉轴末端对齐 */align-items: flex-end;
}.box>div {/* 弹性盒子布局 */display: flex;width: 50px;background-color: greenyellow;/* 定义主轴和方向 */flex-direction: column;/* 均匀排列每个元素 首个元素放置于起点 末尾元素放置于终点 */justify-content: space-between;
}.box div span {/* 默认文字在边框顶端 将文字移出去 */margin-top: -20px;
}.box div h4 {width: 70px;/* 默认文字在边框底部 将文字移出去并居中 */margin-bottom: -35px;margin-left: -10px;
}
事件文件
let arr = []
for (let i = 1; i <= 4; i++) {arr.push(prompt(`请输入第${i}季度的数据`))
}
document.write(`<div class="box">`)
for (let i = 0; i < 4; i++) {document.write(`<div style="height: ${arr[i]}px;"><span>${arr[i]}</span><h4>第${i + 1}季度</h4></div>`)
}
document.write(`</div>`)
相关文章：
黑马前端——days14_js
案例 1 页面框架文件 <!DOCTYPE html> <html lang"zh-CN"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title>&l…...
【自动驾驶】ROS中参数服务器通信（c++）
目录 通信过程新建参数服务器包编写测试文件修改cmakelist:搭配launch文件启动测试及结果 通信过程 1.Talker 设置参数 Talker 通过 RPC 向参数服务器发送参数(包括参数名与参数值)，ROS Master 将参数保存到参数列表中。 2.Listener 获取参数 Listener 通过 RPC 向…...
零基础5分钟上手亚马逊云科技核心云开发知识 - 网络基础
简介： 欢迎来到小李哥全新亚马逊云科技AWS云计算知识学习系列，适用于任何无云计算或者亚马逊云科技技术背景的开发者，通过这篇文章大家零基础5分钟就能完全学会亚马逊云科技一个经典的服务开发架构方案。 我会每天介绍一个基于亚马逊云科技…...
Unity Recttransform操作
1、拉伸铺满 RectTransform rect GetComponent<RectTransform>();rect.anchorMin Vector2.zero;rect.anchorMax Vector2.one;rect.SetSizeWithCurrentAnchors(RectTransform.Axis.Horizontal, Screen.width);rect.SetSizeWithCurrentAnchors(RectTransform.Axis.Verti…...
MIT线性代数P5
置换矩阵 置换矩阵是行重新排列的单位矩阵。 置换矩阵用P表示， 性质： n阶置换矩阵共有n!个...
patroni+etcd开启SSL认证（三个节点证书一致 使用openssl命令）
瀚高数据库 目录 环境 文档用途 详细信息 环境 系统平台：Linux x86-64 Red Hat Enterprise Linux 7 版本：14 文档用途 本文主要介绍Patroni架构中如何开启etcd的ssl证书认证。 详细信息 一、前提说明 patroni版本：3.0.2 etcd版本&#x…...
Eureka入门指南：微服务注册与发现的基础概念
Eureka入门指南：微服务注册与发现的基础概念 引言 随着微服务架构的普及，微服务之间的高效通信和管理成为了开发和运维的核心挑战之一。为了解决服务发现和管理问题，Netflix推出了Eureka，一个功能强大的服务注册和发现工具。Eur…...
Linux：动态库和静态库
静态库与动态库 A：静态库（.a）：程序在编译链接的时候把库的代码链接到可执行文件中。程序运行的时候将不再需要静态库。 B：动态库（.so）：程序在运行的时候才去链接动态库的代码&#…...
8.13网络编程
笔记 多点通信 一、套接字属性 套接字属性的获取和设置 #include <sys/types.h> /* See NOTES */#include <sys/socket.h>int getsockopt(int sockfd, int level, int optname,void *optval, socklen_t *optlen);int setsockopt(int sockfd, int level…...
蚂蚁AL1 15.6T 创新科技的新典范
● 哈希率：算力达到15.6T（相当于15600G），即每秒能够进行15.6万亿次哈希计算，在同类产品中算力较为出色，能提高WA掘效率。 ● 功耗：功耗为3510W，虽然数值看似不低，但结合其…...
2024年【汽车驾驶员（技师）】考试报名及汽车驾驶员（技师）试题及解析
题库来源：安全生产模拟考试一点通公众号小程序 汽车驾驶员（技师）考试报名参考答案及汽车驾驶员（技师）考试试题解析是安全生产模拟考试一点通题库老师及汽车驾驶员（技师）操作证已考过的学员汇总…...
2024年【甘肃省安全员C证】报名考试及甘肃省安全员C证考试总结
题库来源：安全生产模拟考试一点通公众号小程序 甘肃省安全员C证报名考试参考答案及甘肃省安全员C证考试试题解析是安全生产模拟考试一点通题库老师及甘肃省安全员C证操作证已考过的学员汇总，相对有效帮助甘肃省安全员C证考试总结学员顺利通过考试。 1、…...
RabbitMQ 双机系统偶尔丢失消息问题排查
实话说起来，这个问题，实际是一个非常低级的错误导致的，算不得什么高深的技术问题。但是在排查的过程中，却是费了好大的功夫，死了不少脑细胞。所以也值得记录一下，算作给大家提个醒，或许可以帮大…...
Python 环境搭建指南 超详细
Python是由荷兰⼈吉多范罗苏姆（Guido von Rossum，后⾯都称呼他为Guido）发明的⼀种编程语言 1. 1989年圣诞节：Guido开始写Python语⾔的编译器。2. 1991年2⽉：第⼀个Python解释器诞⽣，它是⽤C语⾔实现的&…...
使用三菱PLC源码进行PLC读取写入操作
安装 MX Component 。 我的安装地址在： 打开 utl 文件夹下的 Communication Settings Utility 执行。 配置PLC 添加当前需要配置的PLC 注意 logical station Namber 就是程序里需要对接的逻辑站点编号 5.配置选择对应的COM操作选择对应的cpu型型号，…...
使用Nvm切换nodeJs高版本之后，使用npm install一闪而过
先说现象，最近又有几个项目接手，其中有一个使用NVM切换至高版本node后，出现如下症状； 没有任何提示，然后翻看文件目录，node_modules目录没有创建，同时在全局 npm config set prefix 设置的目录下 多了一个 pgn的快捷，指向项目目录。 使用百度或者chart-gtp,搜索到的答案…...
【Kubernetes】k8s集群安全机制
目录 一.认证 1.k8s集群内的三种认证方式 2.k8s集群内的认证说明 2.1.需要被认证的访问类型 2.2.安全性说明 2.3.证书颁发的方式 2.4.kubeconfig 2.5.Service Account 2.6.Secret 与 SA 的关系 二.鉴权 1.鉴权的方式 2.RBAC的角色与角色绑定 2.1.RBAC的角色 2.2…...
嵌入式学习---DAY24：进程--二
一、exec函数族----启动一个新程序 用fork创建子进程后执行的是和父进程相同的程序（但有可能执行不同的代码分支）， 子进程往往要调用一种exec函数以执行另一个程序。当进程调用一种exec函数时，该进程的 用户空间代码和数据完全被…...
Diffusion Model相关论文解析之(二)DENOISING DIFFUSION IMPLICIT MODELS
目录 1、摘要2、创新点3、主要公式4、自己的理解，对错不确定 1、摘要 Denoising Diffusion Implicit Models (DDIM)是一种扩散模型的改进版本，旨在加速采样过程并提高采样速度。DDIM通过引入非马尔可夫扩散过程，相对于传统的去噪扩散概率…...
【STM32嵌入式系统设计与开发拓展】——14_定时器之输入捕获
参考哔站：链接: 铁头山羊 一、微控制器的高级定时与控制功能集合 1、时基单元 2、输入捕获 3、输出比较 4、从模式控制器 5、高级定时器的输出控制 二、问题集合 1、什么是定时器 定时器是一种专门负责定时功能的片上外设GPI0AFI0EXTIUSART RCC I2C) 2、定时器…...
UE5 学习系列（二）用户操作界面及介绍
这篇博客是 UE5 学习系列博客的第二篇，在第一篇的基础上展开这篇内容。博客参考的 B 站视频资料和第一篇的链接如下： 【Note】：如果你已经完成安装等操作，可以只执行第一篇博客中 2. 新建一个空白游戏项目 章节操作，重…...
Ubuntu系统下交叉编译openssl
一、参考资料 OpenSSL&&libcurl库的交叉编译 - hesetone - 博客园 二、准备工作 1. 编译环境 宿主机：Ubuntu 20.04.6 LTSHost：ARM32位交叉编译器：arm-linux-gnueabihf-gcc-11.1.0 2. 设置交叉编译工具链 在交叉编译之前&#x…...
反向工程与模型迁移：打造未来商品详情API的可持续创新体系
在电商行业蓬勃发展的当下，商品详情API作为连接电商平台与开发者、商家及用户的关键纽带，其重要性日益凸显。传统商品详情API主要聚焦于商品基本信息（如名称、价格、库存等）的获取与展示，已难以满足市场对个性化、智能…...
逻辑回归：给不确定性划界的分类大师
想象你是一名医生。面对患者的检查报告（肿瘤大小、血液指标），你需要做出一个**决定性判断**：恶性还是良性？这种“非黑即白”的抉择，正是**逻辑回归（Logistic Regression）** 的战场&a…...
从零实现富文本编辑器#5-编辑器选区模型的状态结构表达
先前我们总结了浏览器选区模型的交互策略，并且实现了基本的选区操作，还调研了自绘选区的实现。那么相对的，我们还需要设计编辑器的选区表达，也可以称为模型选区。编辑器中应用变更时的操作范围，就是以模型选区为基准来…...
Python：操作 Excel 折叠
💖亲爱的技术爱好者们，热烈欢迎来到 Kant2048 的博客！我是 Thomas Kant，很开心能在CSDN上与你们相遇～💖 本博客的精华专栏： 【自动化测试】 【测试经验】 【人工智能】 【Python】 Python 操作 Excel 系列 读取单元格数据按行写入设置行高和列宽自动调整行高和列宽水平…...
Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例
使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件，常用于在两个集合之间进行数据转移，如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。 核心特性与用法 基本属性 v-model：绑定右侧列表的值&…...
Unit 1 深度强化学习简介
Deep RL Course ——Unit 1 Introduction 从理论和实践层面深入学习深度强化学习。学会使用知名的深度强化学习库，例如 Stable Baselines3、RL Baselines3 Zoo、Sample Factory 和 CleanRL。在独特的环境中训练智能体，比如 SnowballFight、Huggy the Do…...
QT： `long long` 类型转换为 `QString` 2025.6.5
在 Qt 中，将 long long 类型转换为 QString 可以通过以下两种常用方法实现： 方法 1：使用 QString::number() 直接调用 QString 的静态方法 number()，将数值转换为字符串： long long value 1234567890123456789LL; …...
ABAP设计模式之---“简单设计原则(Simple Design)”
“Simple Design”（简单设计）是软件开发中的一个重要理念，倡导以最简单的方式实现软件功能，以确保代码清晰易懂、易维护，并在项目需求变化时能够快速适应。 其核心目标是避免复杂和过度设计，遵循“让事情保…...