Web-Dev-For-Beginners 浏览器扩展项目用 CSS 重塑“碳足迹扩展”视觉体验的完整实战指南【免费下载链接】Web-Dev-For-Beginners24 Lessons, 12 Weeks, Get Started as a Web Developer项目地址: https://gitcode.com/GitHub_Trending/we/Web-Dev-For-Beginners本文围绕 Web-Dev-For-Beginners 课程第 5 部分Browser Extension Project的第一课作业《Restyle Your Browser Extension》展开教你在完成碳足迹浏览器扩展的 HTML 结构之后如何系统性地分析现有样式、设计一套符合环保主题且可访问的视觉体系并落地到npm run build可构建的 CSS 中。读完并动手实践后你将掌握扩展类小型 UI 的配色、排版与布局方法能够独立交付一套覆盖表单、加载、结果、错误四种视觉状态且通过可访问性检查的扩展样式。一、背景你要重塑的是什么样的界面这个作业的前提是你已经按照 第一部分课程文档 搭好了扩展的骨架一个显示所在地区电力碳足迹的浏览器扩展项目代号 carbon-trigger-extension数据来自 CO2 Signal API。它的界面采用“双屏渐进式披露”设计Setup View配置屏首次使用时收集地区代码如US-NEISO和 API KeyResults View结果屏展示碳强度grams CO2/kWh与化石燃料占比。样式之所以重要是因为扩展的弹层窗口尺寸很小、且在浏览器明暗主题下都会被用户看到可读性和视觉层级直接决定了这个工具是否“值得每天点开”。原作业文档 assignment.md 给出的核心挑战是扩展自带的只是基础 CSS你要在不牺牲可用性的前提下建立一套有个人风格、且在不同浏览器主题下都成立的视觉身份。从仓库源码看你的 CSS 需要覆盖的 DOM 结构在 课程 README 中已经写死包括表单.form-data及其内部的.region-name、.api-key输入框、.search-btn提交按钮以及结果区.result下的.loading、.errors、.data、.result-container内含.my-region、.carbon-usage、.fossil-fuel三个数据槽位和.clear-btn重置按钮。二、Part 1分析现有设计动手前先摸清现状原作业要求在改动前完成四步勘察这一步直接决定了你的选择器写到哪里去定位Locate扩展项目中的 CSS 文件审阅Review当前的样式方式与配色方案识别Identify布局、排版、视觉层级上可以改进的地方思考Consider设计如何支撑用户目标——快速填完表单、清晰读出数据。结合仓库这里有一个可直接照抄的“选择器清单”它来自 参考实现的 JS 入口也就是 JavaScript 真正会去操作的全部 DOM 节点你的 CSS 应当与之一一对应CSS 类名作用需要重点处理的视觉状态.form-data配置表单容器首次使用的默认展示.region-name/.api-key两个必填输入框聚焦、悬停、进阶校验态.search-btn提交按钮悬停、按下、禁用反馈.loading加载提示请求 API 期间的过渡态.errors错误信息容器请求失败时的警示态.result-container结果展示容器数据到达后的主视图.carbon-usage/.fossil-fuel/.my-region三个数据槽位数值层级、单位小字.clear-btn“Change region” 重置按钮与提交按钮风格区分一个实用技巧把 参考实现 中 JS 切换style.display的逻辑读一遍loading、form、results、errors会在运行时互斥显隐你就能确认哪些容器必须为“可见/隐藏”之外的状态比如加载中的骨架、错误文本的对比度单独设计样式。三、Part 2设计你的自定义样式体系原作业把设计拆解为三个维度以下在保留原要求的基础上补充了本项目的具体落地建议。配色方案Color Scheme选择一组反映环保主题的主色板保证足够的对比度以满足可访问性可用任意符合 WCAG 标准的在线对比度检查工具验证考虑配色在浏览器明暗两种主题下的表现。仓库里其实藏着一个现成的“环保色板”可以参考参考实现 中calculateColor函数用碳强度值映射扩展图标颜色色阶为let co2Scale [0, 150, 600, 750, 800]; let colors [#2AA364, #F5EB4D, #9E4229, #381D02, #381D02];即从“清洁电力”的绿#2AA364经黄#F5EB4D过渡到棕褐#9E4229、#381D02的语义化色带。你可以直接复用这条“绿→黄→褐”的碳强度语义让数据区的高亮色与图标颜色呼应形成统一的主题语言。排版Typography选择在小尺寸扩展窗口下依然易读的字体用字号与字重建立清晰的层级标题、标签、数据、单位说明确保文字在浏览器浅色与深色主题下都可读。对照界面截图可以看出层级需求结果页里有Region:这类加粗标签和grams (grams CO2 emitted per kilowatt hour)这类解释性小字见 参考实现中的文本拼接说明你至少需要两级字号主数值大而粗单位说明小而灰。布局与间距Layout and Spacing改善表单元素与数据展示区的视觉组织为可读性加入合适的 padding 与 margin考虑针对不同屏幕尺寸做响应式设计。四、Part 3把设计落地为 CSS原作业给出的起点模板如下保留原文档示例便于对照/* Example starting points for customization */ .form-data { /* Style the configuration form */ background: /* your choice */; padding: /* your spacing */; border-radius: /* your preference */; } .result-container { /* Style the data display area */ background: /* complementary color */; border: /* your border style */; margin: /* your spacing */; } /* Add your custom styles here */原作业明确列出的关键样式区域有表单元素输入框、标签、提交按钮结果展示数据容器、文字样式、加载态交互元素悬停效果、按钮状态、过渡动画整体布局容器间距、背景色、视觉层级。结合本仓库的真实 DOM 与运行时状态下面给出一份可直接改造、可复制运行的完整示例覆盖表单四态 交互反馈/* 全局用 CSS 自定义属性统一间距与配色 */ :root { --color-primary: #2AA364; /* 与扩展图标绿一致 */ --color-bg: #f6faf7; --color-surface: #ffffff; --color-text: #1f2d24; --color-muted: #5f7168; --color-error: #9E4229; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 1rem; } /* 整体布局扩展弹层通常是窄容器 */ body { font-family: system-ui, -apple-system, Segoe UI, sans-serif; font-size: 0.875rem; /* 小窗口下 14px 起更易读 */ line-height: 1.5; color: var(--color-text); background: var(--color-bg); margin: 0; } /* 配置表单 */ .form-data { background: var(--color-surface); padding: var(--space-3); border-radius: 8px; display: grid; gap: var(--space-2); /* 用 gap 代替逐一手写 margin */ } .form-data h2 { font-size: 1rem; font-weight: 600; margin: 0; } .form-data label { display: block; font-size: 0.8125rem; font-weight: 500; color: var(--color-muted); } .form-data input { width: 100%; padding: var(--space-2); margin-top: var(--space-1); border: 1px solid #cbd5cf; border-radius: 6px; font-size: 0.875rem; } .form-data input:focus { outline: 2px solid var(--color-primary); outline-offset: 1px; } /* 提交按钮唯一的强调色按钮 */ .search-btn { background: var(--color-primary); color: #fff; border: none; border-radius: 6px; padding: var(--space-2) var(--space-3); font-weight: 600; cursor: pointer; transition: background-color 0.15s ease, transform 0.1s ease; } .search-btn:hover { background: #238a53; } .search-btn:active { transform: translateY(1px); } /* 结果展示区 */ .result-container { background: var(--color-surface); border: 1px solid #e3ece6; border-left: 4px solid var(--color-primary); border-radius: 8px; margin: var(--space-2) 0; padding: var(--space-3); } .result-container p { margin: var(--space-1) 0; } /* 数据槽位数值大而粗单位说明小而灰 */ .carbon-usage, .fossil-fuel, .my-region { font-weight: 700; color: var(--color-primary); } /* 加载态与错误态 */ .loading { text-align: center; color: var(--color-muted); padding: var(--space-2); animation: pulse 1.2s ease-in-out infinite; } keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } .errors { color: var(--color-error); font-weight: 500; padding: var(--space-1) 0; } /* 重置按钮与主按钮保持视觉区隔 */ .clear-btn { background: transparent; border: 1px solid var(--color-primary); color: var(--color-primary); border-radius: 6px; padding: var(--space-1) var(--space-2); cursor: pointer; transition: background-color 0.15s ease; } .clear-btn:hover { background: rgba(42, 163, 100, 0.1); }为什么必须给.loading和.errors单独设计从 参考实现的displayCarbonUsage可以看到请求失败时 JS 会把errors文本置为Sorry, data unavailable for the selected region.并隐藏结果容器——如果错误文本没有独立的醒目样式用户会误以为扩展“卡住了”。同理初始化逻辑 会在 localStorage 有缓存时跳过表单直达结果屏因此两套视图的样式必须各自完整不能假设只有一种入口。五、Part 4构建、加载与迭代测试原作业的测试循环是五步构建运行npm run build加载把更新后的扩展装入浏览器测试覆盖全部视觉状态表单填写、加载中、结果展示、错误验证用浏览器开发者工具检查可访问性对比度、焦点顺序、标签关联打磨根据真实使用反馈调整样式。对应到本仓库的具体操作项目脚本定义在 start/package.json 中build: webpack、watch: webpack --watch且要求node 18.0.0、npm 9.0.0见engines字段。开发期建议改用npm run watchwebpack 会自动重新打包省去每改一次 CSS 就手动构建的往返Webpack 会把src/index.js打包为dist/main.js构建产物位于/dist目录按 课程 README 的说明首次安装走load unpacked选择/dist文件夹之后每次更新只需点击扩展旁的reload并提前开启开发者模式Developer mode测试时务必用真实数据而非占位文本作业文档的“Remember to”清单中特别强调因为carbon-usage的显示内容会带上(grams C02 emitted per kilowatt hour)这样的长尾说明只有真实长度才能暴露截断与换行问题可访问性验证重点检查输入框label与for/id的关联HTML 中已用required和语义化label forregion等结构、按钮是否有可感知的:hover/:focus反馈、错误文本的对比度是否达标。六、创意挑战三级进阶目标原作业按难度给出三档目标可按自身水平逐级完成基础级Basic更新颜色与字体形成一套连贯的主题改善整个界面的间距与对齐为交互元素添加克制的悬停效果。中级Intermediate为扩展设计自定义图标或图形为不同状态之间实现平滑过渡动画为 API 调用设计独特的加载动画上例中的pulse呼吸动画即最小可行版本。高级Advanced设计多主题方案浅色 / 深色 / 高对比度针对不同浏览器窗口尺寸实现响应式设计添加提升体验的微交互micro-interactions。七、提交要求与评分标准原作业的交付物清单是修改后的 CSS 文件包含你的自定义样式截图展示扩展在不同状态下的样子表单、加载、结果23 句话的设计说明解释你的设计选择如何改善用户体验。评分采用四维四级量规保留原文档量表维度4 分优秀3 分达标2 分发展中1 分入门视觉设计有创意、连贯的设计提升可用性并体现扎实的设计原则设计选择良好、风格一致、视觉层级清晰基础改进但存在一致性不足样式改动极少或设计不一致功能性所有样式在不同状态与浏览器环境下完美工作样式工作良好边缘情况有小问题多数样式可用但存在显示问题严重影响可用性的样式问题代码质量干净、组织良好的 CSS类名有意义、选择器高效良好的 CSS 结构选择器与属性使用得当可接受但组织上有问题结构差或样式过度复杂可访问性优秀的对比度、可读字体并考虑残障用户良好的可访问性实践仅少量可改进处基础的可访问性考虑存在问题对可访问性要求关注有限八、成功提示与常见误区原作业给出的最佳实践保留并展开在明暗两种浏览器主题下都测试你的扩展——扩展弹层会继承系统主题纯白背景在深色模式下会刺眼建议用background-color配合中性的表面色或用 CSS 变量集中管理使用相对单位em、rem以获得更好的可扩展性用 CSS 自定义属性custom properties保持一致的间距如上文示例中的--space-1/2/3避免魔法数字散落考虑不同视觉能力用户看到的设计效果校验你的 CSS 语法确保合法。常见误区不要为了视觉吸引力牺牲可用性——扩展必须同时“好看”且“好用”。原文档还给出四条硬性提醒让关键信息保持易读保证按钮与交互元素容易点击为用户操作保留清晰的视觉反馈用真实数据测试设计而不是占位文本。作业开头的设计心法同样值得记住从小改动起步逐步加码。排版与间距上的微小改进往往对“品质感”的感知影响最大。九、小结与下一步这篇作业在课程中的位置是你已经完成了 第一部分 的 HTML 结构搭建与构建流程配置完整交互逻辑可对照 solution 目录下的参考实现本次样式改造完成后starter 代码目录 中那个只有编号注释占位的 src/index.js 将被逐步填实。接下来进入 第二部分课程表单提交、浏览器 API 与localStorage持久化让“Change region” 按钮和配置缓存真正工作起来。【免费下载链接】Web-Dev-For-Beginners24 Lessons, 12 Weeks, Get Started as a Web Developer项目地址: https://gitcode.com/GitHub_Trending/we/Web-Dev-For-Beginners创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Web-Dev-For-Beginners 浏览器扩展项目：用 CSS 重塑“碳足迹扩展”视觉体验的完整实战指南
Web-Dev-For-Beginners 浏览器扩展项目用 CSS 重塑“碳足迹扩展”视觉体验的完整实战指南【免费下载链接】Web-Dev-For-Beginners24 Lessons, 12 Weeks, Get Started as a Web Developer项目地址: https://gitcode.com/GitHub_Trending/we/Web-Dev-For-Beginners本文围绕 Web-Dev-For-Beginners 课程第 5 部分Browser Extension Project的第一课作业《Restyle Your Browser Extension》展开教你在完成碳足迹浏览器扩展的 HTML 结构之后如何系统性地分析现有样式、设计一套符合环保主题且可访问的视觉体系并落地到npm run build可构建的 CSS 中。读完并动手实践后你将掌握扩展类小型 UI 的配色、排版与布局方法能够独立交付一套覆盖表单、加载、结果、错误四种视觉状态且通过可访问性检查的扩展样式。一、背景你要重塑的是什么样的界面这个作业的前提是你已经按照 第一部分课程文档 搭好了扩展的骨架一个显示所在地区电力碳足迹的浏览器扩展项目代号 carbon-trigger-extension数据来自 CO2 Signal API。它的界面采用“双屏渐进式披露”设计Setup View配置屏首次使用时收集地区代码如US-NEISO和 API KeyResults View结果屏展示碳强度grams CO2/kWh与化石燃料占比。样式之所以重要是因为扩展的弹层窗口尺寸很小、且在浏览器明暗主题下都会被用户看到可读性和视觉层级直接决定了这个工具是否“值得每天点开”。原作业文档 assignment.md 给出的核心挑战是扩展自带的只是基础 CSS你要在不牺牲可用性的前提下建立一套有个人风格、且在不同浏览器主题下都成立的视觉身份。从仓库源码看你的 CSS 需要覆盖的 DOM 结构在 课程 README 中已经写死包括表单.form-data及其内部的.region-name、.api-key输入框、.search-btn提交按钮以及结果区.result下的.loading、.errors、.data、.result-container内含.my-region、.carbon-usage、.fossil-fuel三个数据槽位和.clear-btn重置按钮。二、Part 1分析现有设计动手前先摸清现状原作业要求在改动前完成四步勘察这一步直接决定了你的选择器写到哪里去定位Locate扩展项目中的 CSS 文件审阅Review当前的样式方式与配色方案识别Identify布局、排版、视觉层级上可以改进的地方思考Consider设计如何支撑用户目标——快速填完表单、清晰读出数据。结合仓库这里有一个可直接照抄的“选择器清单”它来自 参考实现的 JS 入口也就是 JavaScript 真正会去操作的全部 DOM 节点你的 CSS 应当与之一一对应CSS 类名作用需要重点处理的视觉状态.form-data配置表单容器首次使用的默认展示.region-name/.api-key两个必填输入框聚焦、悬停、进阶校验态.search-btn提交按钮悬停、按下、禁用反馈.loading加载提示请求 API 期间的过渡态.errors错误信息容器请求失败时的警示态.result-container结果展示容器数据到达后的主视图.carbon-usage/.fossil-fuel/.my-region三个数据槽位数值层级、单位小字.clear-btn“Change region” 重置按钮与提交按钮风格区分一个实用技巧把 参考实现 中 JS 切换style.display的逻辑读一遍loading、form、results、errors会在运行时互斥显隐你就能确认哪些容器必须为“可见/隐藏”之外的状态比如加载中的骨架、错误文本的对比度单独设计样式。三、Part 2设计你的自定义样式体系原作业把设计拆解为三个维度以下在保留原要求的基础上补充了本项目的具体落地建议。配色方案Color Scheme选择一组反映环保主题的主色板保证足够的对比度以满足可访问性可用任意符合 WCAG 标准的在线对比度检查工具验证考虑配色在浏览器明暗两种主题下的表现。仓库里其实藏着一个现成的“环保色板”可以参考参考实现 中calculateColor函数用碳强度值映射扩展图标颜色色阶为let co2Scale [0, 150, 600, 750, 800]; let colors [#2AA364, #F5EB4D, #9E4229, #381D02, #381D02];即从“清洁电力”的绿#2AA364经黄#F5EB4D过渡到棕褐#9E4229、#381D02的语义化色带。你可以直接复用这条“绿→黄→褐”的碳强度语义让数据区的高亮色与图标颜色呼应形成统一的主题语言。排版Typography选择在小尺寸扩展窗口下依然易读的字体用字号与字重建立清晰的层级标题、标签、数据、单位说明确保文字在浏览器浅色与深色主题下都可读。对照界面截图可以看出层级需求结果页里有Region:这类加粗标签和grams (grams CO2 emitted per kilowatt hour)这类解释性小字见 参考实现中的文本拼接说明你至少需要两级字号主数值大而粗单位说明小而灰。布局与间距Layout and Spacing改善表单元素与数据展示区的视觉组织为可读性加入合适的 padding 与 margin考虑针对不同屏幕尺寸做响应式设计。四、Part 3把设计落地为 CSS原作业给出的起点模板如下保留原文档示例便于对照/* Example starting points for customization */ .form-data { /* Style the configuration form */ background: /* your choice */; padding: /* your spacing */; border-radius: /* your preference */; } .result-container { /* Style the data display area */ background: /* complementary color */; border: /* your border style */; margin: /* your spacing */; } /* Add your custom styles here */原作业明确列出的关键样式区域有表单元素输入框、标签、提交按钮结果展示数据容器、文字样式、加载态交互元素悬停效果、按钮状态、过渡动画整体布局容器间距、背景色、视觉层级。结合本仓库的真实 DOM 与运行时状态下面给出一份可直接改造、可复制运行的完整示例覆盖表单四态 交互反馈/* 全局用 CSS 自定义属性统一间距与配色 */ :root { --color-primary: #2AA364; /* 与扩展图标绿一致 */ --color-bg: #f6faf7; --color-surface: #ffffff; --color-text: #1f2d24; --color-muted: #5f7168; --color-error: #9E4229; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 1rem; } /* 整体布局扩展弹层通常是窄容器 */ body { font-family: system-ui, -apple-system, Segoe UI, sans-serif; font-size: 0.875rem; /* 小窗口下 14px 起更易读 */ line-height: 1.5; color: var(--color-text); background: var(--color-bg); margin: 0; } /* 配置表单 */ .form-data { background: var(--color-surface); padding: var(--space-3); border-radius: 8px; display: grid; gap: var(--space-2); /* 用 gap 代替逐一手写 margin */ } .form-data h2 { font-size: 1rem; font-weight: 600; margin: 0; } .form-data label { display: block; font-size: 0.8125rem; font-weight: 500; color: var(--color-muted); } .form-data input { width: 100%; padding: var(--space-2); margin-top: var(--space-1); border: 1px solid #cbd5cf; border-radius: 6px; font-size: 0.875rem; } .form-data input:focus { outline: 2px solid var(--color-primary); outline-offset: 1px; } /* 提交按钮唯一的强调色按钮 */ .search-btn { background: var(--color-primary); color: #fff; border: none; border-radius: 6px; padding: var(--space-2) var(--space-3); font-weight: 600; cursor: pointer; transition: background-color 0.15s ease, transform 0.1s ease; } .search-btn:hover { background: #238a53; } .search-btn:active { transform: translateY(1px); } /* 结果展示区 */ .result-container { background: var(--color-surface); border: 1px solid #e3ece6; border-left: 4px solid var(--color-primary); border-radius: 8px; margin: var(--space-2) 0; padding: var(--space-3); } .result-container p { margin: var(--space-1) 0; } /* 数据槽位数值大而粗单位说明小而灰 */ .carbon-usage, .fossil-fuel, .my-region { font-weight: 700; color: var(--color-primary); } /* 加载态与错误态 */ .loading { text-align: center; color: var(--color-muted); padding: var(--space-2); animation: pulse 1.2s ease-in-out infinite; } keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } .errors { color: var(--color-error); font-weight: 500; padding: var(--space-1) 0; } /* 重置按钮与主按钮保持视觉区隔 */ .clear-btn { background: transparent; border: 1px solid var(--color-primary); color: var(--color-primary); border-radius: 6px; padding: var(--space-1) var(--space-2); cursor: pointer; transition: background-color 0.15s ease; } .clear-btn:hover { background: rgba(42, 163, 100, 0.1); }为什么必须给.loading和.errors单独设计从 参考实现的displayCarbonUsage可以看到请求失败时 JS 会把errors文本置为Sorry, data unavailable for the selected region.并隐藏结果容器——如果错误文本没有独立的醒目样式用户会误以为扩展“卡住了”。同理初始化逻辑 会在 localStorage 有缓存时跳过表单直达结果屏因此两套视图的样式必须各自完整不能假设只有一种入口。五、Part 4构建、加载与迭代测试原作业的测试循环是五步构建运行npm run build加载把更新后的扩展装入浏览器测试覆盖全部视觉状态表单填写、加载中、结果展示、错误验证用浏览器开发者工具检查可访问性对比度、焦点顺序、标签关联打磨根据真实使用反馈调整样式。对应到本仓库的具体操作项目脚本定义在 start/package.json 中build: webpack、watch: webpack --watch且要求node 18.0.0、npm 9.0.0见engines字段。开发期建议改用npm run watchwebpack 会自动重新打包省去每改一次 CSS 就手动构建的往返Webpack 会把src/index.js打包为dist/main.js构建产物位于/dist目录按 课程 README 的说明首次安装走load unpacked选择/dist文件夹之后每次更新只需点击扩展旁的reload并提前开启开发者模式Developer mode测试时务必用真实数据而非占位文本作业文档的“Remember to”清单中特别强调因为carbon-usage的显示内容会带上(grams C02 emitted per kilowatt hour)这样的长尾说明只有真实长度才能暴露截断与换行问题可访问性验证重点检查输入框label与for/id的关联HTML 中已用required和语义化label forregion等结构、按钮是否有可感知的:hover/:focus反馈、错误文本的对比度是否达标。六、创意挑战三级进阶目标原作业按难度给出三档目标可按自身水平逐级完成基础级Basic更新颜色与字体形成一套连贯的主题改善整个界面的间距与对齐为交互元素添加克制的悬停效果。中级Intermediate为扩展设计自定义图标或图形为不同状态之间实现平滑过渡动画为 API 调用设计独特的加载动画上例中的pulse呼吸动画即最小可行版本。高级Advanced设计多主题方案浅色 / 深色 / 高对比度针对不同浏览器窗口尺寸实现响应式设计添加提升体验的微交互micro-interactions。七、提交要求与评分标准原作业的交付物清单是修改后的 CSS 文件包含你的自定义样式截图展示扩展在不同状态下的样子表单、加载、结果23 句话的设计说明解释你的设计选择如何改善用户体验。评分采用四维四级量规保留原文档量表维度4 分优秀3 分达标2 分发展中1 分入门视觉设计有创意、连贯的设计提升可用性并体现扎实的设计原则设计选择良好、风格一致、视觉层级清晰基础改进但存在一致性不足样式改动极少或设计不一致功能性所有样式在不同状态与浏览器环境下完美工作样式工作良好边缘情况有小问题多数样式可用但存在显示问题严重影响可用性的样式问题代码质量干净、组织良好的 CSS类名有意义、选择器高效良好的 CSS 结构选择器与属性使用得当可接受但组织上有问题结构差或样式过度复杂可访问性优秀的对比度、可读字体并考虑残障用户良好的可访问性实践仅少量可改进处基础的可访问性考虑存在问题对可访问性要求关注有限八、成功提示与常见误区原作业给出的最佳实践保留并展开在明暗两种浏览器主题下都测试你的扩展——扩展弹层会继承系统主题纯白背景在深色模式下会刺眼建议用background-color配合中性的表面色或用 CSS 变量集中管理使用相对单位em、rem以获得更好的可扩展性用 CSS 自定义属性custom properties保持一致的间距如上文示例中的--space-1/2/3避免魔法数字散落考虑不同视觉能力用户看到的设计效果校验你的 CSS 语法确保合法。常见误区不要为了视觉吸引力牺牲可用性——扩展必须同时“好看”且“好用”。原文档还给出四条硬性提醒让关键信息保持易读保证按钮与交互元素容易点击为用户操作保留清晰的视觉反馈用真实数据测试设计而不是占位文本。作业开头的设计心法同样值得记住从小改动起步逐步加码。排版与间距上的微小改进往往对“品质感”的感知影响最大。九、小结与下一步这篇作业在课程中的位置是你已经完成了 第一部分 的 HTML 结构搭建与构建流程配置完整交互逻辑可对照 solution 目录下的参考实现本次样式改造完成后starter 代码目录 中那个只有编号注释占位的 src/index.js 将被逐步填实。接下来进入 第二部分课程表单提交、浏览器 API 与localStorage持久化让“Change region” 按钮和配置缓存真正工作起来。【免费下载链接】Web-Dev-For-Beginners24 Lessons, 12 Weeks, Get Started as a Web Developer项目地址: https://gitcode.com/GitHub_Trending/we/Web-Dev-For-Beginners创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考