css基本功
为什么 ::first-letter 是伪元素？
::first-letter 的作用是选择并样式化元素的第一个字母，它创建了一个虚拟的元素来包裹这个字母，因此属于伪元素。
grid布局
案例一
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>CSS Grid布局完全指南</title><style>.code-example {background: #f4f4f4;padding: 15px;margin: 10px 0;border-radius: 5px;}.grid-visual {border: 2px solid #333;margin: 20px 0;padding: 10px;}.grid-item {background: #4CAF50;padding: 20px;border: 2px solid #fff;text-align: center;color: white;}</style>
</head><body><section><h2>实战示例</h2><h3>基本网格布局</h3><div class="grid-visual" style="display: grid;grid-template-columns: repeat(3, 1fr);gap: 10px;"><div class="grid-item">1</div><div class="grid-item">2</div><div class="grid-item">3</div><div class="grid-item">4</div><div class="grid-item">5</div><div class="grid-item">6</div></div><h3>复杂布局</h3><div class="grid-visual" style="display: grid;grid-template-columns: 200px 1fr;grid-template-rows: 100px 1fr 50px;grid-template-areas:'header header'// 同样是header 的格子会自动合并'sidebar main''footer footer';height: 400px;gap: 15px;"><div class="grid-item" style="grid-area: header">Header</div><div class="grid-item" style="grid-area: sidebar">Sidebar</div><div class="grid-item" style="grid-area: main">Main Content</div><div class="grid-item" style="grid-area: footer">Footer</div></div></section>
</body></html>
案例二
<!DOCTYPE html>
<html><head><style>.container {display: grid;grid-template-columns: repeat(3, 100px);/* 3列，每列100px */grid-template-rows: repeat(3, 100px);/* 3行，每行100px */gap: 10px;background: #eee;padding: 20px;}.item {background: #4CAF50;border: 2px solid #333;padding: 20px;font-family: Arial;color: white;display: flex;align-items: center;justify-content: center;}</style>
</head><body><div class="container"><div class="item item1">Item 1</div><div class="item item2">Item 2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div><div class="item">6</div></div>
</body></html>
案例三
在案例二的基础上加上grid-area的效果，注意细品
<!DOCTYPE html>
<html><head><style>.container {display: grid;grid-template-columns: repeat(3, 100px);/* 3列，每列100px */grid-template-rows: repeat(3, 100px);/* 3行，每行100px */gap: 10px;background: #eee;padding: 20px;}.item {background: #4CAF50;border: 2px solid #333;padding: 20px;font-family: Arial;color: white;display: flex;align-items: center;justify-content: center;}.item1 {grid-column: 1 / 3;/* 列从第1线到第3线（占据第1、2列） *//* 列范围 */grid-row: 1 / 2;/* 行从第1线到第2线（占据第1行） *//* 行范围 */background: #2196F3;}.item2 {grid-area: 2 / 2 / 4 / 4; /* 行开始/列开始/行结束/列结束 *//* 简写语法 */background: #FF5722;}</style>
</head><body><div class="container"><div class="item item1">Item 1</div><div class="item item2">Item 2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div><div class="item">6</div></div>
</body></html>
案例四
注意grid-auto-flow: row dense;这行的作用
<!DOCTYPE html>
<html><head><style>.container {display: grid;grid-template-columns: repeat(2, 100px);/* 显式列：2列 */grid-template-rows: repeat(1, 50px);/* 显式行：1行 */grid-auto-columns: 100px;/* 隐式列宽度 */grid-auto-rows: 50px;/* 隐式行高度 */grid-auto-flow: row dense;/* 自动排列方式 */gap: 10px;background: #eee;padding: 20px;}.item {background: #4CAF50;padding: 20px;border: 2px solid #333;color: white;display: flex;align-items: center;justify-content: center;}/* 特殊项目样式 */.item.wide {grid-column: span 2;}/* 横跨2列 */.item.tall {grid-row: span 2;}/* 竖跨2行 */</style>
</head><body><div class="container"><div class="item">1</div><div class="item wide">2（跨2列）</div><div class="item">3</div><div class="item tall">4（跨2行）</div><div class="item">5</div><div class="item">6</div></div>
</body></html>
如果没有grid-auto-flow: row dense;，是以下效果
row dense填充了行的空白
相关文章：
css基本功
为什么 ::first-letter 是伪元素？ ::first-letter 的作用是选择并样式化元素的第一个字母，它创建了一个虚拟的元素来包裹这个字母，因此属于伪元素。 grid布局 案例一 <!DOCTYPE html> <html lang"zh-CN"><head&…...
信号处理抽取多项滤波的数学推导与仿真
昨天的《信号处理之插值、抽取与多项滤波》，已经介绍了插值抽取的多项滤率，今天详细介绍多项滤波的数学推导，并附上实战仿真代码。 一、数学变换推导 1. 多相分解的核心思想 将FIR滤波器的系数 h ( n ) h(n) h(n)按相位分组，每…...
C++双端队列知识点+习题
在C中，双端队列（Deque，发音为“deck”）是标准模板库（STL）中的一种容器适配器，其全称为Double-Ended Queue。它结合了队列和栈的特点，允许在容器的两端（前端和后端&#x…...
【递归、搜索和回溯算法】专题二 ：二叉树中的深搜
二叉树中的深搜 深度优先遍历（DFS）：一种沿着树或图的深度遍历节点的算法，尽可能深地搜索树或图的分支，如果一条路径上的所有结点都被遍历完毕，就会回溯到上一层，继续找一条路遍历。 在二叉树中…...
Vue3计算属性深度解析：经典场景与Vue2对比
一、计算属性的核心价值 计算属性（Computed Properties）是Vue响应式系统的核心特性之一，它通过依赖追踪和缓存机制优雅地解决模板中复杂逻辑的问题。当我们需要基于现有响应式数据进行派生计算时，计算属性总能保持高效的性能表现…...
UE5与U3D引擎对比分析
Unreal Engine 5（UE5）和Unity 3D（U3D）是两款主流的游戏引擎，适用于不同类型的项目开发。以下是它们的主要区别，分点整理： 1. 核心定位 UE5： 主打3A级高画质项目（如主机/P…...
【vue3学习笔记】（第150-151节）computed计算属性；watch监视ref定义的数据
尚硅谷Vue2.0Vue3.0全套教程丨vuejs从入门到精通 本篇内容对应课程第150-151节 课程 P150节 《computed计算属性》笔记 写一个简单的 姓、名输入框效果： 用vue2的形式定义一个计算属性 fullName： 测试页面展示无问题： 但是，在vue…...
JavaScript如何实现复制图片功能？
最近开发中遇到一个需求，就是用户希望能通过直接点击按钮复制图片，然后就可以很方便的把图片发送到班群中，于是就有了复制图片的需求。 那么如何通过JavaScript来实现复制图片呢？ 一、前置知识：如何实现复制…...
MySQL 8 设置允许远程连接（Windows环境）
🌟 MySQL 8 设置允许远程连接（Windows环境） 在开发和部署应用时，经常需要从远程主机连接到MySQL数据库。默认情况下，MySQL仅允许本地连接，因此需要进行一些配置才能允许远程访问。今天，我将详细…...
我又又又又又又更新了~~纯手工编写C++画图，有注释~~~
再再再次感谢Ttcofee提的问题 本次更新内容： 鼠标图案（切换），版本号获取，输入框复制剪切板 提前申明：如果运行不了，请到主页查看RedpandaDevc下载，若还是不行就卸了重装。 版本号&…...
Python控制语句——循环语句-for
1.下面的语句哪个会无限循环下去（）。 A、 for a in range(10): time.sleep(10) B、 while 1<10: time.sleep(10) C、 while True: break D、 a = [3,-1,2] for i in a: if i==-1: break 答案:B。1<10始终为True，循环体中又没有break的条件，故B会无限循环。 2.for s i…...
全面解析：将采购入库单数据集成到MySQL的技术实施
旺店通旗舰版-采购入库单集成到MySQL的技术案例分享 在数据驱动的业务环境中，如何高效、准确地实现系统间的数据对接是企业面临的重要挑战。本文将聚焦于一个具体的系统对接集成案例：将旺店通旗舰奇门平台上的采购入库单数据集成到MySQL数据库中&#x…...
12. Pandas ：使用pandas读Excel文件的常用方法
一 read_excel 函数 其他参数根据实际需要进行查找。 1.接受一个工作表 在 11 案例用到的 Excel 工作簿中，数据是从第一张工作表的 A1 单元格开始的。但在实际场景中， Excel 文件可能并没有这么规整。所以 panda 提供了一些参数来优化读取过程。 比如 s…...
记录致远OA服务器硬盘升级过程
前言 日常使用中OA系统突然卡死，刷新访问进不去系统，ping服务器地址正常，立马登录服务器检查，一看磁盘爆了。 我大脑直接萎缩了，谁家OA系统配400G的空间啊，过我手的服务器没有50也是30台，还是…...
Java网络多线程
网络相关概念: 关于访问: IP端口 因为一个主机上可能有多个服务, 一个服务监听一个端口,当你访问的时候主机通过端口号就能知道要和哪个端口发生通讯.因此一个主机上不能有两个及以上的服务监听同一个端口. 协议简单来说就是数据的组织形式 好像是两个人交流一样,要保证自己说…...
【H2O2 | 软件开发】Axios发送Http请求
目录 前言 开篇语 准备工作 正文 概念 封装工具包 示例 结束语 前言 开篇语 本系列为短篇，每次讲述少量知识点，无需一次性灌输太多的新知识点。该主题文章主要是围绕前端、全栈开发相关面试常见问题撰写的，希望对诸位有所帮助。 如…...
VScode 运行LVGL
下载vscode解压 环境安装 安装mingw64，gcc 版本必须8.3以上 安装cmak 系统环境变量Path中添加（以实际安装目录为准） C:\Program Files\mingw64\bin C:\Program Files\CMake\bin 将GUI-Guider生成的代码目录拷贝一份放到vscode项目目录…...
AIP-165 按条件删除
编号165原文链接https://google.aip.dev/165状态批准创建日期2019-12-18更新日期2019-12-18 有时API需要提供一种机制，按照一些过滤参数删除大量资源，而非提供待删除的各资源名字。 这是一个稀有的场景，用于用户一次性删除数千或更多资源的…...
React Next项目中导入Echart世界航线图 并配置中文
公司业务要求做世界航线图，跑了三个ai未果，主要是引入world.json失败，echart包中并不携带该文件，源码的world.json文件页面404找不到。需要自己寻找。这是整个问题卡壳的关键点，特此贴出资源网址。 目录 一、安装 二…...
QT与网页显示数据公式的方法
一.网页中显示数学公式通常有三种主要方法 1.图片方式 原理：将公式转换为图片（如 PNG、SVG），通过 <img> 标签嵌入网页。 实现步骤： 使用工具（如 LaTeX dvipng、在线生成工具）将公式渲…...
深入解析APP订阅页的运作机制（订阅页如何运作）
在当今数字经济的背景下，订阅模式已成为许多企业获取稳定收入的重要方式。无论是软件、视频流媒体还是电子商务，订阅服务都能为用户提供持续的价值体验。然而，如何有效地设计和运作一个订阅页，是决定用户是否愿意订阅的关键因素。…...
Golang倒腾一款简配的具有请求排队功能的并发受限服务器
golang官方指南[1]给了一些代码片段，层层递进演示了信道的能力: 1>. 信号量2>. 限流能力 var sem make(chan int, MaxOutstanding) func Serve(queue chan *Request) {for req : range queue {req: reqsem <- 1 go func() { // 只会开启MaxOutstandin…...
【运维】服务器系统从centos7重装为ubuntu22.04
目录 一、硬盘准备二、系统安装三、安装基本系统组件四、挂载机械硬盘五、问题解决 一、硬盘准备 【注意：这一步会把硬盘的数据清空，所以需要找一个空的U盘或者把U盘数据备份】 ubuntu22.04下载 需要先安装 bittorrent 下载完之后会打开一个网页 然后…...
创新技术引领软件供应链安全，助力数字中国建设
编者按 随着数字化转型的加速，针对软件供应链的攻击事件呈快速增长态势，目前已成为网络空间安全的焦点。如何将安全嵌入到软件开发到运营的全流程，实现防护技术的自动化、一体化、智能化，成为技术领域追逐的热点。 悬镜安全作为…...
【设计模式】建造者模式——工厂模式
三、建造者模式——工厂模式 3.1 工厂模式 创建一个类对象的传统方式是使用关键字new, 因为用new 创建的类对象是一个堆对象，可以实现多态。工厂模式通过把创建对象的代码包装起来，实现创建对象的代码与具体 的业务逻辑代码相隔离的目的(将对象的创建和…...
Java基础：枚举类enum入门案例
1.基础枚举定义与使用： package com.zxy;public class Main {public static void main(String[] args) { // 获取枚举值cars car cars.BMW;switch (car){case BMW :System.out.println("BMW");break;case BENZ :System.out.println("BENZ&…...
蓝桥备赛（18）- 红黑树和 set 与 map（上）
对于二叉搜索树 ， 平衡二叉树 ， 以及红黑树 ， 目前只需要了解背后的原理 ， 不做代码实现的要求 ， 重要的就是了解各种操作的时间复杂度即可 ， 为set 与 map 做铺垫 一、二叉搜索树 1.1 基本概念 相较与于堆…...
Spring Boot集成EasyExcel
1. 初始化Spring Boot项目 首先，使用Spring Initializr（https://start.spring.io/）生成一个基本的Spring Boot项目。选择以下依赖项： Spring WebLombok (用于减少样板代码)SLF4J (用于日志记录) 2. 添加依赖 在你的pom.xml文件…...
obeaver 连接oracle 库 模式乱码
下载orai18n-12.1.0.2.0.jar 库--添加文件--把提前下载好的jar 随便放在一个文件夹下--添加文件选中，然后点击找到类， 选择类，确定即可正常 下载地址：https://download.csdn.net/download/weixin_42845364/88368302...
ChatGPT 使用教程：深度探索AI常用功能技巧
文章目录 前言一、ChatGPT介绍1.1 人工智能与自然语言处理的发展1.2 ChatGPT 的诞生与意义 二、ChatGPT 基础入门2.1 注册与登录2.2 对话界面介绍2.3 基本提问方式 三、常用功能详解3.1 文本生成3.2 问题回答3.3 语言翻译3.4 代码生成与调试 四、高级使用技巧4.1 指令优化4.2 多…...