CSS—补充:CSS计数器、单位、@media媒体查询
目录
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 | 用于所有媒体类型设备。 |
用于打印机。 | |
screen | 用于计算机屏幕、平板电脑、智能手机等等。 |
speech | 用于大声“读出”页面的屏幕阅读器。 |
语法与常用的设备断点 :
@media not|only mediatype and (expressions) {CSS-Code;
}
/* 超小型设备(电话,600px 及以下) */
@media only screen and (max-width: 600px) {...} /* 小型设备(纵向平板电脑和大型手机,600 像素及以上) */
@media only screen and (min-width: 600px) {...} /* 中型设备(横向平板电脑,768 像素及以上) */
@media only screen and (min-width: 768px) {...} /* 大型设备(笔记本电脑/台式机,992px 及以上) */
@media only screen and (min-width: 992px) {...} /* 超大型设备(大型笔记本电脑和台式机,1200px 及以上) */
@media only screen and (min-width: 1200px) {...}
当使用媒体查询 min-device-width
而不是 min-width
来检查设备宽度,而不是浏览器宽度。然后,当您调整浏览器窗口的大小时,图像将不会变化
/* 针对小于 400 像素的设备: */
body {background-image: url('img_smallflower.jpg');
}/* 针对 400 像素及更大的设备: */
@media only screen and (min-device-width: 400px) {body { background-image: url('img_flowers.jpg'); }
}
/* 针对小于 400 像素的宽度: */
body {background-image: url('img_smallflower.jpg');
}/* 针对 400 像素或更大的宽度: */
@media only screen and (min-width: 400px) {body { background-image: url('img_flowers.jpg'); }
}
举例:
<!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 规则递增(将跟踪它们的使用次数)。 如需使用…...
Phi-4-multimodal:图、文、音频统一的多模态大模型架构、训练方法、数据细节
Phi-4-Multimodal 是一种参数高效的多模态模型,通过 LoRA 适配器和模式特定路由器实现文本、视觉和语音/音频的无缝集成。训练过程包括多阶段优化,确保在不同模式和任务上的性能,数据来源多样,覆盖高质量网络和合成数据。它的设计…...
Leetcode::将水果放入篮子II(c++)
3477. 将水果放入篮子 II 提示 给你两个长度为 n 的整数数组,fruits 和 baskets,其中 fruits[i] 表示第 i 种水果的 数量,baskets[j] 表示第 j 个篮子的 容量。 你需要对 fruits 数组从左到右按照以下规则放置水果: 每种水果必…...
【C语言系列】字符函数和字符串函数
字符函数和字符串函数 一、字符分类函数二、字符转换函数三、strlen的使用和模拟实现3.1strlen函数3.2strlen函数模拟实现 四、strcpy的使用和模拟实现4.1strcpy函数4.2strcpy函数的模拟实现 五、strcat的使用和模拟实现5.1strcat函数5.2strcat函数的模拟实现 六、strcmp的使用…...
【计算机网络】深入解析 HTTP 协议的概念、工作原理和通过 Fiddler 抓包查看 HTTP 请求/响应的协议格式
网络原理— HTTP 1. 什么是HTTP? HTTP(全称为"超文本传输协议")是一种应用非常广泛的应用层协议: HTTP 往往是基于传输层的 TCP 协议实现的 (HTTP1.0,HTTP1.1,HTTP2.0 均为TCP,HTTP3基于UDP实现) 我们平时打开一个网站,就是通过HTTP协议来…...
InDraw6.2.3 | 甾体、核苷、黄酮类化合物实现简称命名
导语 当化学家对着屏幕输入"2-amino-1,9-dihydro-6H-purin-6-one"时,隔壁生物学家可能正在搜索"鸟嘌呤";这种命名差异如同"火星文"与"地球语"的碰撞。现在,鹰谷InDraw 6.2.3版带着53种多环化合物的…...
AI Copilot——维新派的贾维斯,守旧派的墓志铭(程序员视角)
6500万年前的那颗陨石好像要落下来了 这一段时间,伴随着claude sonnet 3.7的发布 以及cursor,windsurf 等一众AI智能编辑器的涌现,社区的programming自媒体坐不住了,有一个观点已经快要溢出屏幕:程序员这个岗位要黄&a…...
c++ 接口/多态
目录 接口的通用定义 特点: C 中的接口 接口的作用 接口与抽象类的区别 什么是多态? 多态的类型 1. 编译时多态 2. 运行时多态 多态的实现原理 注意事项 在编程中,接口(Interface) 是一个抽象概念ÿ…...
【大模型学习】第十二章 大模型获取智能机制
目录 引言 1. 模型架构 Transformer架构 层次结构和层数 2. 训练数据 3. 大规模训练 4. 迁移学习与微调 4.1 微调步骤 5. 机制实例 自注意力机制 多头注意力机制 总结 引言 随着深度学习的发展,特别是大型预训练模型(大模型)的出…...
神经网络|(十四)|霍普菲尔德神经网络-Hebbian训练
【1】引言 前序学习进程中,除了对基本的神经网络知识进行了学习,还掌握了SOM神经网络原理,文章链接包括且不限于: 神经网络|(十一)|神经元和神经网络-CSDN博客 神经网络|(十二)|常见激活函数-CSDN博客 神经网络|(十三)|SOM神经…...
华为鸿蒙系统全景解读:从内核设计到生态落地的技术革命
华为鸿蒙系统全景解读:从内核设计到生态落地的技术革命 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,可以分享一下给大家。点击跳转到网站。 https://www.captainbed.cn/ccc 文章目录 华为鸿蒙系统全景解读&#x…...
基于大数据的Steam游戏数据分析可视化推荐系统
【大数据】🎮 项目名:游戏分析神器,用代码探析游戏世界——《基于大数据的Steam游戏分析与智能推荐系统》(完整系统源码开发笔记详细部署教程)✅ 目录 一、项目简介二、项目界面展示三、项目视频展示 一、项目简介 &a…...
将长上下文大语言模型研究从输入转向输出
将长上下文大语言模型研究从输入转向输出 摘要: 近年来,长上下文大语言模型(LLMs)的研发主要集中在处理更长的输入文本上,这使得模型在理解长篇内容时取得了显著进步。然而,生成长篇输出的研究却相对被忽视ÿ…...
Dify 开源大语言模型应用开发平台使用(二)
文章目录 说明Dify 使用报告1. 应用创建——专业的锂电池相关知识解答1.1 平台简介1.2 创建应用2. 知识库、工作流、变量、节点与编排节点详解2.1 知识库管理2.2 工作流配置2.3 变量管理2.4 节点与编排节点3. 测试和调试3.1 单元测试3.2 日志与监控3.3 实时调试3.4 性能测试总结…...
CarPlanner:用于自动驾驶大规模强化学习的一致性自回归轨迹规划
25年2月来自浙大和菜鸟网络的论文“CarPlanner: Consistent Auto-regressive Trajectory Planning for Large-scale Reinforcement Learning in Autonomous Driving”。 轨迹规划对于自动驾驶至关重要,可确保在复杂环境中安全高效地导航。虽然最近基于学习的方法&a…...
K8s面试题总结(十一)
1.如何优化docker镜像的大小? 使用多阶段构建(multi-stage build)选择更小的基础镜像(如alpine)减少镜像层数,合并RUN命令 2.请解释Docker中的网络模式(如bridge,host,none) Bridgeÿ…...
Android Telephony 四大服务和数据网络控制面数据面介绍
在移动通信和Android系统中,涉及的关键概念和服务以及场景案例说明如下: 一、概念 (一)Android Telephony 的四大服务 介绍Telephony Data 与 Android Data 的四大服务在Android系统中,与电话(Telephony)和移动数据(Data)相关的核心服务主要包括以下四类: 1. Tele…...
一文讲懂Go语言如何使用配置文件连接数据库
一文讲懂Go语言如何使用配置文件连接数据库 viper1. viper简介2. viper 读取.toml配置文件定义Go语言结构体编写与Go语言结构体对应的.toml配置文件定义初始化函数定义get函数 连接数据库1. 定义数据库对象2. 定义初始化函数3. 定义 get 函数4. 定义 main 函数, 连接数据库 配置…...
Jmeter使用介绍
文章目录 前言Jmeter简介安装与配置JDK安装与配置JMeter安装与配置 打开JMeter方式一方式二 设置Jmeter语言为中文方法一(仅一次性)方法二(永久设置成中文) Jmeter文件常用目录 元件与组件元件组件元件的作用域元件的执行顺序第一个案例添加线程组添加 H…...
MES机联网4:文档资料
目录信息 MES机联网1:技术方案MES机联网2:采集网关MES机联网3:管理后台MES机联网4:文档资料 MQ接入文档 1、建立连接 mqtt连接地址: 192.168.0.138 mqtt端口: 1883 mqtt用户名:admin mqtt密码:123456 …...
豆包大模型 MarsCode AI 刷题专栏 001
001.找单独的数 难度:易 问题描述 在一个班级中,每位同学都拿到了一张卡片,上面有一个整数。有趣的是,除了一个数字之外,所有的数字都恰好出现了两次。现在需要你帮助班长小C快速找到那个拿了独特数字卡片的同学手上…...
常用无功功率算法的C语言实现(二)
0 前言 尽管数字延迟法和积分移相法在不间断采样的无功功率计算中得到了广泛应用,但它们仍存在一些固有缺陷。 对于数字延迟法而言,其需要额外存储至少1/4周期的采样点,在高采样频率的场景下,这对存储资源的需求不可忽视。而积分移相法虽然避免了额外的存储开销,但为了抑制…...
23种设计模式简介
一、创建型(5种) 1.工厂方法 总店定义制作流程,分店各自实现特色披萨(北京店-烤鸭披萨,上海店-蟹粉披萨) 2.抽象工厂 套餐工厂(家庭装含大披萨薯条,情侣装含双拼披萨红酒&#…...
开发vue小游戏:数字华龙道
一、游戏介绍 1、历史背景 数字华容道脱胎于传统华容道,后者源自三国时期“曹操败走华容道”的故事。传统玩法是通过移动不同形状的木块,帮助“曹操”从出口逃脱。而数字华容道将棋子替换为数字,目标是通过滑动方块,将乱…...
electron的通信方式(三种)
文章目录 一、渲染进程向主进程发送消息二、渲染进程向主进程发送消息并异步获取结果三、主进程向渲染进程发送消息 electron的主要是主线程和渲染线程之间的通信,简单记录一下三种通信方式 一、渲染进程向主进程发送消息 利用ipcRenderer.send()和ipcMain.on()方法…...
MapReduce技术概述**
** MapReduce是一种并行计算框架,最初由Google开发,后来被Apache开源。它是一种分布式计算模型,能够处理大规模数据集,解决复杂的计算问题。MapReduce技术在数据处理和分析领域广泛应用,尤其是在大数据处理中。 MapR…...
ubuntu挂载固态硬盘
Ubuntu 中挂载位于 /dev/sdc1 的固态硬盘,可以按照以下步骤操作: 步骤 1:确认分区信息 首先,确保设备 /dev/sdc1 存在且已正确分区: sudo fdisk -l /dev/sdc # 查看分区表 lsblk # 确认分区路…...
同为科技智能PDU在数据中心场景的应用与解决方案
数据中心当前处于一个快速发展和技术变革的特殊时期,全新的人工智能应用正在重塑整个世界,为社会带来便捷的同时,也为数据中心的发展带来了新的机遇和挑战。智能算例的爆发式增长,对数据中心提出了大算力、高性能的新需求…...
golang学习笔记——go语言安装及系统环境变量设置
文章目录 go语言安装go envgo getgoproxy测试安装 Go 插件安装 Go 插件依赖工具参考资料用户环境变量和系统环境变量用户环境变量系统环境变量示例设置环境变量的步骤设置用户环境变量设置系统环境变量 验证环境变量总结 2024年最火的5大Go框架1. Gin:高并发接口的“…...
云服务器Linux安装Docker
系统要求 Docker 官方建议将 Docker 运行在 Linux系统上,当然也可以在其他平台运行,本篇博客只介绍在 Linux 系统上的安装方法。 Docker 运行在 CentOS7.X 版本以上,本文使用阿里云 ECS 云服务器 CentOS 7.4 版本。 Docker 需要安装在 64 …...
2025DNS二级域名分发PHP网站源码
安装教程 1.程序必须使用PHP8.1 2.将扩展ixed.8.1.lin放入/www/server/php/81/lib/php/extensions/no-debug-non-zts-20210902 3.打开宝塔→软件商店→PHP8.1→配置文件 4.放入:extensionixed.8.1.lin 5.重启PHP8.1 6.新建站点(mysql5.6-5.7andPHP8.1&a…...
审批流AntV框架蚂蚁数据可视化X6饼图(附注释)
大家好,这次使用的是AntV的蚂蚁数据可视化X6框架,类似于审批流的场景等,代码如下: X6框架参考网址:https://x6.antv.vision/zh/examples/showcase/practices#bpmn 可以进入该网址,直接复制下方代码进行调试…...
git 添加额外的远程仓库 URL
要使用 git branch -a 查看 net-next 远程仓库中的所有分支,请按照以下步骤操作: 步骤 1: 确保已添加 net-next 远程仓库 如果尚未添加 net-next 远程仓库,请运行以下命令: git remote add net-next git://git.kernel.org/pub/s…...
Qt中实现多个QMainWindow同时显示
在Qt中实现多个QMainWindow同时显示,可通过以下方法实现: 一、直接显示多个实例 必须使用new创建堆对象,避免栈对象因作用域结束被销毁。 int main(int argc, char *argv[]) {QApplication a(argc, argv);// 创建两个独立的主窗口QMainW…...
在ArcMap中通过Python编写自定义工具(Python Toolbox)实现点转线工具
文章目录 一、需求二、实现过程2.1、创建Python工具箱(.pyt)2.2、使用catalog测试代码2.3、在ArcMap中使用工具 三、测试 一、需求 通过插件的形式将点转线功能嵌入ArcMap界面,如何从零开始创建一个插件,包括按钮的添加、工具的实…...
关于AI数据分析可行性的初步评估
一、结论:可在部分环节嵌入,无法直接处理大量数据 1.非本地部署的AI应用处理非机密文件没问题,内部文件要注意数据安全风险。 2.AI(指高规格大模型)十分适合探索性研究分析,对复杂报告无法全流程执行&…...
cdn取消接口缓存
添加cdn后,使用cdn加速域名访问接口 是缓存,不是最新的数据,如果使用局域网则是最新的数据,如果修改配置,确保使用cdn域名请求的接口返回不是缓存 要确保通过CDN加速域名访问接口时返回的是最新的数据,而不…...
Android 屏幕适配 Tips
概念 屏幕尺寸:屏幕的对角线的长度屏幕分辨率:屏幕分辨率是指在横纵向上的像素点数,单位是px,1px1个像素点。一般以纵向像素x横向像素,如1960x1080屏幕像素密度:每英寸上的像素点数,单位是dpi …...
【Academy】HTTP Host 标头攻击 ------ HTTP Host header attacks
HTTP Host 标头攻击 ------ HTTP Host header attacks 1. 什么是 HTTP Host 标头?2. 什么是 HTTP Host 标头攻击?3. HTTP Host 标头漏洞是如何产生的?4. 如何测试 HTTP Host 标头漏洞4.1 提供任意 Host 标头4.2 检查有缺陷的验证4.3 发送不明…...
大模型架构记录2
一 应用场景 1.1 prompt 示例 1.2 自己搭建一个UI界面,调用接口 可以选用不同的模型,需要对应的API KEY 二 Agent 使用 2.1 构建GPT...
在Windows 11的WSL中安装Kali Linux
Kali Linux 是网络安全从业者和爱好者的首选工具集,但直接在物理机或虚拟机上运行可能占用较多资源。借助 Windows Subsystem for Linux (WSL),我们可以在Windows 11中原生运行Kali Linux,轻量且高效。本教程将手把手教你如何在WSL2中安装并配…...
Qt调试功能使用方法
QT编程环境 QT在Windows操作系统下的三种编程环境搭建。 方案编程环境编译器调试器1Qt CreatorMinGW GCCGDB2Qt CreatorMicrosoft Visual C CompilerDebugging Tools for Widows3Microsoft Visual Studio VS自带VS自带 方案提及的QT安装程序及压缩包均能在官网Index of /off…...
一篇文章讲解清楚ARM9芯片启动流程
SAM9X60 ARM9 boot启动流程关键词介绍: 第一级bootloader - 也叫boot ROM,是集成在MPU内部的ROM里面 它的主要功能是执行对MPU的基本初始化和配置,查找并将第二级bootloader从外部NVM中读取出来并放到MPU内部的SRAM. 可以让MPU强制停留在第一…...
DeepSeek未来发展趋势:开创智能时代的新风口
DeepSeek未来发展趋势:开创智能时代的新风口 随着人工智能(AI)、深度学习(DL)和大数据的飞速发展,众多创新型技术已经逐渐走向成熟,而DeepSeek作为这一领域的新兴力量,正逐步吸引越…...
Spring Boot与Axon Framework整合教程
精心整理了最新的面试资料和简历模板,有需要的可以自行获取 点击前往百度网盘获取 点击前往夸克网盘获取 简介 Axon Framework是一个用于构建CQRS(命令查询职责分离)和事件溯源(Event Sourcing)应用的框架࿰…...
从技术角度看大语言模型进化技术路线与落地应用详解:未来的最佳实践方向是什么?
文章大纲 **一、模型架构创新:从Transformer到下一代架构****二、训练与优化技术:从暴力Scaling到精细调控****三、数据与知识工程:从粗放喂养到智能增强****四、应用层进化:从通用能力到垂直场景突破****五、伦理与可持续性技术**未来技术路线图参考文献**一、大模型架构创…...
LSM-Tree (日志结构合并树)
LSM-Tree(日志结构合并树)是一种高效处理写操作的存储结构,广泛应用于NoSQL数据库如LevelDB和RocksDB。其核心思想是将随机写入转换为顺序写入,提升吞吐量。以下是其原理及Java实现示例: ### **LSM-Tree 原理** 1. **…...
自动驾驶---不依赖地图的大模型轨迹预测
1 前言 早期传统自动驾驶方案通常依赖高精地图(HD Map)提供道路结构、车道线、交通规则等信息,可参考博客《自动驾驶---方案从有图迈进无图》,本质上还是存在问题: 数据依赖性高:地图构建成本昂贵,且跨区域泛化能力受限。动态场景局限性:地图无法实时反映临时障碍物或施…...
记录一次mysql全文索引不生效
先是创建全文索引: alter table sms_img_library add fulltext index sms_img_library_title_idx(title) 但是执行下面sql,没有数据出来 select * from sms_img_library where match (title) against(壮丽);排查了最小分词,设置为2 SHOW…...
蓝桥杯题型
蓝桥杯 蓝桥杯题型分类语法基础艺术与篮球(日期问题)时间显示(时间问题)跑步计划(日期问题)偶串(字符)最长子序列(字符)字母数(进制转换)6个0&…...