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

CSS—补充：CSS计数器、单位、@media媒体查询

article 2026/3/19 20:10:19

1. CSS计数器

嵌套计数器：

对列表元素：

2.单位

绝对长度：

相对长度：

3.@media媒体查询

1. CSS计数器

CSS 计数器就像“变量”。变量值可以通过 CSS 规则递增（将跟踪它们的使用次数）。

如需使用 CSS 计数器，我们将使用以下属性：

counter-reset - 创建或重置计数器
counter-increment - 递增计数器值
content - 插入生成的内容
counter() 或 counters() 函数 - 将计数器的值添加到元素

如需使用 CSS 计数器，必须首先使用 counter-reset 创建它。

嵌套计数器：

<!DOCTYPE html>
<html>
<head>
<style>
body {counter-reset: section;
}h1 {counter-reset: subsection;
}h1::before {counter-increment: section;content: "Section " counter(section) ". ";
}h2::before {counter-increment: subsection;content: counter(section) "." counter(subsection) " ";
}
</style>
</head>
<body><h1>HTML 教程：</h1>
<h2>HTML 教程</h2>
<h2>CSS 教程</h2><h1>Scripting 教程:</h1>
<h2>JavaScript</h2>
<h2>VBScript</h2><h1>XML 教程：</h1>
<h2>XML</h2>
<h2>XSL</h2></body>
</html>

对列表元素：

<!DOCTYPE html>
<html>
<head>
<style>
ol {counter-reset: section;list-style-type: none;
}li::before {counter-increment: section;content: counters(section,".") " ";
}
</style>
</head>
<body><ol><li>item</li><li>item   <ol><li>item</li><li>item</li><li>item<ol><li>item</li><li>item</li><li>item</li></ol></li><li>item</li></ol></li><li>item</li><li>item</li>
</ol><ol><li>item</li><li>item</li>
</ol></body>
</html>

2.单位

绝对长度：

绝对长度单位是固定的，用任何一个绝对长度表示的长度都将恰好显示为这个尺寸。

不建议在屏幕上使用绝对长度单位，因为屏幕尺寸变化很大。

单位	描述
cm	厘米
mm	毫米
in	英寸 (1in = 96px = 2.54cm)
px *	像素 (1px = 1/96th of 1in)
pt	点 (1pt = 1/72 of 1in)
pc	派卡 (1pc = 12 pt)

相对长度：

相对长度单位规定相对于另一个长度属性的长度。相对长度单位在不同渲染介质之间缩放表现得更好。

单位	描述
em	相对于元素的字体大小（font-size）（2em 表示当前字体大小的 2 倍）
ex	相对于当前字体的 x-height(极少使用)
ch	相对于 "0"（零）的宽度
rem	相对于根元素的字体大小（font-size）
vw	*相对于视口宽度的 1%**
vh	*相对于视口高度的 1%**
vmin	相对于视口*较小尺寸的 1％
vmax	相对于视口*较大尺寸的 1％
%	相对于父元素

视口（Viewport）= 浏览器窗口的尺寸。如果视口为 50 厘米宽，则 1vw = 0.5 厘米。

3.@media媒体查询

相当于在不同媒体设备类型（如手机、平板、电脑、打印机等）的不同页面大小，显示格式有区别。

应用：

隐藏元素
改变元素
弹性布局

css3媒体类型：

值	描述
all	用于所有媒体类型设备。
print	用于打印机。
screen	用于计算机屏幕、平板电脑、智能手机等等。
speech	用于大声“读出”页面的屏幕阅读器。

语法：

@media not|only mediatype and (expressions) {CSS-Code;
}

例如：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.wrapper {overflow: auto;}#main {margin-left: 4px;}#leftsidebar {float: none;width: auto;
}#menulist {margin: 0;padding: 0;
}.menuitem {background: #CDF0F6;border: 1px solid #d4d4d4;border-radius: 4px;list-style-type: none;margin: 4px;padding: 2px;
}@media screen and (min-width: 480px) {#leftsidebar {width: 200px; float: left;}#main {margin-left: 216px;}
}
</style>
</head>
<body><div class="wrapper"><div id="leftsidebar"><ul id="menulist"><li class="menuitem">Menu-item 1</li><li class="menuitem">Menu-item 2</li><li class="menuitem">Menu-item 3</li><li class="menuitem">Menu-item 4</li><li class="menuitem">Menu-item 5</li></ul></div><div id="main"><h1>调整浏览器窗口大小来查看效果！</h1><p>如果视口为 480px 或更宽，它将向页面左侧浮动。如果视口小于 480px，则菜单将位于内容的顶部。</p></div>
</div></body>
</html>

【记录学习过程的笔记，欢迎大家一起讨论，会持续更新】

CSS—补充：CSS计数器、单位、@media媒体查询

目录 1. CSS计数器嵌套计数器： 对列表元素： 2.单位绝对长度： 相对长度： 3.media媒体查询 1. CSS计数器 CSS 计数器就像“变量”。变量值可以通过 CSS 规则递增（将跟踪它们的使用次数）。如需使用…...

编程日记 2026/2/15 20:47:01

【JAVA架构师成长之路】【电商系统实战】第10集：电商秒杀系统实战（流量削峰 + 库存预热 + 请求排队）

30分钟课程：电商秒杀系统实战（流量削峰库存预热请求排队） 课程目标掌握秒杀系统核心架构设计：流量削峰、库存预热、请求排队。实现基于 Redis 的令牌桶限流与库存原子扣减。通过 Redis List 或 Kafka 实现高并发请求的异步处…...

编程日记 2026/2/15 6:57:21

无人机推流/RTMP视频推拉流：EasyDSS无法卸载软件的原因及解决方法

视频推拉流/直播点播EasyDSS平台支持音视频采集、视频推拉流、播放H.265编码视频、存储、分发等视频能力服务，在应用场景中可实现视频直播、点播、转码、管理、录像、检索、时移回看等。此外，平台还支持用户自行上传视频文件，也可将上传的点播…...

编程日记 2026/3/9 4:39:34

Logisim实验--计组

每个实验会先讲一下原理再给出答案。实验一：7段数码管驱动电路设计实验目的 (1)帮助学生理解真值表方式设计电路的原理； (2)能利用Logisim的真值表生成电路功能自动生成所需电路。这里我们要看清每个引脚控制的是哪个灯亮，注意看它的线…...

编程日记 2026/3/10 1:51:12

【Linux】软硬链接 | 动静态链接(三)

目录前言： 一、软硬链接 1.软链接 2.硬链接 3.硬链接数 4.软硬链接的区别 5.使用unlink删除链接的文件 6.目录文件链接数( . 和 .. ) 二、静态库的制作和使用 1.制作静态库 2.使用静态库 2.1方法一 2.2方法二 2.3方法三三、动态库的制作和使用 1.…...

编程日记 2026/3/14 22:02:01

数据结构（回顾）

数据结构（回顾） 回顾不同点顺序表链表存储空间上物理上一定连续逻辑上连续，物理上不一定连续随机访问支持，时间复杂度O(1)不支持，时间复杂度O(N)任意位置插入或者删除元素可能需要挪动元素，效率低&#…...

编程日记 2026/3/17 2:23:07

达梦数据库在Linux，信创云安装，备份，还原

（一）系统环境检查 1操作系统：确认使用的是国产麒麟操作系统，检查系统版本是否兼容达梦数据库 V8。可以通过以下命令查看系统版本： cat /etc/os-release 2硬件资源：确保服务器具备足够的硬件资源&#xff0…...

编程日记 2026/3/2 4:52:10

从0开始的操作系统手搓教程23：构建输入子系统——实现键盘驱动1——热身驱动

目录所以，键盘是如何工作的说一说我们的8042 输出缓冲区寄存器状态寄存器控制寄存器动手！ 注册中断简单整个键盘驱动 Reference ScanCode Table 我们下一步就是准备进一步完善我们系统的交互性。基于这个，我们想到的第一个可以…...

编程日记 2026/3/2 7:02:10

01-简单几步！在Windows上用llama.cpp运行DeepSeek-R1模型

1.llama.cpp介绍 Llama.cpp 是一个开源的、轻量级的项目，旨在实现 Meta 推出的开源大语言模型 Llama 的推理（inference）。Llama 是 Meta 在 2023 年开源的一个 70B 参数的高质量大语言模型，而 llama.cpp 是一个用 C 实现的轻量化…...

编程日记 2026/3/15 2:00:18

Trae AI 开发工具使用手册

这篇手册将介绍 Trae 的基本功能、安装步骤以及使用方法，帮助开发者快速上手这款工具。 Trae AI 开发工具使用手册 Trae 是字节跳动于 2025 年推出的一款 AI 原生集成开发环境（IDE），旨在通过智能代码生成、上下文理解和自动化任务…...

编程日记 2026/3/19 16:01:38

HarmonyOS Next 属性动画和转场动画

HarmonyOS Next 属性动画和转场动画在鸿蒙应用开发中，动画是提升用户体验的关键要素。通过巧妙运用动画，我们能让应用界面更加生动、交互更加流畅，从而吸引用户的注意力并增强其使用粘性。鸿蒙系统为开发者提供了丰富且强大的动画开发能力&…...

编程日记 2026/2/25 3:07:52

JavaWeb-mysql8版本安装

下载方式地址：https://www.mysql.com/cn/downloads/ 选择：MySQL Community (GPL) downloads 选择：MySQL Community Server 选择： 选择： 安装mysql （8.0.30） 1、以管理员身份打开命令行…...

编程日记 2026/2/25 0:07:04

【实战ES】实战 Elasticsearch：快速上手与深度实践-3.2.3 案例：新闻搜索引擎的相关性优化

👉 点击关注不迷路 👉 点击关注不迷路 👉 点击关注不迷路文章大纲 Elasticsearch新闻搜索引擎相关性优化实战3.2.3 案例：新闻搜索引擎的相关性优化项目背景1. 相关性问题诊断与分析1.1 初始查询DSL示例1.2 问题诊断矩阵1.3 性能基…...

编程日记 2026/3/4 0:18:03

HCIA复习拓扑实验

一.拓扑图二.需求 1.学校内部的HTTP客户端可以正常通过域名www.baidu.com访问到百度网络中HTTP服务器 2.学校网络内部网段基于192.168.1.0/24划分，PC1可以正常访问3.3.3.0/24网段，但是PC2不允许 3.学校内部路由使用静态路由，R1和R2之间两…...

编程日记 2026/3/12 20:02:04

企业如何选择研发项目进度管理软件？盘点15款实用工具

这篇文章介绍了以下工具: 1. PingCode； 2. Worktile； 3. 腾讯 TAPD； 4. 华为 DevCloud； 5. 亿方云； 6. 阿里云效； 7. CODING 码云； 8. 明道云； 9. 进度猫； 10. 轻流等。 …...

编程日记 2026/3/1 19:20:45

(二十二)趣学设计模式之备忘录模式！

目录一、啥是备忘录模式？二、为什么要用备忘录模式？三、备忘录模式的实现方式四、备忘录模式的优缺点五、备忘录模式的应用场景六、总结 🌟我的其他文章也讲解的比较有趣😁，如果喜欢博主的讲解方式，…...

编程日记 2026/2/25 8:18:08

conda 配置新环境时package will be install 和 package will be download 的区别

install 和 download 的区别 package will be downloaded下的包：这一类显示的是需要从 conda 仓库或其他指定的源下载的软件包。这些软件包通常是 .tar.bz2、.tar.xz 或 .conda 格式的压缩包。这些包会被下载到本地缓存目录（通常是 ~/.conda 或 C:\Users…...

编程日记 2026/3/17 9:48:57

第本章：go 切片

注意：　切片必须要初始化　才能使用　，切片是引用类型 a :[]int{} // 这上叫始化此时并没有申请内存 // 如果要追加值的话：　append ints : append(a, 1, 2, 3)a : make([]int,5) // 声明切片类型var a []string //声明一…...

编程日记 2026/3/7 8:47:36

P6412题解

原题题目描述现在有一个 1 ∼ n 1\sim n 1∼n 的排列 a a a，将序列中的元素依次放进一个 BST 里，求 BST 中插入函数的执行次数。注意：第一个数已经作为 BST 的根。如果您无法理解上面说的话，这里有一份伪代码： insert( number x, node n )c+1;if x is less tha…...

编程日记 2026/3/6 23:16:29

关于AI数据分析可行性的初步评估

一、结论：可在部分环节嵌入，无法直接处理大量数据 1.非本地部署的AI应用处理非机密文件没问题，内部文件要注意数据安全风险。 2.AI（指高规格大模型）十分适合探索性研究分析，对复杂报告无法全流程执行&…...

编程日记 2026/3/2 8:54:33

编程考古-Borland历史：《.EXE Interview》对Anders Hejlsberg关于Delphi的采访内容（中）

为了纪念Delphi在2002年2月14日发布的25周年（2020.2.12），这里有一段由.EXE杂志编辑Will Watts于1995年对Delphi首席架构师Anders Hejlsberg进行的采访记录。在这次采访中，Anders讨论了Delphi的设计与发展，以及即将到来的针对Windows 95的32位版本。 Q. 编译器引擎本身是用…...

编程日记 2026/2/25 18:18:47

SQL 窗口函数之lead() over(partition by ) 和 lag() over(partition by )

lag() over() 与 lead() over() 函数是跟偏移量相关的两个分析函数，通过这两个函数可以在一次查询中取出同一字段的前 N 行的数据 (lag) 和后 N 行的数据 (lead) 作为独立的列, 从而更方便地进行进行数据过滤。这种操作可以代替表的自联接，并且 LAG 和 L…...

编程日记 2026/3/6 6:47:27

【基础知识】回头看Maven基础

背景项目过程中，对于Maven的pom.xml文件，很多时候，我通过各种参考、仿写，最终做出想要的效果。但实际心里有些迷糊，不清楚具体哪个基础的配置所实现的效果。今天，特意回过头来，了解Maven的基…...

编程日记 2026/2/17 2:38:19

Manus+Ollama实现本地大模型部署和应用测试

这几天Manus即DeepSeek后又突然火爆，我也进行了跟踪测试，特记录一下分享给大家，目前来看，Manus的确是一个可以进行任务分解的自动化解决方案，将其他AI需要多次繁杂的迭代对话做了较大的改进，相当于用户抛出…...

编程日记 2026/3/13 22:59:44

labelimg标注的xml标签转换为yolo格式标签

本文不生产技术，只做技术的搬运工！！！ 前言在yolo训练时，我们需要对图像进行标注，而使用labelimg标注时如果直接选择输出yolo格式的数据集，则原始数据的很多信息无法被保存，因此一版…...

编程日记 2026/3/3 12:50:52

【Python 数据结构 9.树】

我装作漠视一切，其实我在乎的太多，但我知道抓得越紧越容易失去 —— 25.3.6 一、树的基本概念 1.树的定义树是n个结点的有限集合，n0时为空树。当n大于0的时候，满足如下两个条件： ① 有且仅有一个特定的结点&#xff…...

编程日记 2026/3/5 11:39:48

LLM 学习（二完结 Multi-Head Attention、Encoder、Decoder）

文章目录 LLM 学习（二完结 Multi-Head Attention、Encoder、Decoder）Self-Attention （自注意力机制）结构多头注意力 EncoderAdd & Norm 层Feed Forward 层 EncoderDecoder的第一个Multi-Head AttentionMasked 操作Teacher Fo…...

编程日记 2026/3/14 11:50:20