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

CSS SEO、网页布局、媒体查询

news 来源：原创 2025/7/22 17:50:04

一、SEO 头部三大标签

1. Title 标签（标题）

核心作用

优化规范

示例

2. Meta Description（描述）

核心作用

优化规范

示例

3. Viewport 标签（视口）

核心作用

优化规范

4. 完整 SEO 头部模板

二、Favicon 图标设置

1. 基础配置

2. 多尺寸适配（现代浏览器）

网页布局

一、网页布局核心模块

二、HTML5 语义化结构

三、CSS 布局技术对比与选择

四、Flexbox 实现经典布局

1. 导航菜单水平居中

2. 主内容区与侧边栏并排

五、CSS Grid 实现响应式布局

1. 定义网格容器

2. 页脚自动贴底（Sticky Footer）

六、响应式设计关键技巧

1. 媒体查询（Media Queries）

2. 图片自适应

七、常见问题与解决方案

1. 垂直居中

2. 等高列

3. 清除浮动（Legacy）

媒体查询

一、媒体查询是什么？

二、媒体查询语法

1. 基础语法

2. 组成部分

3. 媒体特性全表

4. 逻辑运算符组合条件

三、核心应用场景

1. 响应式断点（Breakpoints）

2. 设备方向适配

3. 高分辨率屏幕适配（Retina）

4. 打印样式优化

四、媒体查询顺序

1. CSS 的层叠规则

2. 错误顺序示例

3. 正确顺序原则

移动优先（推荐）

桌面优先（不推荐）

一、SEO 头部三大标签

SEO（Search Engine Optimization）是指通过技术优化和内容策略，提升网站在搜索引擎（如 Google、Bing）中的自然（非付费）排名，从而获取更多流量的过程。

标签	作用	优化要点	示例代码
Title 标签	定义网页标题，直接影响搜索排名	精准、简洁、含关键词	`<title>网页标题｜品牌名 - 核心关键词</title>`
Meta Description	描述网页内容，影响点击率	吸引点击、自然包含关键词	`<meta name="description" content="这里是网页的详细描述，约150字符">`
Viewport 标签	移动端适配，影响移动搜索排名	确保移动端友好	`<meta name="viewport" content="width=device-width, initial-scale=1.0">`

1. Title 标签（标题）

核心作用

搜索引擎权重最高：直接影响关键词排名。
用户点击决策：显示在搜索结果中，决定用户是否点击。

优化规范

长度控制：不超过 60 字符（避免被截断）。
关键词前置：核心关键词放在标题前部。
分隔符统一：使用 ｜ 或 -，避免特殊符号。
避免堆砌：自然融入 1-2 个核心关键词。

示例

<!-- 正确 -->
<title>CSS 教程｜前端开发 - 零基础学习 Web 技术</title><!-- 错误（堆砌关键词） -->
<title>CSS 教程, CSS 入门, CSS 学习, CSS 代码</title>

2. Meta Description（描述）

核心作用

不直接影响排名，但影响搜索结果的点击率（CTR）。
补充说明标题未覆盖的细节。

优化规范

长度控制：150-160 字符（超出部分会被隐藏）。
自然流畅：写成完整的句子，包含核心关键词。
行动号召：如“立即学习”、“免费下载”等提升点击欲望。
唯一性：每个页面的描述不同。

示例

<meta name="description" content="从零开始学习 CSS 技术，掌握网页布局、样式设计等实战技能。提供免费教程、代码示例及在线练习，助你快速成为前端开发者。">

3. Viewport 标签（视口）

核心作用

移动优先索引：Google 等搜索引擎优先索引移动版页面。
用户体验优化：确保移动端布局正确，避免缩放问题。

优化规范

必须包含：width=device-width, initial-scale=1.0。

禁止限制缩放（除非必要）：

<!-- 不推荐（可能影响无障碍访问） -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

4. 完整 SEO 头部模板

<!DOCTYPE html>
<html lang="zh-CN">  <!-- 指定语言 -->
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>核心关键词 - 副标题｜品牌名</title><meta name="description" content="自然流畅的网页描述，包含核心关键词。"><!-- 其他 SEO 增强标签 --><link rel="canonical" href="https://yourdomain.com/page-url">  <!-- 规范链接 --><meta name="robots" content="index, follow">  <!-- 控制爬虫行为 -->
</head>
<body><!-- 页面内容 -->
</body>
</html>

二、Favicon 图标设置

Favicon 是显示在浏览器标签页和书签中的小图标。

1. 基础配置

<link rel="icon" href="favicon.ico" type="image/x-icon">

格式兼容：.ico 格式兼容性最佳。
位置：通常放在网站根目录，无需指定路径。

2. 多尺寸适配（现代浏览器）

<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

推荐尺寸：
- 32x32（标准标签页）
- 180x180（iOS 主屏图标）
- 192x192（Android Chrome）

网页布局

一、网页布局核心模块

典型的网页布局包含以下模块，按从上到下顺序排列：

模块	描述	常用标签
页眉	网站标识、导航菜单	`<header>`、`<nav>`
主内容区	核心信息展示，可能包含侧边栏	`<main>`、`<article>`
侧边栏	辅助内容（广告、链接等）	`<aside>`
页脚	版权信息、联系方式	`<footer>`

二、HTML5 语义化结构

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>网页标题</title><link rel="stylesheet" href="styles.css">
</head>
<body><!-- 页眉 --><header class="header"><h1 class="logo">LOGO</h1><nav class="nav"><ul class="nav-list"><li><a href="#">首页</a></li><li><a href="#">产品</a></li><li><a href="#">关于</a></li></ul></nav></header><!-- 主内容区 --><main class="main-content"><!-- 主体文章 --><article class="article"><h2>文章标题</h2><p>文章内容...</p></article><!-- 侧边栏 --><aside class="sidebar"><section class="widget"><h3>相关链接</h3><ul><li><a href="#">链接1</a></li><li><a href="#">链接2</a></li></ul></section></aside></main><!-- 页脚 --><footer class="footer"><p>&copy; 2024 公司名称. 版权所有.</p></footer>
</body>
</html>

三、CSS 布局技术对比与选择

技术	适用场景	优点	缺点
Flexbox	一维布局（单行/列）	灵活对齐、间距控制简单	复杂多列布局较难
CSS Grid	二维布局（行列组合）	精准控制行列、响应式友好	学习曲线稍高
Float	传统文字环绕布局	兼容性好	清除浮动麻烦、布局不够灵活
定位布局	元素叠加或固定位置	精准定位	不适合主体结构布局

四、Flexbox 实现经典布局

1. 导航菜单水平居中

.nav {display: flex;justify-content: center; /* 水平居中 */gap: 20px; /* 间距 */
}

2. 主内容区与侧边栏并排

.main-content {display: flex;gap: 30px; /* 间距 */
}.article {flex: 1; /* 占据剩余空间 */
}.sidebar {flex: 0 0 300px; /* 固定宽度 */
}

五、CSS Grid 实现响应式布局

1. 定义网格容器

.main-content {display: grid;grid-template-columns: 1fr 300px; /* 主内容区 + 侧边栏 */gap: 30px;
}/* 移动端：侧边栏下移 */
@media (max-width: 768px) {.main-content {grid-template-columns: 1fr;}
}

2. 页脚自动贴底（Sticky Footer）

body {min-height: 100vh;display: grid;grid-template-rows: auto 1fr auto; /* 页头、内容、页脚 */
}

六、响应式设计关键技巧

1. 媒体查询（Media Queries）

/* 平板设备 */
@media (max-width: 1024px) {.nav-list {flex-direction: column;}
}/* 手机设备 */
@media (max-width: 480px) {.logo {font-size: 1.2rem;}
}

2. 图片自适应

img {max-width: 100%; /* 防止溢出 */height: auto; /* 保持比例 */
}

七、常见问题与解决方案

1. 垂直居中

/* Flexbox 方案 */
.container {display: flex;align-items: center;justify-content: center;
}/* Grid 方案 */
.container {display: grid;place-items: center;
}

2. 等高列

/* Flexbox 自动等高 */
.container {display: flex;
}/* Grid 自动等高 */
.container {display: grid;grid-auto-rows: 1fr;
}

3. 清除浮动（Legacy）

.clearfix::after {content: "";display: table;clear: both;
}

媒体查询

一、媒体查询是什么？

媒体查询是 CSS3 的核心功能，允许根据 设备特性（如屏幕宽度、分辨率、设备方向等）动态调整页面样式，实现响应式设计（Responsive Design）。

二、媒体查询语法

1. 基础语法

@media [媒体类型] and (媒体特性条件) {/* 满足条件时应用的 CSS 规则 */
}

2. 组成部分

组件	描述	示例值
媒体类型	指定设备类型（可选）	`screen`（屏幕）、`print`（打印）
媒体特性	检测设备特性（如宽度、分辨率、方向）	`max-width`、`orientation`
逻辑运算符	组合多个条件（`and`、`,`、`not`、`only`）	`(min-width: 768px) and (max-width: 1024px)`

3. 媒体特性全表

特性	描述	示例值
`width`/`min-width`/`max-width`	视口宽度	`(min-width: 768px)`
`height`/`min-height`/`max-height`	视口高度	`(max-height: 600px)`
`orientation`	设备方向（`portrait`/`landscape`）	`(orientation: landscape)`
`aspect-ratio`	视口宽高比	`(aspect-ratio: 16/9)`
`resolution`	屏幕分辨率（dpi/dppx）	`(min-resolution: 2dppx)`
`hover`	是否支持悬停（`hover`/`none`）	`(hover: hover)`

4. 逻辑运算符组合条件

and：同时满足多个条件

@media (min-width: 768px) and (max-width: 1024px) { ... }

,：满足任一条件即可（类似逻辑或）

@media (max-width: 480px), (orientation: portrait) { ... }

not：排除条件

@media not (orientation: landscape) { ... }

三、核心应用场景

1. 响应式断点（Breakpoints）

根据屏幕宽度适配布局（常用断点参考）：

/* 手机竖屏 */
@media (max-width: 480px) { .container { padding: 10px; }
}/* 平板/大手机 */
@media (min-width: 481px) and (max-width: 768px) {.container { padding: 20px; }
}/* 桌面 */
@media (min-width: 769px) {.container { padding: 30px; }
}

2. 设备方向适配

/* 横屏设备 */
@media (orientation: landscape) {.header { height: 60px; }
}/* 竖屏设备 */
@media (orientation: portrait) {.header { height: 100px; }
}

3. 高分辨率屏幕适配（Retina）

/* 2倍及以上分辨率设备 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {.logo { background-image: url("logo@2x.png"); }
}

4. 打印样式优化

@media print {.nav, .ads { display: none; }  /* 隐藏导航和广告 */body { font-size: 12pt; }      /* 调整字体大小 */
}

四、媒体查询顺序

媒体查询必须严格遵循顺序的原因：

1. CSS 的层叠规则

当多个媒体查询针对同一元素且条件重叠时，后定义的样式会覆盖先定义的样式（假设选择器优先级相同）。如果媒体查询顺序错误，会导致样式覆盖逻辑混乱。

2. 错误顺序示例

/* ❌ 错误：先定义大屏幕，后定义小屏幕 */
@media (min-width: 768px) {.box { width: 50%; }
}@media (min-width: 576px) {.box { width: 100%; }
}

当屏幕宽度为 800px（同时满足 ≥576px 和 ≥768px）时，.box 的宽度会是 100%（后定义的媒体查询覆盖前者），显然不符合预期。

3. 正确顺序原则

必须按 断点范围从小到大（移动优先） 或 从大到小（桌面优先） 的顺序编写媒体查询，确保条件范围不重叠或正确覆盖。

移动优先（推荐）

原则：先编写移动端样式，再通过 min-width 逐步增强大屏体验。

/* 小屏幕（默认） */
.box { width: 100%; }/* 中屏幕（≥576px） */
@media (min-width: 576px) {.box { width: 50%; }
}/* 大屏幕（≥768px） */
@media (min-width: 768px) {.box { width: 25%; }
}

桌面优先（不推荐）

/* 大屏幕（默认） */
.box { width: 25%; }/* 中屏幕（<768px） */
@media (max-width: 767px) {.box { width: 50%; }
}/* 小屏幕（<576px） */
@media (max-width: 575px) {.box { width: 100%; }
}

CSS SEO、网页布局、媒体查询

目录一、SEO 头部三大标签 1. Title 标签（标题） 核心作用优化规范示例 2. Meta Description（描述） 核心作用优化规范示例 3. Viewport 标签（视口） 核心作用优化规范 4. 完整 SEO 头部模…...

编程日记 2025/7/22 17:50:04

SolidJS 深度解析：高性能响应式前端框架

SolidJS 是一个新兴的响应式前端框架，以其极致的性能、简洁的语法和接近原生 JavaScript 的开发体验而闻名。它结合了 React 的声明式 UI 和 Svelte 的编译时优化，同时采用细粒度响应式更新，避免了虚拟 DOM（Virtual DOM&#xff0…...

编程日记 2025/7/20 18:10:23

基于Spring Boot + Vue的银行管理系统设计与实现

基于Spring Boot Vue的银行管理系统设计与实现一、引言随着金融数字化进程加速，传统银行业务向线上化转型成为必然趋势。本文设计并实现了一套基于Spring Boot Vue的银行管理系统，通过模块化架构满足用户、银行职员、管理员三类角色的核心业务需求…...

编程日记 2025/7/22 2:13:14

解决 Ubuntu/Debian 中 `apt-get` 报错 “无法获得锁 /var/lib/dpkg/lock“

问题描述在 Ubuntu/Debian 系统中运行 sudo apt-get install 或 sudo apt update 时，遇到以下错误： E: 无法获得锁 /var/lib/dpkg/lock - open (11: 资源暂时不可用) E: 无法锁定管理目录(/var/lib/dpkg/)，是否有其他进程正占用它&#…...

编程日记 2025/7/22 6:18:56

OpenGL 着色器

一、‌着色器基础结构‌ ‌版本声明与入口函数‌ ‌首行版本声明‌：必须指定 GLSL 版本和模式（如 #version 450 core）‌。 #version 450 core // 声明使用 OpenGL 4.5 Core Profile ‌入口函数‌：所有着色器的入口均为 main() 函…...

编程日记 2025/7/17 11:21:30

代码随想录刷题day53|（二叉树篇）105.从前序与中序遍历序列构造二叉树（▲

目录一、二叉树基础知识二、构造二叉树思路 2.1 构造二叉树流程（先序中序 2.2 递归思路三、相关算法题目四、易错点一、二叉树基础知识详见：代码随想录刷题day34|（二叉树篇）二叉树的递归遍历-CSDN博客二、构造二叉…...

编程日记 2025/7/22 17:34:04

【leetcode刷题日记】lc.560-和为 K 的子数组

目录 1.题目 2.代码 1.题目给你一个整数数组 nums 和一个整数 k ，请你统计并返回该数组中和为 k 的子数组的个数。子数组是数组中元素的连续非空序列。示例 1： 输入：nums [1,1,1], k 2 输出：2示例 2： 输入…...

编程日记 2025/7/22 2:21:51

计算机期刊推荐 | 计算机-人工智能、信息系统、理论和算法、软件工程、网络系统、图形学和多媒体, 工程技术-制造, 数学-数学跨学科应用

Computers, Materials & Continua 学科领域： 计算机-人工智能、信息系统、理论和算法、软件工程、网络系统、图形学和多媒体, 工程技术-制造, 数学-数学跨学科应用期刊类型： SCI/SSCI/AHCI 收录数据库： SCI(SCIE),EI,Scopus,知网(CNK…...

编程日记 2025/7/22 17:48:45

K8S安装及部署calico（亲测有用[特殊字符]）

一、基础部署（三台均部署） 1. 关闭防火墙并修改网络为aliyun 要保证网络可以使用，可以将DNS的指向修改为114.114.114.114和8.8.8.8这两个。 systemctl stop firewalld && systemctl disable firewalld sed -i s/enforcing/disabl…...

编程日记 2025/7/22 17:39:35

etcd性能测试

etcd性能测试本文参考官方文档完成etcd性能测试，提供etcd官方推荐的性能测试方案。 1. 理解性能：延迟与吞吐量 etcd 提供稳定、持续的高性能。有两个因素决定性能：延迟和吞吐量。延迟是完成一项操作所花费的时间。吞吐量是在某个时间段内…...

编程日记 2025/7/17 12:11:12

在shell脚本内部获取该脚本所在目录的绝对路径

目录需求描述方法一：使用 dirname 和 readlink 命令方法二：使用 BASH_SOURCE 变量方法三：仅使用纯 Bash 实现需求描述工作中经常有这样情况，需要在脚本内部获取该脚本自己所在目录的绝对路径。假如有一个脚本/a/b/c/…...

编程日记 2025/7/15 1:34:43

JavaEE企业级开发延迟双删+版本号机制(乐观锁) 事务保证redis和mysql的数据一致性示例

提醒要求了解或者熟练掌握以下知识点 spring 事务mysql 脏读如何保证缓存和数据库数据一致性延迟双删分布式锁并发编程原子操作类前言在起草这篇博客之前我做了点功课这边我写的是一个示例代码数据层都写成了 mock 的形式(来源于 JUnit5) // Dduo import java.u…...

编程日记 2025/7/22 17:50:03

SCI一区 | Matlab实现DBO-TCN-LSTM-Attention多变量时间序列预测

SCI一区 | Matlab实现DBO-TCN-LSTM-Attention多变量时间序列预测目录 SCI一区 | Matlab实现DBO-TCN-LSTM-Attention多变量时间序列预测预测效果基本介绍程序设计参考资料预测效果基本介绍 1.【SCI一区级】Matlab实现DBO-TCN-LSTM-Attention多变量时间序列预测（程…...

编程日记 2025/7/21 21:27:16

【Python】天气数据可视化

1. Python进行数据可视化在数据分析和科学计算领域，Python凭借其强大的库和简洁的语法，成为了众多开发者和科研人员的首选工具。数据可视化作为数据分析的重要环节，能够帮助我们更直观地理解数据背后的规律和趋势。本文将详细介绍如何使用P…...

编程日记 2025/7/22 12:41:10

c#的.Net Framework 的console 项目找不到System.Window.Forms 引用

首先确保是建立的.Net Framework 的console 项目,然后天健reference 应用找不到System.Windows.Forms 引用打开对应的csproj 文件在第一个PropertyGroup下添加 <UseWindowsForms>true</UseWindowsForms> 然后在第一个ItemGroup 下添加 <Reference Incl…...

编程日记 2025/7/16 23:09:33

Ubuntu 重置密码方法

目录修改过 root 密码，重置密码的方法没改过 root 密码‌，重置密码的方法修改过 root 密码，重置密码的方法 Ubuntu 默认禁用root用户，意思就是安装好Ubuntu系统后，root用户默认是没有密码的，普通用户通过…...

编程日记 2025/7/22 17:32:50

电机控制常见面试问题（二十）

文章目录一.整流电路绕组接法二.电机为什么需要转速器三.电机转矩产生原理四.电机控制中载波频率大小的确定五.开关周期 Tpwm 一.整流电路绕组接法为了引出直流的输出，一定要在整流变压器的二次侧引出零线，所以二次侧绕组必须接成星形一次绕组必须要…...

编程日记 2025/7/22 15:17:47

Linux系统之yum本地仓库创建

目录一.Linux软件安装 1.Rpm包安装 2.yum本地仓库安装二.yum本地仓库建立三.编译一.Linux软件安装软件安装共2种安装方式，通过rpm包安装或通过yum仓库库安装。先下载安装包命令的方式去安装软件包安装结束得到一个可以执行程序绝对路径下的程序 1.…...

编程日记 2025/7/22 12:44:03

未来技术的发展趋势与影响分析

区块链技术在版权中的应用越来越受到关注。它的基本原理是通过分布式账本将每一份作品的版权信息储存起来，确保这些信息不可篡改、不可删除。这就意味着，当创作者发布作品时，可以在区块链上登记相关信息。这样，任何人都能验证版权…...

编程日记 2025/7/19 18:33:08

ROS2 架构梳理汇总整理

文章目录前言正文机器人平台整体架构（ROS2）图一、个人理解整体架构 ROS2架构图一、个人理解ROS2整体架构图二、开发者整理ROS2整体架构图三、Intel整理ROS2整体架构图四、DDS具体架构说明 ROS2 Control架构图一、官方整整理ROS2 Control整体架构总结前…...

编程日记 2025/7/16 23:09:33

蓝桥杯算法精讲：二分查找实战与变种解析

适合人群：蓝桥杯备考生 | 算法竞赛入门者 | 二分查找进阶学习者目录一、二分查找核心要点 1. 算法思想 2. 适用条件 3. 算法模板二、蓝桥杯真题实战例题：分巧克力（蓝桥杯2017省赛） 三、二分查找变种与技巧 1. 查找左边…...

编程日记 2025/7/15 8:46:47

多层感知机实现

激活函数非线性 ReLU函数修正线性单元 rectified linear unit relu(x)max(0,x) relu的导数： sigmoid函数 s i g m o i d ( x ) 1 1 e − x sigmoid(x)\frac{1}{1e^{-x}} sigmoid(x)1e−x1 是一个早期的激活函数缺点是： 幂运算相对耗时&…...

编程日记 2025/7/22 6:35:10

Linux进程控制--进程创建 | 进程终止 | 进程等待 | 进程替换

1.进程创建现阶段我们知道进程创建有如下两种方式，起始包括在以后的学习中有两种方式也是最常见的： 1、命令行启动命令(程序、指令)。 2、通过程序自身，使用fork函数创建的子进程。 1.1 fork函数在linux操作系统中，fork函数是…...

编程日记 2025/7/16 15:26:00

Linux 网络编程（二）——套接字编程简介

文章目录 2 Socket 套接字 2.1 什么是 Socket 2.2 Socket编程的基本操作 2.3 地址信息的表示 2.4 网络字节序和主机字节序的转换 2.4.1 字节序转换 2.4.2 网络地址初始化与分配 2.5 INADDR_ANY 2.6 Socket 编程相关函数 2.7 C标准中的 main 函数声明 2.8 套接字应用…...

编程日记 2025/7/19 20:31:15

串行通信与并行通信对比

总目录一、并行通信 1. 定义与核心特点 1） 定义并行通信是指通过多条数据线同时传输一组数据的各个位（如8位、16位或更多），以字节或字为单位进行数据交换的通信方式。 2）核心特点特点描述传输速度快多位同时传…...

编程日记 2025/7/16 17:57:08

基于springboot+vue的北部湾地区助农平台

开发语言：Java框架：springbootJDK版本：JDK1.8服务器：tomcat7数据库：mysql 5.7（一定要5.7版本）数据库工具：Navicat11开发软件：eclipse/myeclipse/ideaMaven包：…...

编程日记 2025/7/21 14:30:31

Docker技术系列文章，第七篇——Docker 在 CI/CD 中的应用

在当今快速发展的软件开发领域，持续集成与持续部署（CI/CD）已经成为提高软件交付效率和质量的关键实践。而 Docker 作为一种流行的容器化技术，为 CI/CD 流程提供了强大的支持。通过将应用及其依赖项打包成容器，Docker 确…...

编程日记 2025/7/13 23:49:42

Hive SQL中 ?+.+ 的用法，字段剔除

一、含义 ?. 的用法代表剔除表中的特定字段，建议按照字段顺序列出以确保正确性。二、参数设置 -- 首先需要设置一个参数： set hive.support.quoted.identifiersNone; --然后指定要剔除哪个字段 select (dateline)?. from test.dm_user_add三、举例…...

编程日记 2025/7/19 10:34:00

Vue学习笔记集--pnpm包管理器

pnpm包管理器官网： https://www.pnpm.cn/ pnpm简介 pnpm全称是performant npm，意思为“高性能的npm”，它通过硬链接和符号链接共享依赖，提升安装速度并减少存储占用。功能特点节省磁盘空间：依赖包被存放在一个统…...

编程日记 2025/7/15 19:35:36

游戏交易系统设计与实现(代码+数据库+LW)

摘要在如今社会上，关于信息上面的处理，没有任何一个企业或者个人会忽视，如何让信息急速传递，并且归档储存查询，采用之前的纸张记录模式已经不符合当前使用要求了。所以，对游戏交易信息管理的提升&#x…...

编程日记 2025/7/19 17:05:40

为什么视频文件需要压缩？怎样压缩视频体积即小又清晰？

在日常生活中，无论是为了节省存储空间、便于分享还是提升上传速度，我们常常会遇到需要压缩视频的情况。本文将介绍为什么视频需要压缩，压缩视频的好处与坏处，并教你如何使用简鹿视频格式转换器轻松完成MP4视频文件的压缩。为什么…...

编程日记 2025/7/16 14:02:04

腾讯pcg客户端一面

Java 基本引用类型常见异常以及怎么处理所有类的父类是什么，有哪些常用方法常用线程池有哪些线程池的创建参数如何实现线程同步常用锁有哪些 Lock和reentrantlock有什么不一样 Reentrantlock要手动释放锁吗数据结构数组和链表的区别队列和栈的区别为什么…...

编程日记 2025/7/21 6:33:31

解决vscode终端和本地终端python版本不一致的问题

🌿 问题描述本地终端： vscode终端： 别被这个给骗了，继续往下看： 难怪我导入一些包的时候老提示找不到，在本地终端就不会这样，于是我严重怀疑vscode中的python版本和终端不一样&#xff0c…...

编程日记 2025/7/21 7:17:54

常见几种网络攻击防御方式

xss跨站脚本攻击反射型 XSS（Reflected XSS）： 恶意脚本是通过 URL 参数或者表单提交直接传递给服务器的，并且立即在响应页面中反射返回给用户。假设有一个登录页面，用户可以通过 URL 参数传递一个消息： &…...

编程日记 2025/7/16 4:31:22

操作系统之输入输出

🧑 博主简介：CSDN博客专家，历代文学网（PC端可以访问：https://literature.sinhy.com/#/literature?__c1000，移动端可微信小程序搜索“历代文学”）总架构师，15年工作经验，…...

编程日记 2025/7/15 14:10:21

TCP/IP的网络连接设备

TCP/IP层物理层网卡、集线器、中继器数据链路层网桥、交换机网络层路由器传输层网关应用层 1.网桥：网桥主要功能是将一个网络的数据沿通信线路复制到另一个网络中去，可以有效的连接两个局域网 2.网关：网关又称协议转换器，是将两…...

编程日记 2025/7/15 22:12:30

feign客户端PostMapping("/website/checkChooseColumn") boolean checkChooseColumn(RequestParam("chooseColumn") String chooseColumn);服务端 PostMapping("/checkChooseColumn") public boolean checkChooseColumn(RequestParam("cho…...

编程日记 2025/7/15 20:05:08

【大模型基础_毛玉仁】4.3 参数选择方法

目录 4.3 参数选择方法4.3.1 基于规则的方法4.3.2 基于学习的方法1）公式：2）Child-tuning 的两种变体模型3）Child-tuning总结 4.3 参数选择方法参数选择方法: 对预训练模型中部分参数微调，不添加额外参数以避免推理时…...

编程日记 2025/7/11 9:02:26

企业级Linux服务器初始化优化全流程

实战指南：企业级Linux服务器初始化优化全流程本文基于某电商平台百万级并发服务器的真实调优案例整理，所有操作均在Rocky Linux8.5验证通过，不同发行版请注意命令差异一、服务器安全加固（Situation-Task-Action-Result&#xff…...

编程日记 2025/7/22 11:14:52

亿级分布式系统架构演进实战（十一）- 垂直拆分（服务治理体系、安全架构升级）

亿级分布式系统架构演进实战（一）- 总体概要亿级分布式系统架构演进实战（二）- 横向扩展（服务无状态化） 亿级分布式系统架构演进实战（三）- 横向扩展（数据库读写分离&#…...

编程日记 2025/7/17 18:04:36

飞速（FS）InfiniBand解决方案助力领先科技公司网络升级

国家：越南行业：信息技术网络类型：InfiniBand网络方案类型：HPC网络案例亮点通过真实使用场景的全面测试，确保出色兼容性和高可用性，显著降低部署风险和运营成本。借助飞速（FS&#xf…...

编程日记 2025/7/17 13:39:02

[Qt5] QMetaObject::invokeMethod使用

📢博客主页：https://loewen.blog.csdn.net📢欢迎点赞 👍 收藏 ⭐留言 📝 如有错误敬请指正！📢本文由丶布布原创，首发于 CSDN，转载注明出处🙉📢现…...

编程日记 2025/7/21 14:30:31

深入理解垃圾收集算法：从分代理论到经典回收策略

垃圾收集（Garbage Collection, GC）是现代虚拟机自动内存管理的核心机制。它不仅能自动回收不再使用的对象，还能极大减轻开发者在内存管理上的负担。本文将详细讲解垃圾收集算法的基本思想、分代收集理论以及几种经典的垃圾收集算法。注&…...

编程日记 2025/7/21 1:13:42

数据降维——PCA与LDA

特征选择和特征提取特征选择和特征提取是数据降维的重要步骤。 1. 定义与目标特征提取： 目标：通过变换（如投影、编码）将原始高维特征映射到新的低维空间，新特征是原始特征的组合（线性或非线性&#xff…...

编程日记 2025/7/18 1:38:26

机器学习中的 K-均值聚类算法及其优缺点

K-均值聚类是一种常用的无监督学习算法，用于将数据集中的样本分为 K 个簇。其工作原理是通过迭代优化来确定簇的中心点，实现样本的聚类。算法步骤如下： 随机选择 K 个样本作为初始簇中心。根据每个样本和簇中心的距离将样本归类到最近的簇…...

编程日记 2025/7/9 8:07:56

RAID原理

一、RAID 0 原理核心特点条带化（Striping）：数据被分割成块（Block），交替写入多个磁盘（至少2块）。无冗余：不提供数据备份或校验，依赖所有磁盘同…...

编程日记 2025/7/22 6:22:59

2025系统分析师---软件工程：深度剖析常见软件开发方法

在软件工程这一复杂而精妙的领域中，软件开发方法的选择与实施无疑是项目成功的关键所在。作为一名资深软件技术专家，我深知不同的开发方法适用于不同的业务场景，各自具备独特的优缺点。本文将深入探讨几种常见的软件开发方法，包括…...

编程日记 2025/7/17 10:05:12

中文字符计数器，助力所有python对齐业务（DeepSeek代笔）

编码制式反推双宽，精准字宽库力推中文对齐。笔记模板由python脚本于2025-03-26 23:49:24创建，本篇笔记适合为中文终端显示和文本输出对齐烦恼的coder翻阅。【学习的细节是欢悦的历程】博客的核心价值：在于输出思考与经验，而不仅…...

编程日记 2025/7/17 20:44:50

扫描注解指定路径

10.扫描注解在 Spring Boot 中，EnableConfigurationProperties 和 ConfigurationPropertiesScan 是两个用于显式启用和管理 ConfigurationProperties 类的注解。它们提供了更灵活的方式来注册和扫描 ConfigurationProperties 类，尤其是在某些复杂场景或…...

编程日记 2025/7/21 4:36:23

像素到数据：Selenium，OpenCV，Tesseract，Python构建的智能解析系统

基于Selenium与OCR技术的网页信息智能提取方案一、应用场景解析在Web自动化测试和数据分析领域，经常需要处理动态渲染的网页信息，特别是当页面元素以图像形式呈现时。本文介绍的解决方案结合了浏览器自动化与图像识别技术，有效解决了以下典型场景：动态渲染的可视化数据…...

编程日记 2025/7/16 10:38:41

一、SEO 头部三大标签

1. Title 标签（标题）

核心作用

优化规范

示例

2. Meta Description（描述）

核心作用

优化规范

示例

3. Viewport 标签（视口）

核心作用

优化规范

4. 完整 SEO 头部模板

二、Favicon 图标设置

1. 基础配置

2. 多尺寸适配（现代浏览器）

网页布局

一、网页布局核心模块

二、HTML5 语义化结构

三、CSS 布局技术对比与选择

四、Flexbox 实现经典布局

1. 导航菜单水平居中

2. 主内容区与侧边栏并排

五、CSS Grid 实现响应式布局

1. 定义网格容器

2. 页脚自动贴底（Sticky Footer）

六、响应式设计关键技巧

1. 媒体查询（Media Queries）

2. 图片自适应

七、常见问题与解决方案

1. 垂直居中

2. 等高列

3. 清除浮动（Legacy）

媒体查询

一、媒体查询是什么？

二、媒体查询语法

1. 基础语法

2. 组成部分

3. 媒体特性全表

4. 逻辑运算符组合条件

三、核心应用场景

1. 响应式断点（Breakpoints）

2. 设备方向适配

3. 高分辨率屏幕适配（Retina）

4. 打印样式优化

四、媒体查询顺序

1. CSS 的层叠规则

2. 错误顺序示例

3. 正确顺序原则

移动优先（推荐）

桌面优先（不推荐）

相关文章：