CSS引入错误可能引起页面闪烁吗
时间：2026-03-11 19:40:27 314浏览 收藏
热门推荐
漫画APP
动画内容聚合，热门资源快捷查看
CSS引入方式不当确实会导致页面闪烁，核心问题在于样式加载时机与浏览器渲染流程的冲突——尤其是link标签位置错误（如置于body中或head内靠后）会引发FOUC（无样式内容闪现），而@import、动态插入style标签、主题切换节奏失控、媒体查询响应延迟等同样会加剧视觉闪烁；文章不仅揭示了这些常见陷阱，还给出了精准的优化方案：从确保link前置、禁用@import、合理使用preload与CSSStyleSheet.replace()，到动画属性优选transform/opcity、暗色模式预加载共用样式等实战策略，直击弱网环境和老项目中极易被忽视却影响用户体验的关键细节。
link 标签位置不当会引发 FOUC（Flash of Unstyled Content）
是的， 放在 内或靠后位置，浏览器可能先渲染无样式的 HTML，等 CSS 加载完成再重绘，造成肉眼可见的“闪一下”。这不是动画或 JS 导致的闪烁，而是样式加载时机问题。
常见错误写法：
标题
- 必须放在
内，且尽量靠前（在</code> 之后、<code><script></code> 之前）</li> <li>避免使用 <code>@import</code> 在 CSS 文件中引入其他 CSS —— 它会阻塞并延迟后续规则解析</li> <li>如果用了 <code>rel="preload"</code> 提前加载 CSS，需配合 <code>as="style"</code> 和 <code>onload</code> 注入，否则无效甚至加重 FOUC</li> </ul><h3>CSS 中使用 transition 或 animation 触发重排重绘时出现抖动</h3> <p>不是所有“闪烁”都是 FOUC；有些是动画过程中的视觉不稳定，比如在低性能设备上 <code>transform</code> 未启用硬件加速、或对 <code>width</code>/<code>height</code>/<code>top</code>/<code>left</code> 等属性做过渡。</p> <ul><li>优先用 <code>transform: translateX()</code> 替代 <code>left</code>，用 <code>opacity</code> 替代 <code>visibility</code> 动画</li> <li>对动画元素加 <code>will-change: transform</code>（慎用，仅对明确要动画的元素）</li> <li>避免在 <code>:hover</code> 中动态插入大量样式规则（如通过 JS 插入 <code><style></code>），可能触发样式表重解析</li> </ul><h3>动态插入 style 标签或切换 class 时未控制渲染节奏</h3> <p>JS 控制主题切换、暗色模式、A/B 测试样式时，若直接操作 <code>document.head.appendChild</code> 或频繁 <code>element.className = ...</code>，可能在样式生效前短暂回退到默认状态。</p> <ul><li>切换主题时，先 <code>document.documentElement.classList.add("loading-theme")</code>，等新 CSS 加载完成再替换类名</li> <li>用 <code>CSSStyleSheet.replace()</code>（现代浏览器）替代移除+插入整个 <code><style></code> 标签，减少 DOM 波动</li> <li>避免在 <code>requestAnimationFrame</code> 外直接批量修改多个样式属性，容易触发多次 layout</li> </ul><h3>媒体查询或 prefers-color-scheme 切换时样式未预加载</h3> <p>当用户系统主题变化，而页面只在监听到 <code>prefers-color-scheme</code> 变化后再加载对应 CSS，中间存在空白期，表现为“白屏一闪”或文字颜色突变。</p> <ul><li>把亮色/暗色共用样式写在主 CSS 中，仅用 <code>@media (prefers-color-scheme: dark)</code> 覆盖差异部分</li> <li>不要用 JS 动态 <code>fetch</code> 暗色 CSS 并注入 —— 首次切换必然有延迟</li> <li>服务端可识别 <code>Sec-CH-Prefers-Color-Scheme</code> 请求头（需开启 Client Hints），提前返回对应主题 HTML</li> </ul> 实际中最容易被忽略的是：把 <code>link</code> 放在 <code>body</code> 底部这种低级错误，仍出现在不少老项目或 CMS 生成页中。FOUC 在高速网络下不明显，但在 3G 或弱网模拟下几乎必现。<p>以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。</p> </div> <div class="labsList"> </div> </div> <!-- 最新阅读 --> <div class="contBoxNor"> <div class="contTit"> <div class="tit">相关阅读</div> <a href="/articlelist.html" class="more">更多></a> </div> <ul class="latestReadList"> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 1年前 | <a href="javascript:;" class="aLightGray" title="提升">提升</a> <a href="javascript:;" class="aLightGray" title="箭头函数">箭头函数</a> <a href="javascript:;" class="aLightGray" title="函数表达式">函数表达式</a> <a href="javascript:;" class="aLightGray" title="函数声明">函数声明</a> <a href="javascript:;" class="aLightGray" title="Function构造函数">Function构造函数</a> </div> <div class="tit lineOverflow"><a href="/article/207000.html" title="JavaScript函数定义及示例详解" class="aBlack">JavaScript函数定义及示例详解</a></div> <div class="opt"> <span><i class="view"></i>502</span> <span class="collectBtn user_collection" data-id="207000" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 1个月前 | <a href="javascript:;" class="aLightGray" title="智能体">智能体</a> </div> <div class="tit lineOverflow"><a href="/article/621422.html" title="智能体安全引领产业升级——国内AI安全产品市场深度分析" class="aBlack">智能体安全引领产业升级——国内AI安全产品市场深度分析</a></div> <div class="opt"> <span><i class="view"></i>501</span> <span class="collectBtn user_collection" data-id="621422" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 4个月前 | </div> <div class="tit lineOverflow"><a href="/article/619053.html" title="CSS变量简化按钮悬停效果技巧" class="aBlack">CSS变量简化按钮悬停效果技巧</a></div> <div class="opt"> <span><i class="view"></i>501</span> <span class="collectBtn user_collection" data-id="619053" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 4个月前 | </div> <div class="tit lineOverflow"><a href="/article/618916.html" title="JavaScript符号类型详解与应用" class="aBlack">JavaScript符号类型详解与应用</a></div> <div class="opt"> <span><i class="view"></i>501</span> <span class="collectBtn user_collection" data-id="618916" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 4个月前 | </div> <div class="tit lineOverflow"><a href="/article/612539.html" title="HTML剪贴板复制粘贴怎么用" class="aBlack">HTML剪贴板复制粘贴怎么用</a></div> <div class="opt"> <span><i class="view"></i>501</span> <span class="collectBtn user_collection" data-id="612539" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> </ul> </div> <!-- 最新阅读 --> <div class="contBoxNor"> <div class="contTit"> <div class="tit">最新阅读</div> <a href="/articlelist.html" class="more">更多></a> </div> <ul class="latestReadList"> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 31分钟前 | <a href="/articletag/616_new_0_1.html" class="aLightGray" title="文件上传">文件上传</a> · <a href="/articletag/4701_new_0_1.html" class="aLightGray" title="javascript">javascript</a> · <a href="/articletag/5401_new_0_1.html" class="aLightGray" title="前端开发">前端开发</a> · <a href="javascript:;" class="aLightGray" title="大文件上传">大文件上传</a> <a href="javascript:;" class="aLightGray" title="断点续传">断点续传</a> <a href="javascript:;" class="aLightGray" title="XMLHttpRequest">XMLHttpRequest</a> <a href="javascript:;" class="aLightGray" title="Blob.slice">Blob.slice</a> <a href="javascript:;" class="aLightGray" title="前端分片上传">前端分片上传</a> <a href="javascript:;" class="aLightGray" title="暂停上传">暂停上传</a> </div> <div class="tit lineOverflow"><a href="/article/630048.html" title="前端上传大文件：分片、暂停与失败续传怎样协作" class="aBlack">前端上传大文件：分片、暂停与失败续传怎样协作</a></div> <div class="opt"> <span><i class="view"></i>371</span> <span class="collectBtn user_collection" data-id="630048" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 2小时前 | <a href="javascript:;" class="aLightGray" title="列表详情">列表详情</a> <a href="javascript:;" class="aLightGray" title="View Transition API">View Transition API</a> <a href="javascript:;" class="aLightGray" title="前端渐进增强">前端渐进增强</a> </div> <div class="tit lineOverflow"><a href="/article/630024.html" title="View Transition API 做列表到详情过渡的渐进增强" class="aBlack">View Transition API 做列表到详情过渡的渐进增强</a></div> <div class="opt"> <span><i class="view"></i>385</span> <span class="collectBtn user_collection" data-id="630024" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 4小时前 | </div> <div class="tit lineOverflow"><a href="/article/629998.html" title="用 CSS Container Query 让卡片按容器而不是视口响应" class="aBlack">用 CSS Container Query 让卡片按容器而不是视口响应</a></div> <div class="opt"> <span><i class="view"></i>289</span> <span class="collectBtn user_collection" data-id="629998" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 7小时前 | <a href="javascript:;" class="aLightGray" title="环境变量">环境变量</a> <a href="javascript:;" class="aLightGray" title="vite">vite</a> <a href="javascript:;" class="aLightGray" title="loadEnv">loadEnv</a> <a href="javascript:;" class="aLightGray" title="vite.config">vite.config</a> </div> <div class="tit lineOverflow"><a href="/article/629976.html" title="Vite 环境变量为什么在配置加载时取不到" class="aBlack">Vite 环境变量为什么在配置加载时取不到</a></div> <div class="opt"> <span><i class="view"></i>133</span> <span class="collectBtn user_collection" data-id="629976" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 8小时前 | </div> <div class="tit lineOverflow"><a href="/article/629964.html" title="React useOptimistic 怎么在请求失败时回滚列表" class="aBlack">React useOptimistic 怎么在请求失败时回滚列表</a></div> <div class="opt"> <span><i class="view"></i>153</span> <span class="collectBtn user_collection" data-id="629964" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 10小时前 | <a href="/articletag/5401_new_0_1.html" class="aLightGray" title="前端开发">前端开发</a> · <a href="javascript:;" class="aLightGray" title="前端路由">前端路由</a> <a href="javascript:;" class="aLightGray" title="hostname">hostname</a> <a href="javascript:;" class="aLightGray" title="URLPattern">URLPattern</a> <a href="javascript:;" class="aLightGray" title="pathname">pathname</a> </div> <div class="tit lineOverflow"><a href="/article/629940.html" title="URLPattern 怎么同时匹配域名和路径参数" class="aBlack">URLPattern 怎么同时匹配域名和路径参数</a></div> <div class="opt"> <span><i class="view"></i>108</span> <span class="collectBtn user_collection" data-id="629940" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 12小时前 | <a href="/articletag/4701_new_0_1.html" class="aLightGray" title="javascript">javascript</a> · <a href="javascript:;" class="aLightGray" title="JavaScript">JavaScript</a> <a href="javascript:;" class="aLightGray" title="Intl.DurationFormat">Intl.DurationFormat</a> <a href="javascript:;" class="aLightGray" title="前端国际化">前端国际化</a> <a href="javascript:;" class="aLightGray" title="持续时间格式化">持续时间格式化</a> </div> <div class="tit lineOverflow"><a href="/article/629916.html" title="Intl.DurationFormat 怎么本地化显示持续时间" class="aBlack">Intl.DurationFormat 怎么本地化显示持续时间</a></div> <div class="opt"> <span><i class="view"></i>141</span> <span class="collectBtn user_collection" data-id="629916" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 14小时前 | <a href="/articletag/5401_new_0_1.html" class="aLightGray" title="前端开发">前端开发</a> · <a href="/articletag/40054_new_0_1.html" class="aLightGray" title="浏览器API">浏览器API</a> · <a href="javascript:;" class="aLightGray" title="postMessage">postMessage</a> <a href="javascript:;" class="aLightGray" title="MessageChannel">MessageChannel</a> <a href="javascript:;" class="aLightGray" title="Web Worker">Web Worker</a> <a href="javascript:;" class="aLightGray" title="MessagePort">MessagePort</a> </div> <div class="tit lineOverflow"><a href="/article/629893.html" title="postMessage 转移 MessagePort 后原端口还能用吗" class="aBlack">postMessage 转移 MessagePort 后原端口还能用吗</a></div> <div class="opt"> <span><i class="view"></i>477</span> <span class="collectBtn user_collection" data-id="629893" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 16小时前 | <a href="/articletag/240_new_0_1.html" class="aLightGray" title="html">html</a> · <a href="/articletag/243_new_0_1.html" class="aLightGray" title="前端">前端</a> · <a href="javascript:;" class="aLightGray" title="LCP">LCP</a> <a href="javascript:;" class="aLightGray" title="fetchpriority">fetchpriority</a> <a href="javascript:;" class="aLightGray" title="HTMLImageElement.fetchPriority">HTMLImageElement.fetchPriority</a> <a href="javascript:;" class="aLightGray" title="首屏图片">首屏图片</a> <a href="javascript:;" class="aLightGray" title="图片加载优先级">图片加载优先级</a> </div> <div class="tit lineOverflow"><a href="/article/629874.html" title="fetchpriority 怎么只提升首屏关键图片" class="aBlack">fetchpriority 怎么只提升首屏关键图片</a></div> <div class="opt"> <span><i class="view"></i>343</span> <span class="collectBtn user_collection" data-id="629874" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 19小时前 | </div> <div class="tit lineOverflow"><a href="/article/629845.html" title="AbortSignal.any 怎么合并超时和用户取消" class="aBlack">AbortSignal.any 怎么合并超时和用户取消</a></div> <div class="opt"> <span><i class="view"></i>106</span> <span class="collectBtn user_collection" data-id="629845" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 23小时前 | <a href="/articletag/243_new_0_1.html" class="aLightGray" title="前端">前端</a> · <a href="/articletag/729_new_0_1.html" class="aLightGray" title="性能优化">性能优化</a> · <a href="/articletag/4701_new_0_1.html" class="aLightGray" title="javascript">javascript</a> · <a href="javascript:;" class="aLightGray" title="scheduler.postTask">scheduler.postTask</a> <a href="javascript:;" class="aLightGray" title="TaskController">TaskController</a> <a href="javascript:;" class="aLightGray" title="Prioritized Task Scheduling API">Prioritized Task Scheduling API</a> <a href="javascript:;" class="aLightGray" title="TaskSignal">TaskSignal</a> <a href="javascript:;" class="aLightGray" title="JavaScript任务优先级">JavaScript任务优先级</a> </div> <div class="tit lineOverflow"><a href="/article/629802.html" title="Scheduler.postTask 怎么设置任务优先级" class="aBlack">Scheduler.postTask 怎么设置任务优先级</a></div> <div class="opt"> <span><i class="view"></i>148</span> <span class="collectBtn user_collection" data-id="629802" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 1天前 | <a href="/articletag/243_new_0_1.html" class="aLightGray" title="前端">前端</a> · <a href="javascript:;" class="aLightGray" title="View Transition API">View Transition API</a> <a href="javascript:;" class="aLightGray" title="startViewTransition">startViewTransition</a> <a href="javascript:;" class="aLightGray" title="ViewTransitionTypeSet">ViewTransitionTypeSet</a> <a href="javascript:;" class="aLightGray" title="pageswap">pageswap</a> <a href="javascript:;" class="aLightGray" title="pagereveal">pagereveal</a> </div> <div class="tit lineOverflow"><a href="/article/629754.html" title="View Transition types 怎么为不同导航选择动画" class="aBlack">View Transition types 怎么为不同导航选择动画</a></div> <div class="opt"> <span><i class="view"></i>195</span> <span class="collectBtn user_collection" data-id="629754" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> </ul> </div> <!-- 课程推荐 --> <div class="contBoxNor"> <div class="contTit"> <div class="tit">课程推荐</div> <a href="/courselist.html" class="more">更多></a> </div> <ul class="classRecomList"> <li> <a href="/course/9.html" title="前端进阶之JavaScript设计模式" class="img_box"> <img src="/uploads/20221222/52fd0f23a454c71029c2c72d206ed815.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="前端进阶之JavaScript设计模式"> </a> <dl> <dt class="lineOverflow"> 前端进阶之JavaScript设计模式 </dt> <dd class="cont1 lineOverflow">设计模式是开发人员在软件开发过程中面临一般问题时的解决方案，代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景，打造一站式知识长龙服务，适合有JS基础的同学学习。</dd> <dd class="cont2"> <a href="/course/9.html" title="前端进阶之JavaScript设计模式" class="toStudy">立即学习</a> <span>543次学习</span> </dd> </dl> </li> <li> <a href="/course/2.html" title="GO语言核心编程课程" class="img_box"> <img src="/uploads/20221221/634ad7404159bfefc6a54a564d437b5f.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="GO语言核心编程课程"> </a> <dl> <dt class="lineOverflow"> GO语言核心编程课程 </dt> <dd class="cont1 lineOverflow">本课程采用真实案例，全面具体可落地，从理论到实践，一步一步将GO核心编程技术、编程思想、底层实现融会贯通，使学习者贴近时代脉搏，做IT互联网时代的弄潮儿。</dd> <dd class="cont2"> <a href="/course/2.html" title="GO语言核心编程课程" class="toStudy">立即学习</a> <span>516次学习</span> </dd> </dl> </li> <li> <a href="/course/74.html" title="简单聊聊mysql8与网络通信" class="img_box"> <img src="/uploads/20240103/bad35fe14edbd214bee16f88343ac57c.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="简单聊聊mysql8与网络通信"> </a> <dl> <dt class="lineOverflow"> 简单聊聊mysql8与网络通信 </dt> <dd class="cont1 lineOverflow">如有问题加微信：Le-studyg；在课程中，我们将首先介绍MySQL8的新特性，包括性能优化、安全增强、新数据类型等，帮助学生快速熟悉MySQL8的最新功能。接着，我们将深入解析MySQL的网络通信机制，包括协议、连接管理、数据传输等，让</dd> <dd class="cont2"> <a href="/course/74.html" title="简单聊聊mysql8与网络通信" class="toStudy">立即学习</a> <span>500次学习</span> </dd> </dl> </li> <li> <a href="/course/57.html" title="JavaScript正则表达式基础与实战" class="img_box"> <img src="/uploads/20221226/bbe4083bb3cb0dd135fb02c31c3785fb.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="JavaScript正则表达式基础与实战"> </a> <dl> <dt class="lineOverflow"> JavaScript正则表达式基础与实战 </dt> <dd class="cont1 lineOverflow">在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。</dd> <dd class="cont2"> <a href="/course/57.html" title="JavaScript正则表达式基础与实战" class="toStudy">立即学习</a> <span>487次学习</span> </dd> </dl> </li> <li> <a href="/course/28.html" title="从零制作响应式网站—Grid布局" class="img_box"> <img src="/uploads/20221223/ac110f88206daeab6c0cf38ebf5fe9ed.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="从零制作响应式网站—Grid布局"> </a> <dl> <dt class="lineOverflow"> 从零制作响应式网站—Grid布局 </dt> <dd class="cont1 lineOverflow">本系列教程将展示从零制作一个假想的网络科技公司官网，分为导航，轮播，关于我们，成功案例，服务流程，团队介绍，数据部分，公司动态，底部信息等内容区块。网站整体采用CSSGrid布局，支持响应式，有流畅过渡和展现动画。</dd> <dd class="cont2"> <a href="/course/28.html" title="从零制作响应式网站—Grid布局" class="toStudy">立即学习</a> <span>485次学习</span> </dd> </dl> </li> </ul> </div> </div> <!-- footer --> <div class="footer"> <ul> <li ><a href="/" class="aLightGray"><em class="navIcon navIconHome"></em><span>首页</span></a></li> <li class="curr"><a href="/articlelist.html" class="aLightGray"><em class="navIcon navIconRead"></em><span>阅读</span></a></li> <li ><a href="/courselist.html" class="aLightGray"><em class="navIcon navIconCourse"></em><span>课程</span></a></li> <li ><a href="/ai.html" class="aLightGray"><em class="navIcon navIconAi"></em><span>AI助手</span></a></li> <li ><a href="/user.html" class="aLightGray"><em class="navIcon navIconUser"></em><span>我的</span></a></li> </ul> </div> <script src="/assets/js/frontend/common.js" defer></script> <script src="/assets/js/juejin-theme.js?v=20260613b" defer></script> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?e34c3e8ab31ba35d7e1c48ea8d77315f"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </body> </html>