区块
工作室编辑式介绍
Studio editorial introduction
- 实际运行录屏
- 包含占位
- 未实测
- 公开使用有限制
同一 HTML 的验收默认截图和 Playwright 可视光标视频：默认 → hover → 展开 → 收起，11.933333 秒。光标仅录制时注入；展开态图库底端在镜头外。含图片占位，非真人手动录屏或全面实测认证。
已按减少动态效果偏好显示静态封面。
简介
白底、大标题和充足留白组成的工作室介绍区块。新版按“标题 → 介绍与行动 → 双图”纵向组织，保留两种图片比例和橙色胶囊按钮，按钮文字保持稳定、箭头轻微右移。图片缺省为中立占位；默认按钮展开本地演示说明，不假装跳到真实工作室页面。
英文摘要
A white editorial studio introduction with a heading, narrative/action band and two differently proportioned image frames. It uses an orange pill with a stable label and a slight arrow shift, while reorganizing the composition into one responsive document. Images default to neutral placeholders; the default button opens a local explanation.
技术、适配与难度
难度: 入门 · 2/5
低，2/5，摘自详情的编辑判断；涉及响应式布局、CSS 反馈和一个折叠状态，不是实测认证。
技术栈
- HTML · 语言 · 必需
原生语义结构；单文件 index.html。
- CSS · 样式 · 必需
内嵌响应式 CSS，系统字体，无外部框架。
- JavaScript · 语言 · 必需
内嵌原生逻辑；CTA 模式与本地折叠状态。
设计适配范围
按视口适配 · 桌面 / 平板 / 手机
设计最小宽度：320px
- 640px · 叙述/CTA 可横排，图库以 45fr:55fr 分配扣除 gap 后的空间。
- 1024px · 增加主要留白并调整正文字级，仍为纵向编辑式组织。
- 1280px · 正文增至 18px；最大内容宽度 1440px。
设计适配范围并非本站兼容认证；200% 文字可重新堆叠。其他浏览器及实际屏幕阅读器语音未验收。
能力标签
- 独立 HTML
- 编辑式布局
- 响应式 CSS
- CSS 交互
- 图片占位
- 无障碍控件
适用工具说明
通用提示词
能力标签描述实现需求；未据此确认任何特定 AI 工具、模型或版本的兼容性。
适合谁
- 学习单文件响应式图文布局
- 练习稳定文字与 CSS 箭头反馈
- 制作图片缺失仍完整可用的介绍区块
不适合谁
- 直接冒充真实工作室身份、摄影或成果
- 未配置素材及真实 CTA 的商业推广页
- 需要后台、提交或持久化的业务流程
前置条件
- 能保存并在现代浏览器中打开 index.html
- 使用具备 HTML/CSS/JavaScript 生成能力的工具并独立核验结果
- 如添加图片或真实导航，提供素材条件、alt、裁切位置和有效目标
资源条件
默认无外部运行资源；两张可选图片尚未提供。系统字体与独立 CSS 箭头。本站封面和 MP4 为成品预览，并非运行图片输入。
小图
图片可选待补- 作用范围
- photographic_presentation
- 输入条件与格式
- 默认 null；可提供本地文件或 data URL，补充 alt、object-position 与实际素材条件。
- 回退方案: 占位
- 保留 438:346 框及 Image not supplied。
- 缺失影响
- 缺少真实摄影；仍可运行默认演示。
大图
图片可选待补- 作用范围
- photographic_presentation
- 输入条件与格式
- 默认 null；可提供本地文件或 data URL，补充 alt、object-position 与实际素材条件。
- 回退方案: 占位
- 保留 3:2 框及 Image not supplied。
- 缺失影响
- 缺少真实摄影；仍可运行默认演示。
默认演示行为
默认 local：Read the approach 展开/收起说明，文字稳定、hover/focus 箭头右移 3px，减少动态时停止位移。可配置 disabled、omit、link；link 必须有有效真实目标。默认没有图片、真实团队身份或外部导航。
UNSPECIFIED 边界
- 两张替代照片及其条件、alt 和裁切焦点
- 真实团队介绍
- 真实 CTA 目标
正文
使用方法
复制完整英文执行正文，生成独立 index.html；使用内嵌 HTML/CSS/JavaScript 与系统字体，无外部依赖。默认两图为 null，按钮以 local 模式展开和收起本地说明。
素材与行为
双图比例为 438:346 与 3:2；未提供照片时保留 Image not supplied。真实团队介绍和按钮目标尚未提供。只有配置有效目标才使用 link 模式；缺失或无效目标回退为禁用。
当前预览
封面取同一 HTML 的验收默认截图；MP4 展示默认、hover、展开、收起。Playwright 录制，光标为录制上下文覆盖层。成品按执行稿允许的方式把橙色 CTA 字色改为 #111827；展开态图库底端不在画面内。历史详情稿的“未生成”是当时状态，现已有成品；上游报告与预览不代表本站全面实测。
公开使用条件
公开使用有限制
有限制公开：可展示当前学习演示包并完整复制英文正文，须遵守所列使用条件。来源条件 UNKNOWN 保留；本次确认不构成法律清权或全面功能认证。
审核范围: 当前 QK-006 v2-independent 英文执行正文、双语详情、资源及使用条件，同一独立 HTML 成品的静态封面与 Playwright 操作视频；仅为学习演示公开包。
- 正文允许个人商用、允许修改、不允许再分发、不要求署名；第三方资源条件不由此政策代替。
- 原资源、依赖与保留设计参数的来源条件仍为 UNKNOWN；未使用原媒体，不宣称已清权、本站原创或获得原来源授权。
- 两张图片均未提供，必须保留 Image not supplied 说明；真实团队身份与 CTA 目标为 UNSPECIFIED。默认 CTA 仅展开本地说明，不得描述为真实工作室导航或成果承诺。
- 封面和 MP4 来自同一运行 HTML；视频由 Playwright 驱动，光标只在录制上下文注入。不得称真人手动录屏、全面实测通过或主观质量目标已经达标。
正文使用与修改范围
正文允许个人商用、允许修改、不允许再分发、不要求署名；第三方资源条件不由此政策代替。原资源、依赖与保留设计参数的来源条件仍为 UNKNOWN；未使用原媒体，不宣称已清权、本站原创或获得原来源授权。公开包须保持演示及占位说明；第三方实际素材按各自适用条件核验。
预期结果
一个白底单文件介绍区块：同一 DOM、响应式叙述与双图、稳定 CTA 文字、箭头轻微位移、本地说明展开/收起及缺图回退。实际结果须自行核验。
常见失败
- 图库百分比加 gap 导致横向溢出
- 为桌面和手机重复按钮及状态
- 空 src 发起错误资源请求
- 缺 CTA 目标仍显示可用链接
- 沿用橙底白字却未测量对比度，或把 ≥95% 目标写成实测成绩
版本与实测范围
编号: QK-006 · 素材版本 / 修订: v2-independent
未实测
- 本脚本仅创建内容与媒体证据，不运行功能实测；上游生成和录制报告不自动提升本站 verification。
- 未提供实际照片和真实 CTA；主观 ≥95% 目标未测量。
- 未验收实际第三方素材条件、其他浏览器、真实屏幕阅读器语音或真实上传接口。
- 成品按源稿允许的对比度调整把 CTA 字色改为 #111827；展开态视频不显示图库底端。
更新日期: 2026年10月12日
关联资源
暂无可显示的关联资源。你仍可阅读正文和参考来源。