当前位置：首页 > article >正文

蓝桥杯web第三天

article 2026/3/25 20:10:22

展开扇子题目，

#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：设置伸缩盒子的子元素排列方…...

编程日记 2026/3/15 21:22:29

Qt基础入门-详解

前言 qt之路正式开启 💓 个人主页：普通young man-CSDN博客 ⏩ 文章专栏：C_普通young man的博客-CSDN博客 ⏩ 本人giee: 普通小青年 (pu-tong-young-man) - Gitee.com 若有问题评论区见📝 🎉欢迎大家点赞&#x1f44…...

编程日记 2026/3/24 7:02:30

FPGA开发，使用Deepseek V3还是R1（3）：系统级与RTL级

以下都是Deepseek生成的答案 FPGA开发，使用Deepseek V3还是R1（1）：应用场景 FPGA开发，使用Deepseek V3还是R1（2）：V3和R1的区别 FPGA开发，使用Deepseek V3还是R1&#x…...

编程日记 2026/3/16 11:09:34

移动端国际化翻译同步解决方案-V3

1.前言因为软件出海，从在上上家公司就开始做翻译系统，到目前为止已经出了两个比较大的版本了，各个版本解决的痛点如下： V1版本： 主要针对的是AndroidiOS翻译不一致和翻译内容管理麻烦的问题，通过这个工具…...

编程日记 2026/3/16 9:47:09

多空狙击线-新指标-图文教程，多空分界买点以及强弱操盘技术教程，通达信炒股软件指标

“多空狙击线”指标 “多空狙击线”特色指标是量能型技术指标，主要用于分析股票市场中机构做多/做空力量的强程度。该指标的构成、定义与原理如下: “多空狙击线”指标，又称机构做多/做空能量线，通过计算和分析股票市场中机构做多/做空力量…...

编程日记 2026/3/23 19:39:07

零信任架构和传统网络安全模式的

零信任到底是一个什么类型的模型？什么类型的思想或思路，它是如何实现的，我们要做零信任，需要考虑哪些问题？ 零信任最早是约翰金德瓦格提出的安全模型。早期这个模型也是因为在安全研究上考虑的一个新的信任式模型。他最…...

编程日记 2026/3/16 9:06:42

Oracle 11g的部署配置

1、进入官网下载所需版本的Oracle 2、安装 ①：选择setup.exe开始安装 ②：安装提示如下，直接忽略，选是 ③：配置安全更新填写邮箱，并取消勾选 ④：如果点击下一步，提示什么代理啥的…...

编程日记 2026/3/25 3:48:49

下载b站视频音频

文章目录方案一：jjdown如何使用方案二：bilibili哔哩哔哩下载助手如何使用进入插件网站插件下载插件安装使用插件下载视频音频：复制音频下载地址方案三：bat命令下载单个音频下载单个视频下载单个音视频方案一：jjdo…...

编程日记 2026/3/22 20:36:30

记录spring-boot 3.X版本整合RocketMq

版本信息先把该次整合的版本信息列如下： spring-boot spring-cloud rocketmq-spring-boot-starter rocketmq-client rocketmq 3.0.13 2022.0.5 2.2.3 4.9.8 4.9.8 版本信息是如何选择的呢？看rocketMq官网springcloud alibaba版本声明 rock…...

编程日记 2026/3/17 23:05:40

《基于HarmonyOS NEXT API 12+，搭建新闻创作智能写作引擎》

在信息爆炸的时代，新闻行业对于内容生产的效率和质量有着极高的要求。AI技术的发展为新闻创作带来了新的变革契机，借助AI智能写作助手，新闻工作者可以快速生成新闻稿件的初稿，大大提高创作效率。本文将基于HarmonyOS NEXT API 12及…...

编程日记 2026/3/18 6:12:11

探秘基带算法：从原理到5G时代的通信变革【六】CRC 校验

文章目录 2.5 CRC 校验2.5.1 前言2.5.2 CRC算法简介2.5.3 CRC计算的详细过程2.5.4 CRC校验的两种方法详解**分离比较法****整体运算法****不同位出错与余数的关系****总结** 2.5.5 CRC计算的C实现及工具介绍**C实现CRC计算****CRC计算工具推荐** **2.5.6 总结：CRC校…...

编程日记 2026/3/16 20:34:52

Ubuntu 下 nginx-1.24.0 源码分析 - ngx_conf_add_dump

ngx_conf_add_dump 定义在src\core\ngx_conf_file.c static ngx_int_t ngx_conf_add_dump(ngx_conf_t *cf, ngx_str_t *filename) {off_t size;u_char *p;uint32_t hash;ngx_buf_t *buf;ngx_str_node_t *sn;ngx_conf_dump_t *cd;has…...

编程日记 2026/2/21 11:23:32

MySQL快速搭建主从复制

一、基于位点的主从复制部署流程确定主库Binlog是否开启修改主从server_id主库导出数据从库导入数据确定主库备份时的位点在从库配置主库信息查看复制状态并测试数据是否同步二、准备阶段(主库和从库配置都需要修改） 1、确定主库Binlog是否开启 2、修改主从se…...

编程日记 2026/1/29 6:34:53

Linux注册进程终止处理函数

atexit() 是一个标准库函数，用于注册在进程正常终止时要调用的函数。通过 atexit()，你可以确保在程序结束时自动执行一些清理工作，比如释放资源、保存状态等。函数原型如下： #include <stdlib.h> int atexit(void (*func…...

编程日记 2026/1/18 19:17:42

pytorch 模型测试

在使用 PyTorch 进行模型测试时，一般包含加载测试数据、加载训练好的模型、进行推理以及评估模型性能等步骤。以下为你详细介绍每个步骤及对应的代码示例。 1. 导入必要的库 import torch import torch.nn as nn import torchvision import torchvision.transforms as trans…...

编程日记 2026/1/29 16:40:36

水仙花数（华为OD）

题目描述所谓水仙花数，是指一个n位的正整数，其各位数字的n次方和等于该数本身。例如153是水仙花数，153是一个3位数，并且153 13 53 33。输入描述第一行输入一个整数n，表示一个n位的正整数。n在3到7之间&#x…...

编程日记 2026/3/16 20:37:27

（十二）基于 Vue 3 和 Mapbox GL 实现的坐标拾取器组件示例

下面是一个基于 Vue 3 和 Mapbox GL 实现的坐标拾取器组件示例： <template><div class="map-container"><div ref="mapContainer" class="map"></div><div class="coordinates-box"><div v-if=&qu…...

编程日记 2026/2/22 3:40:30

【华为OD机试真题29.9¥】(E卷,100分) - IPv4地址转换成整数（Java Python JS C++ C ）

题目描述存在一种虚拟IPv4地址，由4小节组成，每节的范围为0~255，以#号间隔，虚拟IPv4地址可以转换为一个32位的整数，例如： 128#0#255#255，转换为32位整数的结果为2147549183（0x8000FFFF） 1#0#0#0，转换为32位整数的结果为16777216（0x01000000）现以字符串形式给出一…...

编程日记 2026/2/20 1:00:54

《白帽子讲 Web 安全》之深入同源策略（万字详解）

目录引言一、同源策略基础认知 （一）定义 （二）作用 （三）作用机制详解二、同源策略的分类 （一）域名同源策略 （二）协议同源策略 （三&…...

编程日记 2026/3/20 15:09:02

USRP4120-通用软件无线电平台

1、产品描述 USRP4120平台是彬鸿科技公司推出的以XILINX XC7Z020 SOC处理器为核心，搭配ADI AD9361射频集成芯片，针对无线通信系统科研与教学实验场景的一款通用软件无线电平台。产品频率范围70MHz~6GHz，模拟带宽200KHz~56MHz，支持…...

编程日记 2026/3/16 20:34:56

计算机毕业设计SpringBoot+Vue.js社区智慧养老监护管理平台(源码+文档+PPT+讲解)

温馨提示：文末有 CSDN 平台官方提供的学长联系方式的名片！ 温馨提示：文末有 CSDN 平台官方提供的学长联系方式的名片！ 温馨提示：文末有 CSDN 平台官方提供的学长联系方式的名片！ 作者简介：Java领…...

编程日记 2026/3/16 20:34:59

yoloV5的学习-pycharm版本

真的很让人气愤的一点，老师把我的pycharm给卸载了，我那个上面不仅有gpu-torch，还有gpu-torch，他给俺删了，删了很久，我心都碎了，过几天我就去找他负责，让他给我装回来我的环境&#x…...

编程日记 2026/3/16 14:01:54

蓝桥杯之图形规律

文章目录分析组成，找到规律数正方形在蓝桥杯中，常常会有一些图形的规律的题目需要我们去解决，所以我们需要学会其中的一些方法，我们这样才能解决对应的问题方法1：直接对n进行拆分方法2：使用递归的思路&a…...

编程日记 2026/3/16 20:34:53

JavaScript 变量语法扩展

随着ECMAScript 6（ES6）及后续版本的发布，JavaScript引入了许多新的特性，极大地丰富了变量声明和使用的语法。这些改进不仅提升了代码的可读性和简洁性，还增强了开发效率。本文将介绍一些重要的变量语法扩展&#xff0c…...

编程日记 2026/3/21 12:08:02

SslConnection::SslConnection()详解

一、🔍 SslConnection::SslConnection() 详解这个构造函数的主要作用是： 创建 SSL 对象创建 BIO（I/O 缓冲区）初始化 SSL 服务器模式绑定回调函数（onRead() 处理接收数据） 📌 1. 初始化 SSL 相…...

编程日记 2026/2/19 4:58:30

【计算机网络入门】初学计算机网络（八）

目录 1. S-W协议的信道利用率 2. GBN、SR协议的信道利用率 3.术语补充 3.1 滑动窗口协议 3.2 ARQ协议、连续ARQ协议 4. 信道划分介质访问控制 4.1 时分复用（TDM） 4.2 统计时分复用（STDM） 4.3 频分复用（FDM&a…...

编程日记 2026/3/16 20:27:42

迷你世界脚本生物接口：Creature

生物接口：Creature 彼得兔更新时间: 2024-05-22 17:51:22 继承自 Actor 具体函数名及描述如下: 序号函数名函数描述 1 getAttr(...) 生物属性获取 2 setAttr(...) 生物属性设置 3 isAdult(...) 判断该生物是否成年 4 setOxygenNeed(…...

编程日记 2026/2/23 5:55:45

vue 和 react 底层采用的 diff 算法的区别

Vue 3 和 React 在底层 Diff 算法上的实现确实有一些区别，主要体现在设计理念、性能优化策略以及具体实现方式上。以下是对两者 Diff 算法差异的详细分析： 1. 总体设计理念 Vue 3 的 Diff 算法 Vue 3 的虚拟 DOM Diff 算法基于“双端比较”思想&#xff…...

编程日记 2026/2/24 15:41:55

VUE集成Live2d

VUE集成Live2d 目前基于大模型，可以实现一个桌面的3D动画小人，个人猜测可以简介这个项目进行实现 1-参考网址试了很多项目，只有这个项目直观的把问题说清楚了 Live2D Vue3技术应用:https://blog.csdn.net/hh1233321/article/details/1406947…...

编程日记 2026/3/16 20:34:53

C++蓝桥杯基础篇（七）

片头嗨~小伙伴们，大家好！今天我们来一起学习蓝桥杯基础篇（七），学习相关字符串的知识，准备好了吗？咱们开始咯！ 一、字符与整数的联系——ASCII码每个常用字符都对应一个-128~127的…...

编程日记 2026/3/16 20:23:10

展开扇子题目，

webkit

相关文章：