蓝桥杯web第三天
展开扇子题目，
#box:hover #item1 {
transform:rotate(-60deg);
}
当悬浮在父盒子，子元素旋转
webkit
display: -webkit-box：将元素设置为弹性伸缩盒子模型。-webkit-box-orient: vertical：设置伸缩盒子的子元素排列方式为垂直排列。overflow: hidden：隐藏超出元素容器的内容。text-overflow: ellipsis：当文本溢出时，显示省略号。-
/* 最多显示两行文本 */-webkit-line-clamp: 2;
<!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><body><div class="div1"><div class="div2">是兄弟就来砍我</div><div class="div3"><div class="li1"><table><tbody><tr><td rowspan="2"><div class="circle">天乐</div></td><td>18:57</td></tr><tr><td>今天吃点啥？</td></tr></tbody></table></div><div class="li2"><table><tbody><tr><td>18:59</td><td rowspan="2"><div class="circle">热巴</div></td></tr><tr><td>最近八合里周年庆，咱们去薅羊毛呀</td></tr></tbody></table></div><div class="li1"><table><tbody><tr><td rowspan="2"><div class="circle">天乐</div></td><td>19:01</td></tr><tr><td>行收拾一下走吧，早点去排个号</td></tr></tbody></table></div></div><div class="div4"><div class="shuru"><textarea class="text" id="" placeholder="请输入"></textarea></div><div class="submit" onclick="tijiao()">发送</div></div></div><style>body,html {display: flex;justify-content: center;align-items: center;background-color: gray;}.div1 {background-color: white;width: 400px;height: 460px;border-radius: 5px;}.div2 {margin: 0px;padding: 10px;font-size: 16px;font-weight: bolder;}.div3 {border-top: 2px solid gray;border-bottom: 2px solid gray;padding: 10px;height: 500px;background-color: white;}.div4 {height: 200px;background-color: white;}.circle {width: 50px;height: 50px;background-color: #3e4ea0;border-radius: 50%;text-align: center;/* vertical-align: middle; */line-height: 50px;color: #fff;font-size: 16px;}.li2 {float: right;margin: 20px;}.div3 .li1 table tbody tr:nth-child(2) td:nth-child(1),.div3 .li3 table tbody tr:nth-child(2) td:nth-child(1) {padding: 10px;background-color: #f2f4f5;border-top-right-radius: 10px;border-bottom-left-radius: 10px;border-bottom-right-radius: 10px;}.div3 .li1 table tbody tr:nth-child(1) td:nth-child(1),.div3 .li3 table tbody tr:nth-child(1) td:nth-child(1) {padding-right: 10px;}.div3 .li2 table tbody tr:nth-child(1) td:nth-child(2) {padding-left: 10px;}.div3 .li2 table tbody tr:nth-child(2) td:nth-child(1) {padding: 10px;background-color: #4571ff;border-top-left-radius: 10px;border-bottom-left-radius: 10px;border-bottom-right-radius: 10px;color: white;}.div3 .li2 table tbody tr:nth-child(1) td:nth-child(1) {float: right;}table,td {/* border: 1px solid #000; */}.shuru {padding: 10px;}.submit {margin-top: 40px;margin-right: 10px;float: right;background-color: #4571ff;padding-left: 20px;padding-right: 20px;padding-top: 8px;padding-bottom: 8px;color: #fff;border-radius: 5px;cursor: pointer;}</style><script>var div3 = document.querySelector('.div3');console.log(div3.innerHTML);var text = document.querySelector(".text");function tijiao() {var add = `<div class="li2"><table><tbody><tr><td>18:59</td><td rowspan="2"><div class="circle">热巴</div></td></tr><tr><td>${text.value}</td></tr></tbody></table></div>`div3.innerHTML = div3.innerHTML + add;}</script></body></html>
<!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><body><div class="div1" onclick="download1()">点击下载美图</div><div class="div2">现在是北京时间</div>
</body><script>var div1 = document.querySelector('.div1');function download1() {div1.innerText = '正在下载'}var div2 = document.querySelector('.div2');setInterval(function () {var date = new Date();if (date.getSeconds() < 10 && date.getMinutes() < 10) {div2.innerText = `当前时间：${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日${date.getHours()}时0${date.getMinutes()}分0${date.getSeconds()}秒`}else if (date.getSeconds() < 10) {div2.innerText = `当前时间：${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日${date.getHours()}时${date.getMinutes()}分0${date.getSeconds()}秒`}else div2.innerText = `当前时间：${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日${date.getHours()}时${date.getMinutes()}分${date.getSeconds()}秒`}, 1000)</script><style>.div1 {cursor: pointer;}.div2 {font-size: 40px;}
</style></html>相关文章：
蓝桥杯web第三天
展开扇子题目， #box:hover #item1 { transform:rotate(-60deg); } 当悬浮在父盒子，子元素旋转 webkit display: -webkit-box：将元素设置为弹性伸缩盒子模型。-webkit-box-orient: vertical：设置伸缩盒子的子元素排列方…...
C#开发——时间间隔类TimSpan
TimeSpan 是 C# 中的一个结构（ struct ），用于表示时间间隔或持续时间。它位于 System 命名空间中，是处理时间相关操作时非常重要的工具，尤其是在计算两个日期或时间之间的差值、表示时间段或执行时间相关的运算…...
NModbus 连接到Modbus服务器（Modbus TCP）
1、在项目中通过NuGet添加NModbus，在界面中添加一个Button。 using NModbus.Device; using NModbus; using System.Net.Sockets; using System.Text; using System.Windows; using System.Windows.Controls; using System.Windows.Data; using System.Windows.Docu…...
蓝桥杯 之 图形规律
文章目录 分析组成，找到规律数正方形 在蓝桥杯中，常常会有一些图形的规律的题目需要我们去解决，所以我们需要学会其中的一些方法，我们这样才能解决对应的问题 方法1：直接对n进行拆分方法2：使用递归的思路&a…...
多线程学习之路
多线程的创建方式主要有以下几种： 1. 继承 Thread 类 通过继承 Thread 类并重写 run() 方法来创建线程。 class MyThread extends Thread {Overridepublic void run() {// 线程执行的任务System.out.println("Thread is running");} }public class Mai…...
英码科技携昇腾DeepSeek大模型一体机亮相第三届北京人工智能产业创新发展大会
2025年2月28日，第三届北京人工智能产业创新发展大会在国家会议中心隆重开幕。本届大会以"好用、易用、愿用——以突破性创新加速AI赋能千行百业”为主题，重点展示人工智能技术创新成果与产业化应用实践。作为昇腾生态的APN伙伴，英码科技…...
【AI】如何理解与应对AI中的敏感话题：详细分析与实用指南
引言 随着人工智能（AI）技术的不断发展，我们在与AI交互时，可能会遇到敏感话题的讨论限制。在许多情况下，AI系统为了避免触及社会、政治或文化敏感点，会对用户输入进行一定的筛选和过滤。那么，这…...
(十 三)趣学设计模式 之 模版方法模式！
目录 一、 啥是模板方法模式？二、 为什么要用模板方法模式？三、 模板方法模式的实现方式四、 模板方法模式的优缺点五、 模板方法模式的应用场景六、 总结 🌟我的其他文章也讲解的比较有趣😁，如果喜欢博主的讲解方式&a…...
20250225-代码笔记03-class CVRPModel AND other class
文章目录 前言一、class CVRPModel(nn.Module):__init__(self, **model_params)函数功能函数代码 二、class CVRPModel(nn.Module):pre_forward(self, reset_state)函数功能函数代码 三、class CVRPModel(nn.Module):forward(self, state)函数功能函数代码 四、def _get_encodi…...
【postman】postman找回接口数据
项目提测，一打开postman天塌了，所有接口都不见了。。。。conllection目录也看不见了，也导入不了同事给我发的json文件。 然后重新找同事要了一个安装包，覆盖安装了之后，在下面的目录里面找到了备份文件【C:\Users\yan…...
Milvus向量数据库部署
一、什么是Milvus Milvus 是一款开源的向量数据库，旨在帮助开发者轻松管理和检索大规模向量数据。它通过高效的索引技术，支持快速的相似度搜索，使得从海量数据中查找最接近的匹配变得简单而快捷。无论是构建推荐系统、进行图像识别还是分析自…...
显式 GC 的使用：留与去，如何选择？
目录 一、什么是显式 GC？ （一） 垃圾回收的基本原理 （二）显式 GC 方法和行为 1. System.gc() 方法 2. 显式 GC 的行为 （三）显式 GC 的使用场景与风险 1. JVM 如何处理显式 GC 2. 显式 GC…...
探秘基带算法：从原理到5G时代的通信变革【二】Viterbi解码
文章目录 二、关键算法原理剖析2.1 Viterbi 解码2.1.1 卷积码与网格图基础**卷积码****网格图****生成多项式****理想情况下解码过程** 2.1.2 Viterbi 算法核心思想2.1.3 路径度量与状态转移机制2.1.4 算法流程与关键步骤详解2.1.5 译码算法举例与复杂度分析2.1.6 算法代码示例…...
从零实现高并发内存池
目录 一、项目介绍 二、什么是内存池？ 1.池化技术 2.内存池 3.内存池解决的问题 三、malloc本身就是内存池 四、定长内存池 五、高并发内存池整体框架 六、thread cache 七、central cache 八、page cache 一、项目介绍 当前项目是实现一个高并发的内存池…...
学习笔记)
3-7 WPS JS宏 工作表移动复制实例-2(多工作簿的多工作表合并)学习笔记
************************************************************************************************************** 点击进入 -我要自学网-国内领先的专业视频教程学习网站 *******************************************************************************************…...
【计算机网络】考研复试高频知识点总结
文章目录 一、基础概念1、计算机⽹络的定义2、计算机⽹络的目标3、计算机⽹络的组成4、计算机⽹络的分类5、计算机⽹络的拓扑结构6、计算机⽹络的协议7、计算机⽹络的分层结构8、OSI 参考模型9、TCP/IP 参考模型10、五层协议体系结构 二、物理层1、物理层的功能2、传输媒体3、 …...
IDEA Tab 页设置多行显示
前言 日常编码中，经常需要在编辑器中同时打开多个文件，而在 IDEA 中，默认情况下，顶部的 Tab 页只显示一行，多余的文件会被隐藏起来，如下图所示： IDEA 默认 Tab 页只显示一行 这种情况下&#…...
Spark核心之02：常用算子详解
1、RDD操作详解 # 启动spark-shell spark-shell --master local[2] 1.1 基本转换 1) map map是对RDD中的每个元素都执行一个指定的函数来产生一个新的RDD。 任何原RDD中的元素在新RDD中都有且只有一个元素与之对应。 举例： scala> val a sc.parallelize(1 …...
Redis---LRU原理与算法实现
文章目录 LRU概念理解LRU原理基于HashMap和双向链表实现LRURedis中的LRU的实现LRU时钟淘汰策略近似LRU的实现LRU算法的优化 Redis LRU的核心代码逻辑Redis LRU的核心代码逻辑Redis LRU的配置参数Redis LRU的优缺点Redis LRU的优缺点 LRU概念理解 LRU（Least Recentl…...
matlab 包围盒中心匹配法实现点云粗配准
目录 一、算法原理1、原理概述2、参考文献二、代码实现三、结果展示1、初始位置2、配准结果本文由CSDN点云侠原创，原文链接，首发于：20255年3月3日。 一、算法原理 1、原理概述 包围盒中心匹配法是将源点云 P P P...
Cursor实现用excel数据填充word模版的方法
cursor主页：https://www.cursor.com/ 任务目标：把excel格式的数据里的单元格，按照某一个固定模版填充到word中 文章目录 注意事项逐步生成程序1. 确定格式2. 调试程序 注意事项 直接给一个excel文件和最终呈现的word文件的示例，…...
使用VSCode开发Django指南
使用VSCode开发Django指南 一、概述 Django 是一个高级 Python 框架，专为快速、安全和可扩展的 Web 开发而设计。Django 包含对 URL 路由、页面模板和数据处理的丰富支持。 本文将创建一个简单的 Django 应用，其中包含三个使用通用基本模板的页面。在此…...
CTF show Web 红包题第六弹
提示 1.不是SQL注入 2.需要找关键源码 思路 进入页面发现是一个登录框，很难让人不联想到SQL注入，但提示都说了不是SQL注入，所以就不往这方面想了 先查看一下网页源码，发现一段JavaScript代码，有一个关键类ctfs…...
阿里云ACP云计算备考笔记 (5)——弹性伸缩
目录 第一章 概述 第二章 弹性伸缩简介 1、弹性伸缩 2、垂直伸缩 3、优势 4、应用场景 ① 无规律的业务量波动 ② 有规律的业务量波动 ③ 无明显业务量波动 ④ 混合型业务 ⑤ 消息通知 ⑥ 生命周期挂钩 ⑦ 自定义方式 ⑧ 滚的升级 5、使用限制 第三章 主要定义 …...
LeetCode - 394. 字符串解码
题目 394. 字符串解码 - 力扣（LeetCode） 思路 使用两个栈：一个存储重复次数，一个存储字符串 遍历输入字符串： 数字处理：遇到数字时，累积计算重复次数左括号处理：保存当前状态&a…...
SpringCloudGateway 自定义局部过滤器
场景： 将所有请求转化为同一路径请求（方便穿网配置）在请求头内标识原来路径，然后在将请求分发给不同服务 AllToOneGatewayFilterFactory import lombok.Getter; import lombok.Setter; import lombok.extern.slf4j.Slf4j; impor…...
在WSL2的Ubuntu镜像中安装Docker
Docker官网链接: https://docs.docker.com/engine/install/ubuntu/ 1、运行以下命令卸载所有冲突的软件包： for pkg in docker.io docker-doc docker-compose docker-compose-v2 podman-docker containerd runc; do sudo apt-get remove $pkg; done2、设置Docker…...
全志A40i android7.1 调试信息打印串口由uart0改为uart3
一，概述 1. 目的 将调试信息打印串口由uart0改为uart3。 2. 版本信息 Uboot版本：2014.07； Kernel版本：Linux-3.10； 二，Uboot 1. sys_config.fex改动 使能uart3(TX:PH00 RX:PH01)，并让boo…...
网站指纹识别
网站指纹识别 网站的最基本组成：服务器（操作系统）、中间件（web容器）、脚本语言、数据厍 为什么要了解这些？举个例子：发现了一个文件读取漏洞，我们需要读/etc/passwd，如…...
QT3D学习笔记——圆台、圆锥
类名作用Qt3DWindow3D渲染窗口容器QEntity场景中的实体（对象或容器）QCamera控制观察视角QPointLight点光源QConeMesh圆锥几何网格QTransform控制实体的位置/旋转/缩放QPhongMaterialPhong光照材质（定义颜色、反光等）QFirstPersonC…...