当前位置: 首页 > news >正文

蓝桥杯web第三天

展开扇子题目,

#box:hover #item1 {
        transform:rotate(-60deg);
}

当悬浮在父盒子,子元素旋转

webkit

  1. display: -webkit-box:将元素设置为弹性伸缩盒子模型。
  2. -webkit-box-orient: vertical:设置伸缩盒子的子元素排列方式为垂直排列。
  3. overflow: hidden:隐藏超出元素容器的内容。
  4. text-overflow: ellipsis:当文本溢出时,显示省略号。
  5.   /* 最多显示两行文本 */-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第三天

展开扇子题目&#xff0c; #box:hover #item1 { transform:rotate(-60deg); } 当悬浮在父盒子&#xff0c;子元素旋转 webkit display: -webkit-box&#xff1a;将元素设置为弹性伸缩盒子模型。-webkit-box-orient: vertical&#xff1a;设置伸缩盒子的子元素排列方…...

C#开发——时间间隔类TimSpan

TimeSpan 是 C# 中的一个结构&#xff08; struct &#xff09;&#xff0c;用于表示时间间隔或持续时间。它位于 System 命名空间中&#xff0c;是处理时间相关操作时非常重要的工具&#xff0c;尤其是在计算两个日期或时间之间的差值、表示时间段或执行时间相关的运算…...

NModbus 连接到Modbus服务器(Modbus TCP)

1、在项目中通过NuGet添加NModbus&#xff0c;在界面中添加一个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…...

蓝桥杯 之 图形规律

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

多线程学习之路

多线程的创建方式主要有以下几种&#xff1a; 1. 继承 Thread 类 通过继承 Thread 类并重写 run() 方法来创建线程。 class MyThread extends Thread {Overridepublic void run() {// 线程执行的任务System.out.println("Thread is running");} }public class Mai…...

英码科技携昇腾DeepSeek大模型一体机亮相第三届北京人工智能产业创新发展大会

2025年2月28日&#xff0c;第三届北京人工智能产业创新发展大会在国家会议中心隆重开幕。本届大会以"好用、易用、愿用——以突破性创新加速AI赋能千行百业”为主题&#xff0c;重点展示人工智能技术创新成果与产业化应用实践。作为昇腾生态的APN伙伴&#xff0c;英码科技…...

【AI】如何理解与应对AI中的敏感话题:详细分析与实用指南

引言 随着人工智能&#xff08;AI&#xff09;技术的不断发展&#xff0c;我们在与AI交互时&#xff0c;可能会遇到敏感话题的讨论限制。在许多情况下&#xff0c;AI系统为了避免触及社会、政治或文化敏感点&#xff0c;会对用户输入进行一定的筛选和过滤。那么&#xff0c;这…...

(十 三)趣学设计模式 之 模版方法模式!

目录 一、 啥是模板方法模式&#xff1f;二、 为什么要用模板方法模式&#xff1f;三、 模板方法模式的实现方式四、 模板方法模式的优缺点五、 模板方法模式的应用场景六、 总结 &#x1f31f;我的其他文章也讲解的比较有趣&#x1f601;&#xff0c;如果喜欢博主的讲解方式&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找回接口数据

项目提测&#xff0c;一打开postman天塌了&#xff0c;所有接口都不见了。。。。conllection目录也看不见了&#xff0c;也导入不了同事给我发的json文件。 然后重新找同事要了一个安装包&#xff0c;覆盖安装了之后&#xff0c;在下面的目录里面找到了备份文件【C:\Users\yan…...

Milvus向量数据库部署

一、什么是Milvus Milvus 是一款开源的向量数据库&#xff0c;旨在帮助开发者轻松管理和检索大规模向量数据。它通过高效的索引技术&#xff0c;支持快速的相似度搜索&#xff0c;使得从海量数据中查找最接近的匹配变得简单而快捷。无论是构建推荐系统、进行图像识别还是分析自…...

显式 GC 的使用:留与去,如何选择?

目录 一、什么是显式 GC&#xff1f; &#xff08;一&#xff09; 垃圾回收的基本原理 &#xff08;二&#xff09;显式 GC 方法和行为 1. System.gc() 方法 2. 显式 GC 的行为 &#xff08;三&#xff09;显式 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 算法代码示例…...

从零实现高并发内存池

目录 一、项目介绍 二、什么是内存池&#xff1f; 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 页设置多行显示

前言 日常编码中&#xff0c;经常需要在编辑器中同时打开多个文件&#xff0c;而在 IDEA 中&#xff0c;默认情况下&#xff0c;顶部的 Tab 页只显示一行&#xff0c;多余的文件会被隐藏起来&#xff0c;如下图所示&#xff1a; IDEA 默认 Tab 页只显示一行 这种情况下&#…...

Spark核心之02:常用算子详解

1、RDD操作详解 # 启动spark-shell spark-shell --master local[2] 1.1 基本转换 1) map map是对RDD中的每个元素都执行一个指定的函数来产生一个新的RDD。 任何原RDD中的元素在新RDD中都有且只有一个元素与之对应。 举例&#xff1a; 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&#xff08;Least Recentl…...

matlab 包围盒中心匹配法实现点云粗配准

目录 一、算法原理1、原理概述2、参考文献二、代码实现三、结果展示1、初始位置2、配准结果本文由CSDN点云侠原创,原文链接,首发于:20255年3月3日。 一、算法原理 1、原理概述 包围盒中心匹配法是将源点云 P P P...

【杂谈】-递归进化:人工智能的自我改进与监管挑战

递归进化&#xff1a;人工智能的自我改进与监管挑战 文章目录 递归进化&#xff1a;人工智能的自我改进与监管挑战1、自我改进型人工智能的崛起2、人工智能如何挑战人类监管&#xff1f;3、确保人工智能受控的策略4、人类在人工智能发展中的角色5、平衡自主性与控制力6、总结与…...

多场景 OkHttpClient 管理器 - Android 网络通信解决方案

下面是一个完整的 Android 实现&#xff0c;展示如何创建和管理多个 OkHttpClient 实例&#xff0c;分别用于长连接、普通 HTTP 请求和文件下载场景。 <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas…...

从零开始打造 OpenSTLinux 6.6 Yocto 系统(基于STM32CubeMX)(九)

设备树移植 和uboot设备树修改的内容同步到kernel将设备树stm32mp157d-stm32mp157daa1-mx.dts复制到内核源码目录下 源码修改及编译 修改arch/arm/boot/dts/st/Makefile&#xff0c;新增设备树编译 stm32mp157f-ev1-m4-examples.dtb \stm32mp157d-stm32mp157daa1-mx.dtb修改…...

RNN避坑指南:从数学推导到LSTM/GRU工业级部署实战流程

本文较长&#xff0c;建议点赞收藏&#xff0c;以免遗失。更多AI大模型应用开发学习视频及资料&#xff0c;尽在聚客AI学院。 本文全面剖析RNN核心原理&#xff0c;深入讲解梯度消失/爆炸问题&#xff0c;并通过LSTM/GRU结构实现解决方案&#xff0c;提供时间序列预测和文本生成…...

浪潮交换机配置track检测实现高速公路收费网络主备切换NQA

浪潮交换机track配置 项目背景高速网络拓扑网络情况分析通信线路收费网络路由 收费汇聚交换机相应配置收费汇聚track配置 项目背景 在实施省内一条高速公路时遇到的需求&#xff0c;本次涉及的主要是收费汇聚交换机的配置&#xff0c;浪潮网络设备在高速项目很少&#xff0c;通…...

PAN/FPN

import torch import torch.nn as nn import torch.nn.functional as F import mathclass LowResQueryHighResKVAttention(nn.Module):"""方案 1: 低分辨率特征 (Query) 查询高分辨率特征 (Key, Value).输出分辨率与低分辨率输入相同。"""def __…...

Go 语言并发编程基础:无缓冲与有缓冲通道

在上一章节中&#xff0c;我们了解了 Channel 的基本用法。本章将重点分析 Go 中通道的两种类型 —— 无缓冲通道与有缓冲通道&#xff0c;它们在并发编程中各具特点和应用场景。 一、通道的基本分类 类型定义形式特点无缓冲通道make(chan T)发送和接收都必须准备好&#xff0…...

MySQL 8.0 事务全面讲解

以下是一个结合两次回答的 MySQL 8.0 事务全面讲解&#xff0c;涵盖了事务的核心概念、操作示例、失败回滚、隔离级别、事务性 DDL 和 XA 事务等内容&#xff0c;并修正了查看隔离级别的命令。 MySQL 8.0 事务全面讲解 一、事务的核心概念&#xff08;ACID&#xff09; 事务是…...

【前端异常】JavaScript错误处理:分析 Uncaught (in promise) error

在前端开发中&#xff0c;JavaScript 异常是不可避免的。随着现代前端应用越来越多地使用异步操作&#xff08;如 Promise、async/await 等&#xff09;&#xff0c;开发者常常会遇到 Uncaught (in promise) error 错误。这个错误是由于未正确处理 Promise 的拒绝&#xff08;r…...

Qt 事件处理中 return 的深入解析

Qt 事件处理中 return 的深入解析 在 Qt 事件处理中&#xff0c;return 语句的使用是另一个关键概念&#xff0c;它与 event->accept()/event->ignore() 密切相关但作用不同。让我们详细分析一下它们之间的关系和工作原理。 核心区别&#xff1a;不同层级的事件处理 方…...