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

蓝桥杯 web 新鲜的蔬菜(css3)

思路:

首先将.box容器设置为网格布局 display:grid;同时将网格分成3列3行

然后:通过子选择器或后代选择器选中相应的元素,再通过 grid-area 将其调整到相应的位置

答案:

.box {display: grid;grid-template-columns: 1fr 1fr 1fr;grid-template-rows: 1fr 1fr 1fr;
}
#box1>.item {grid-area: 2 / 2;
}
#box2 .item:nth-child(2) {grid-area: 3 / 3;
}
#box3 .item:nth-child(2) {grid-area: 2 / 2;
}
#box3 .item:nth-child(3) {grid-area: 3 / 3;
}

1.网格布局

  • grid-area 是一种非常灵活的方式,可以精确控制元素在网格中的位置。

2. #box1>.item(子选择器)

语法结构
  • #box1:表示一个 ID 为 box1 的元素。
  • >:这是子选择器(child combinator),表示只选择 #box1 的直接子元素
  • .item:表示类名为 item 的元素。
完整含义
  • #box1>.item 表示:在 ID 为 box1 的容器中,选择所有直接子元素且类名为 item 的元素。
  • 换句话说,这个选择器只会匹配那些直接嵌套在 #box1 内部的 .item 元素,而不会匹配更深层次的嵌套元素。

3. #box2 .item:nth-child(2) (后代选择器)

语法结构
  • 空格:这是一个后代选择器(descendant combinator),表示选择 #box2 内部的所有符合条件的后代元素(包括直接子元素和间接嵌套的元素)。
  • .item:nth-child(2)
    • .item:表示类名为 item 的元素。
    • :nth-child(2):表示该元素是其父元素的第二个子元素

4.grid-area: 2 / 2;

  • grid-area 用于指定一个元素在网格中的位置。语法是 row-start / column-start
  • 2 / 2 表示该元素从第 2 行、第 2 列开始,并且默认占据 1 行和 1 列的空间。

 

相关文章:

蓝桥杯 web 新鲜的蔬菜(css3)

思路: 首先将.box容器设置为网格布局 display:grid;同时将网格分成3列3行 然后:通过子选择器或后代选择器选中相应的元素,再通过 grid-area 将其调整到相应的位置 答案: .box {display: grid;grid-template-columns: 1fr 1fr …...

【AI学习】初步了解TRL

TRL(Transformer Reinforcement Learning) 是由 Hugging Face 开发的一套基于强化学习(Reinforcement Learning, RL)的训练工具,专门用于优化和微调大规模语言模型(如 GPT、LLaMA 等)。它结合了…...

2025-04-07 NO.3 Quest3 MR 配置

文章目录 1 MR 介绍1.1 透视1.2 场景理解1.3 空间设置 2 配置 MR 环境2.1 场景配置2.2 MR 配置 3 运行测试 配置环境: Windows 11Unity 6000.0.42f1Meta SDK v74.0.2Quest3 1 MR 介绍 1.1 透视 ​ 透视(Passthrough)是将应用的背景从虚拟的…...

Kafka在Vue和Spring Boot中的使用实例

Kafka在Vue和Spring Boot中的使用实例 一、项目概述 本项目演示了如何在Vue前端和Spring Boot后端中集成Kafka,实现实时消息的发送和接收,以及数据的实时展示。 后端实现:springboot配置、kafka配置、消息模型和仓库、消息服务和消费者、we…...

层归一化详解及在 Stable Diffusion 中的应用分析

在深度学习中,归一化(Normalization)技术被广泛用于提升模型训练的稳定性和收敛速度。本文将详细介绍几种常见的归一化方式,并重点分析它们在 Stable Diffusion 模型中的实际使用场景。 一、常见的归一化技术 名称归一化维度应用…...

【C++DFS 马拉车】3327. 判断 DFS 字符串是否是回文串|2454

本文涉及知识点 CDFS 马拉车 LeetCode3327. 判断 DFS 字符串是否是回文串 给你一棵 n 个节点的树,树的根节点为 0 ,n 个节点的编号为 0 到 n - 1 。这棵树用一个长度为 n 的数组 parent 表示,其中 parent[i] 是节点 i 的父节点。由于节点 …...

前端开发vue项目(node-modules 可视化神器 Node Modules Inspector)

node-modules 可视化神器 Node Modules Inspector 简介功能特点使用场景实现原理 使用Node Modules Inspector提供 简介 Node Modules Inspector 是一个用于检查和分析 Node.js 项目中模块依赖关系的工具 功能特点 依赖分析:它能够深入剖析 Node.js项目中的模块依…...

25统计建模半自动化辅助排版模板及论文排版格式要求

1.除封面页外,不得在其他页出现学校、参赛队及指导教师的信息。 2.目录应由论文的篇、章、节、条、款以及附录题录等的序号、题名和页码组成。正文页码单独编列,其页码从正文第一页开始编写。 3.标题和正文:论文正文总标题(题目…...

武汉迅狐科技:AI赋能企业营销,打造智能获客新范式

在数字化营销竞争日益激烈的今天,武汉迅狐科技有限公司凭借其创新的AI技术和智能营销解决方案,正在帮助企业突破传统获客瓶颈,实现营销效率的指数级提升。作为一家专注于AI获客软件研发的高新技术企业,迅狐科技推出的矩阵系统、数…...

Tomcat:Java Web 应用开发的核心容器

在Java Web开发领域,Apache Tomcat凭借其开源特性、轻量级架构和强大的功能支持,成为开发者部署和运行Servlet、JSP应用的首选容器。作为Apache软件基金会旗下的Jakarta项目成果,Tomcat不仅实现了Java EE(现Jakarta EE&#xff09…...

Tomcat 安装与配置:超详细指南

目录 一、安装前的准备工作(一)配置 JAVA_HOME 环境变量 二、下载 Tomcat(一)Windows 系统(二)macOS/Linux 系统 三、安装 Tomcat(一)Windows 系统(二)Linux …...

科技快讯 | DeepSeek 公布模型新学习方式;Meta发布开源大模型Llama 4;谷歌推出 Android Auto 14.0 正式版

Meta发布开源大模型Llama 4,首次采用“混合专家架构“ 4月6日,Meta推出开源AI模型Llama 4,包括Scout和Maverick两个版本,具备多模态处理能力。Scout和Maverick参数量分别为170亿和4000亿,采用混合专家架构。Meta同时训…...

skynet.netpack四个核心函数详解

目录 1. netpack.filter(queue, msg, sz)2. netpack.pop(queue)3. netpack.tostring(msg, sz)4. netpack.clear(queue)完整使用场景示例总结 在 Skynet 中,netpack 模块提供了四个核心函数,用于处理网络数据包的接收、粘包解析和队列管理。以下是这四个函…...

Zephyr与Linux核心区别及适用领域分析

一、核心定位与目标场景 特性Zephyr RTOSLinux目标领域物联网终端、实时控制系统&#xff08;资源受限设备&#xff09;服务器、桌面系统、复杂嵌入式设备&#xff08;如路由器&#xff09;典型硬件MCU&#xff08;ARM Cortex-M, RISC-V&#xff09;&#xff0c;内存<1MBMP…...

Linux网络编程(十五)——优于select的epoll

文章目录 15 优于select的epoll 15.1 epoll理解及应用 15.1.1 基于select的I/O复用技术速度慢的原因 15.1.2 select的优点 15.1.3 实现epoll时必要的函数和结构体 15.1.4 epoll_creat1 15.1.5 epoll_ctl 15.1.6 epoll_wait 15.1.7 基于epoll的回声服务器端 15.2 条件…...

PhotoShop学习07

1.为图像添加纹理 图层混合模式是混合 2 张图片的一种快捷方式&#xff0c;一般情况下为图片添加纹理外观可以用到混合模式。 这里有一副图片&#xff0c;我可以为其添加纹理&#xff0c;使之呈现出不同的效果。首先需要为当前图层添加一个纹理图片&#xff0c;可以使用置入嵌…...

【缓存击穿】Java的“SingleFlight”解决方案

在Java中实现类似Golang的SingleFlight机制&#xff0c;可以通过以下步骤解决缓存击穿问题。该方案使用ConcurrentHashMap管理并发请求&#xff0c;并通过CompletableFuture实现异步结果合并。 实现代码 import java.util.concurrent.Callable; import java.util.concurrent.…...

createContext+useContext+useReducer组合管理React复杂状态

createContext、useContext 和 useReducer 的组合是 React 中管理全局状态的一种常见模式。这种模式非常适合在不引入第三方状态管理库&#xff08;如 Redux&#xff09;的情况下&#xff0c;管理复杂的全局状态。 以下是一个经典的例子&#xff0c;展示如何使用 createContex…...

海外直播平台交互设计师简历模板

营销团队管理技巧培训PPT啊&#xff0c;其实是一个非常有用的工具呢&#xff01;它不仅能帮助管理者梳理思路&#xff0c;还能让团队成员快速掌握关键技能。说实话&#xff0c;一个好的PPT就像一位优秀的导师&#xff0c;在会议室里就能让人眼前一亮&#xff01;比如有一次我参…...

基于springboot微信小程序课堂签到及提问系统(源码+lw+部署文档+讲解),源码可白嫖!

摘要 随着信息时代的来临&#xff0c;过去的课堂签到及提问管理方式的缺点逐渐暴露&#xff0c;本次对过去的课堂签到及提问管理方式的缺点进行分析&#xff0c;采取计算机方式构建基于微信小程序的课堂签到及提问系统。本文通过阅读相关文献&#xff0c;研究国内外相关技术&a…...

MCU软件开发使用指针有哪些坑?

目录 1、空指针访问 2、野指针&#xff08;未初始化的指针&#xff09; 3、指针越界 4、内存泄漏 5、悬空指针 6、指针类型不匹配 7、多任务环境中的指针访问 8、对齐问题 在MCU软件开发中&#xff0c;使用指针虽然可以提高程序的灵活性和性能&#xff0c;但也存在许多…...

ubuntu 20.04 编译和运行SC-LeGo-LOAM

1.搭建文件目录和clone代码 mkdir -p SC-LeGo-LOAM/src cd SC-LeGo-LOAM/src git clone https://github.com/AbangLZU/SC-LeGO-LOAM.git cd .. 2.修改代码 需要注意的是原作者使用的是Ouster OS-64雷达&#xff0c;需要更改utility.h文件中适配自己的雷达类型&#xff0c;而…...

FPGA_DDR(一) 仿真

对ddr进行读写实验&#xff0c;用了vivado的ddr的模型进行仿真 1 创建AXI_mig的ip核 选择axi 选择自己的型号&#xff0c;这里是ddr的位宽32&#xff0c;但是axi的话是256位宽 选择nobuffer&#xff0c;没有缓冲器 选择自己匹配引脚 默认 后面默认即可 生成ip&#xff0c;时间…...

【Spec2MP:项目管理之项目人力管理】

芯片设计项目中如何打造战斗力强悍的团队&#xff1f; 引言&#xff1a;芯片设计项目的核心是人 芯片设计是一项高度复杂、跨学科协作的工程&#xff0c;团队的专业性、协作效率和凝聚力直接影响项目成败。本文结合某芯片项目人力管理文档&#xff0c;从目标、职责、价值观、架…...

windows10下PointNet官方代码Pytorch实现

PointNet模型运行 1.下载源码并安装环境 GitCode - 全球开发者的开源社区,开源代码托管平台GitCode是面向全球开发者的开源社区,包括原创博客,开源代码托管,代码协作,项目管理等。与开发者社区互动,提升您的研发效率和质量。https://gitcode.com/gh_mirrors/po/pointnet.pyto…...

阿里云大模型训练与推理开发

本文主要描述阿里云大模型开发环境的搭建、训练数据集的制作流程、大模型如何训练数据集以及如何利用已训练完成的模型执行推理。 开发环境搭建 ModelScope社区是阿里云通义千问开源的大模型开发者社区。 如上所示&#xff0c;安装ModelScope社区大模型基础库开发框架的命令行…...

图灵逆向——题一-动态数据采集

目录列表 过程分析代码实现 过程分析 第一题比较简单&#xff0c;直接抓包即可&#xff0c;没有任何反爬&#xff08;好像头都不用加。。。&#xff09; 代码实现 答案代码如下&#xff1a; """ -*- coding: utf-8 -*- File : .py author : 鲨鱼爱兜兜 T…...

GS069W电动工具直流调速电路深度解析

产品概述 GS069W是我们推出的CMOS专用调速集成电路&#xff0c;采用SOP8封装&#xff0c;内置15V稳压结构&#xff0c;具有宽电压输入&#xff08;4-24V&#xff09;、低功耗、强抗干扰等特点&#xff0c;专为电动工具调速设计。 核心参数 工作电压&#xff1a;4-24V&#xff…...

PyQt6实例_A股日数据维护工具_下载某个股票未复权数据

目录 前置&#xff1a; 相关代码&#xff1a; 1 工作类 2 数据库交互 3 主界面调用 视频 前置&#xff1a; 1 本系列将以 “PyQt6实例_A股日数据维护工具” 开头放置在“PyQt6实例”专栏 2 日数据可在“数据库”专栏&#xff0c;“PostgreSQL_”开头系列博文中获取 3 权…...

【蓝桥杯】算法笔记6

1. 可行性剪枝应用 1.1. 题目 题目描述: 给定一个正整数n和一个正整数目标值target,以及一个由不同正整数组成的数组nums。要求从nums中选出若干个数,每个数可以被选多次,使得这些数的和恰好等于target。问有多少种不同的组合方式? 输入: 第一行:n和target,表示数组…...

C++ 中日期类的输入输出操作符重载实践

目录 引言 预备知识 输出流操作符 operator<< 重载 为什么要返回 ostream& 输入流操作符 operator>> 重载 实现思路 测试代码 总结 引言 在 C 编程中&#xff0c;当我们自定义数据类型时&#xff0c;为了让其能像内置类型一样方便地进行输入输出操…...

图论:最小生成树

最小生成树 &#xff08;无向无环图&#xff09; 概念 1.Prim算法 P3366 【模板】最小生成树 - 洛谷 邻接矩阵实现 #include<iostream> #include<cstring> using namespace std; const int INF 0x3f3f3f3f; const int N 5e3 10; int dis[N]; //记录每个结点到…...

linux中CosyVoice声音克隆安装教程——TTS文本转语音(数字人组件)

CosyVoice 作为一款先进的语音合成解决方案&#xff0c;其设计理念在于提供高效、稳定且灵活的语音生成工具。本教程将从环境配置、依赖安装、模型下载到服务部署全流程进行详细介绍&#xff0c;旨在为用户提供前瞻性的技术指导&#xff0c;同时兼顾细节解析和专业名词解释&…...

智能手表该存什么音频和文本?场景化存储指南

文章目录 为什么需要“场景化存储”&#xff1f;智能手表的定位手机替代不了的场景碎片化的场景存储 音频篇&#xff1a;智能手表该存什么音乐和音频&#xff1f;运动场景通勤场景健康场景 文本篇&#xff1a;哪些文字信息值得放进手表&#xff1f;&#xff08;部分情况可使用图…...

怎么检查网站CDN缓存是否生效

为什么要使用CDN缓存&#xff1f; 网站使用缓存可显著提升加载速度&#xff0c;减少服务器负载和带宽消耗&#xff0c;优化用户体验&#xff0c;增强架构稳定性&#xff0c;助力SEO优化&#xff0c;实现资源高效利用与性能平衡。 通过合理配置 CDN 缓存策略&#xff0c;可降低…...

win10安装gitbash工具

问题描述:在Windows下没有预装bash命令处理工具 # WInR输入cmd回车进入命令行,执行以下命令出现乱码 bash 无法使用bash命令 解决方案&#xff1a;下载安装gitbash命令行工具 Git Bash 是一个在 Windows 上运行的终端仿真器&#xff0c;集成了 Git 和 Bash shell&#xff0…...

买不起了,iPhone 或涨价 40% ?

周知的原因&#xff0c;新关税对 iPhone 的打击&#xff0c;可以说非常严重。 根据 Rosenblatt Securities分析师的预测&#xff0c;若苹果完全把成本转移给消费者。 iPhone 16 标配版的价格&#xff0c;可能上涨43%。 iPhone 16 标配的价格是799美元&#xff0c;上涨43%&am…...

企业级 ClickHouse Docker 离线部署实践指南20250407

企业级 ClickHouse Docker 离线部署实践指南 引言 在数据分析与日志处理日益重要的今天&#xff0c;ClickHouse 凭借其高性能、列式存储架构&#xff0c;成为企业在大数据分析中的首选引擎之一。本文基于一位金融行业从业者在离线网络环境中部署 ClickHouse 的真实实践过程&a…...

多域名​ SSL 证书能保护多少个域名?

一、基础保护数量范围​ 多域名 SSL 证书&#xff0c;顾名思义&#xff0c;可保护多个不同域名。通常情况下&#xff0c;不同证书颁发机构&#xff08;CA&#xff09;设定的基础保护数量有所差异。一般的多域名 SSL 证书能保护2 至 5 个域名&#xff0c;这些域名可以是完全独立…...

Linux系统学习Day04 阻塞特性,文件状态及文件夹查询

知识点4【文件的阻塞特性】 文件描述符 默认为 阻塞 的 比如&#xff1a;我们读取文件数据的时候&#xff0c;如果文件缓冲区没有数据&#xff0c;就需要等待数据的到来&#xff0c;这就是阻塞 当然写入的时候&#xff0c;如果发现缓冲区是满的&#xff0c;也需要等待刷新缓…...

【AI】高效地使用 AI 模型的 Prompt(提示词)

明确任务和目标 在使用 Prompt 之前&#xff0c;要清楚知道自己想要通过 AI 模型完成什么任务&#xff0c;例如生成文本、回答问题、进行翻译或创作故事等。明确的目标有助于构建更有针对性的 Prompt&#xff0c;引导模型生成符合期望的结果。 精准描述问题 提供具体细节&am…...

第二十:mysql——Undo Log、Redo Log和Binlog

二进制日志binlog&#xff08;归档日志&#xff09;、 事务日志redo log&#xff08;重做日志&#xff09; MySQL实例挂了或者宕机了&#xff0c;重启的时候InnoDB存储引擎会使用rede log日志恢复数据&#xff0c;保证事务的持久性和完整性 和undo log&#xff08;回滚日志&a…...

LogicFlow-前端流程图开发

LogicFlow-前端流程图开发 一、安装使用 1、安装logicflow 通过npm安装logicflow npm install logicflow/core --save# 插件包&#xff08;不使用插件时不需要引入&#xff09; npm install logicflow/extension --save2、创建实例 import LogicFlow from "logicflow/…...

第四讲:类与对象(下)

目录 1、再谈构造函数 1.1、构造函数体赋值 1.2、初始化列表 1.3、explicit关键字 2、static成员 3、友元 3.1、友元函数 3.2、友元类 4、内部类 5、匿名对象 6、拷贝对象时的优化&#xff08;了解&#xff09; 7、重新理解类与对象 8、日期类的实现 9、练习题 9…...

ReAct 框架 | 提示词工程(1)

ReAct 框架 1、什么是 ReAct 框架&#xff1f;2、基于 ReAct 框架的提示词3、结合 LangChain 框架使用4、总结 1、什么是 ReAct 框架&#xff1f; ReAct &#xff1a; Reasoning Acting &#xff0c;将推理与外部工具调用结合&#xff0c;通过交互式探索解决复杂问题。 优点…...

第一部分——Docker篇 第一章 Docker容器

关于系统的改造探索 开篇&#xff1a;系统改造的调研报告 第一部分——Docker篇 第一章 Docker容器 第二章 Docker安装 第三章 构建自定义镜像 第四章 搭建镜像仓库 第五章 容器编排 第六章 容器监控 文章目录 关于系统的改造探索第一部分——Docker篇 前言一、就是你了——…...

ubuntu,react的学习(1)

在此目录下&#xff0c;开启命令行 /home/kt/react 如下操作 tkt4028:~/react$ npm create vitelatest task-manager -- --template react Need to install the following packages: create-vite6.3.1 Ok to proceed? (y) y> npx > cva task-manager --template react…...

AR 赋能儿童娱乐:剧本杀与寻宝小程序搭建秘籍​

在科技飞速发展的当下&#xff0c;儿童娱乐领域正经历着一场创新变革。AR&#xff08;增强现实&#xff09;技术的融入&#xff0c;为儿童剧本杀与寻宝游戏带来了前所未有的沉浸式体验。通过搭建专属小程序&#xff0c;孩子们能够在虚拟与现实交织的世界中开启奇幻冒险。接下来…...

2017年-全国大学生数学建模竞赛(CUMCM)试题速浏、分类及浅析

2017年-全国大学生数学建模竞赛(CUMCM)试题速浏、分类及浅析 全国大学生数学建模竞赛(China Undergraduate Mathematical Contest in Modeling)是国家教委高教司和中国工业与应用数学学会共同主办的面向全国大学生的群众性科技活动,目的在于激励学生学习数学的积极性,提高学…...

密码学基础——分组密码的运行模式

前面的文章中文我们已经知道了分组密码是一种对称密钥密码体制&#xff0c;其工作原理可以概括为将明文消息分割成固定长度的分组&#xff0c;然后对每个分组分别进行加密处理。 下面介绍分组密码的运行模式 1.电码本模式&#xff08;ECB&#xff09; 2.密码分组链接模式&…...