首页 > 文章 > 前端

HTML插入天气模块方法_实时天气Widget教程

时间：2026-05-26 09:58:30 415浏览收藏

本文详解了在HTML页面中嵌入实时天气模块的两种主流方案：一是直接使用支持HTTPS且无域名限制的第三方iframe小部件（如weatherapi.com官方embed），简单快捷但可能含广告；二是通过weatherapi.com等前端友好API自主调用，需注册key、注意q参数用英文城市名、禁用aqi以优化性能，并规避CORS跨域问题——强调切勿尝试纯HTML/CSS实现或盲目套用未配key/未走代理的fetch示例，同时指出本地file://协议和HTTP混合内容是常见失败根源，给出清晰排查路径与务实建议。

HTML怎么插入天气信息模块_HTML weather widget嵌入教程【实时】

用 </code> 嵌入第三方天气小部件最简单，但得选对服务商</h3> <p>绝大多数所谓“HTML 插入天气模块”本质就是嵌一个外部 iframe，不是自己写 JS 请求 API。主流免费服务如 Weather.com、AccuWeather、WeatherAPI 的 widget 都提供现成的 HTML 代码，复制粘贴就行。但注意：它们默认带广告、有域名白名单限制（比如只允许在 localhost 或指定域名下显示），本地双击打开 <code>index.html</code> 会直接空白或报错 CORS。</p> <ul><li>优先选支持 HTTPS 且明确标注 “no domain restriction” 的 widget（例如 <code>weatherapi.com</code> 的官方 embed）</li> <li>别信“纯 HTML+CSS 实现天气”的教程——没有 JS 请求接口，根本拿不到实时数据</li> <li>如果页面已用 HTTPS，嵌入 HTTP 地址的 iframe 会被浏览器拦截，必须确认 widget 地址以 <code>https://</code> 开头</li> </ul><h3><code>fetch()</code> 调用天气 API 需要后端代理或 CORS 支持</h3> <p>想完全自定义样式或避开 iframe 广告？得自己发请求。但直接在前端用 <code>fetch()</code> 调 <code>openweathermap.org/api</code> 这类公开 API，99% 会失败——因为这些接口默认不返回 <code>Access-Control-Allow-Origin: </code>，浏览器直接拦掉。</p> <ul><li>常见错误现象：<code>Failed to load resource: net::ERR_FAILED</code> 或控制台报 <code>CORS policy: No 'Access-Control-Allow-Origin' header</code></li> <li>可行方案只有两个：走自己搭的轻量代理（比如用 Cloudflare Workers 转发请求），或选原生支持前端直连的 API（如 <code>weatherapi.com</code> 免费版允许前端调用，但需注册获取 <code>key</code>）</li> <li>别硬套教程里的 <code>fetch('http://api.xxx')</code> 示例——没配 key 或没走代理，一定挂</li> </ul><h3>用 <code>weatherapi.com</code> 的 <code>current.json</code> 接口实操示例</h3> <p>这是目前对前端最友好的免费选择：无需后端、响应快、文档清晰。关键点是把 <code>key</code> 放 URL 里，且必须用 HTTPS。</p> <pre class="brush:php;toolbar:false">fetch('https://api.weatherapi.com/v1/current.json?key=YOUR_KEY&q=Shanghai&aqi=no') .then(res => res.json()) .then(data => { document.getElementById('weather').textContent = `${data.location.name}: ${data.current.temp_c}°C, ${data.current.condition.text}`; });</pre> <ul><li><code>q</code> 参数支持城市名、IP、经纬度，但别传中文（会 400 错误），用拼音或英文名，如 <code>q=Beijing</code></li> <li><code>aqi=no</code> 关掉空气质量数据，减少响应体积；需要就改成 <code>yes</code></li> <li>免费版限 100 万次/月，但每小时最多 30 次——别在 <code>setInterval</code> 里每秒刷一次</li> </ul><h3>本地开发时 iframe 白屏 / API 报错，先查这三件事</h3> <p>不是代码写错了，大概率是环境或配置卡住了。</p> <ul><li>打开浏览器开发者工具，看 Network 标签页里 iframe 的请求状态码是不是 <code>403</code>（被服务商拒绝）或 <code>0</code>（混合内容拦截）</li> <li>检查当前页面地址栏是不是 <code>file:///</code> 开头——所有基于 CORS 的 API 和多数 iframe widget 都不支持本地文件协议</li> <li>用 <code>curl -I https://api.weatherapi.com/...</code> 测试接口是否能通，排除网络或 key 失效问题</li> </ul><p>天气数据本身没多复杂，难的是绕过浏览器安全策略和第三方服务限制。真要稳定用，要么老老实实嵌 iframe（接受广告和样式限制），要么加一层极简代理（几行 Cloudflare Workers 就够）。别在 CORS 上死磕。 </p><p>文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《HTML插入天气模块方法_实时天气Widget教程》文章吧，也可关注golang学习网公众号了解相关技术文章。</p> <div id="third-party-overlay" style="position:fixed;left:0;top:0;width:100%;height:100%;display:none;justify-content:center;align-items:center;background:rgba(0,0,0,0.4);z-index:9999;"> <div style="background:#FFF3CD;border:1px solid #FFEEBA;padding:16px;border-radius:6px;box-sizing:border-box;max-width:480px;width:90%;text-align:center;"> <div style="font-size:14px;color:#856404;margin-bottom:12px;">您即将跳转至第三方网站，请注意保护好个人信息和财产安全！</div> <a href="https://comicdow.pdlcomic.top/1273%2F%E5%9B%A7%E6%AC%A1%E5%85%83.apk" target="_blank" rel="nofollow noopener noreferrer" style="color:#2d8cf0;text-decoration:none;" onclick="showThirdParty('none');">继续访问</a> </div> </div> <script> function showThirdParty(mode){ var el = document.getElementById('third-party-overlay'); if (!el) return; el.style.display = (mode === 'none' ? 'none' : 'flex'); } </script> </div> <div class="labsList"> </div> </div> <div class="contBoxNor"> <div class="contTit"> <div class="tit">资料下载</div> </div> <ul class="classRecomList"> <li> <a href="https://pan.quark.cn/s/ba8ef670cabd" rel="nofollow" target="_blank" title="编程学习资料下载" class="img_box"> <img loading="lazy" src="/assets/images/xuexiziliao.jpeg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="编程学习资料下载"> </a> <dl> <dt class="lineOverflow"> <a href="https://pan.quark.cn/s/ba8ef670cabd" rel="nofollow" target="_blank" class="aBlack" title="编程学习资料下载">编程学习资料下载</a> </dt> <dd class="cont1 lineTwoOverflow"> 精选编程（Golang、Python、Java、C++、JavaScript等）教程、电子书与示例源码，一键打包本地下载学习。 </dd> <dd class="cont2"> <a href="https://pan.quark.cn/s/ba8ef670cabd" rel="nofollow" target="_blank" class="toStudy">立即下载</a> </dd> </dl> </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>   |  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>   |  2年前  |   <a href="javascript:;" class="aLightGray" title="CSS">CSS</a> <a href="javascript:;" class="aLightGray" title="优化">优化</a> <a href="javascript:;" class="aLightGray" title="体验">体验</a> </div> <div class="tit lineOverflow"><a href="/article/72840.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="72840" 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="微信小程序">微信小程序</a> <a href="javascript:;" class="aLightGray" title="特效">特效</a> </div> <div class="tit lineOverflow"><a href="/article/76259.html" title="使用微信小程序实现图片轮播特效" class="aBlack">使用微信小程序实现图片轮播特效</a></div> <div class="opt"> <span><i class="view"></i>501</span> <span class="collectBtn user_collection" data-id="76259" 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="sessionStorage">sessionStorage</a> <a href="javascript:;" class="aLightGray" title="存储能力">存储能力</a> <a href="javascript:;" class="aLightGray" title="限制解析">限制解析</a> </div> <div class="tit lineOverflow"><a href="/article/83771.html" title="解析sessionStorage的存储能力与限制" class="aBlack">解析sessionStorage的存储能力与限制</a></div> <div class="opt"> <span><i class="view"></i>501</span> <span class="collectBtn user_collection" data-id="83771" 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="冒泡事件">冒泡事件</a> <a href="javascript:;" class="aLightGray" title="促进作用">促进作用</a> </div> <div class="tit lineOverflow"><a href="/article/85057.html" title="探索冒泡活动对于团队合作的推动力" class="aBlack">探索冒泡活动对于团队合作的推动力</a></div> <div class="opt"> <span><i class="view"></i>501</span> <span class="collectBtn user_collection" data-id="85057" 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>   |  10分钟前  |   </div> <div class="tit lineOverflow"><a href="/article/612109.html" title="对象方法简写重构异步系统核心链路" class="aBlack">对象方法简写重构异步系统核心链路</a></div> <div class="opt"> <span><i class="view"></i>124</span> <span class="collectBtn user_collection" data-id="612109" 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>   |  17分钟前  |   </div> <div class="tit lineOverflow"><a href="/article/612101.html" title="CSS标题前加装饰线不加标签，可通过 ::before 伪元素实现。具体方法如下：✅ 实现方式使用 ::before 伪元素，在标题前插入横线，无需添加额外 HTML 标签。示例代码：.title::before { content: ''; display: inline-block; width: 100px; / 横线长度 / height: 2px; /" class="aBlack">CSS标题前加装饰线不加标签，可通过 ::before 伪元素实现。具体方法如下：✅ 实现方式使用 ::before 伪元素，在标题前插入横线，无需添加额外 HTML 标签。示例代码：.title::before { content: ''; display: inline-block; width: 100px; / 横线长度 */ height: 2px; /</a></div> <div class="opt"> <span><i class="view"></i>227</span> <span class="collectBtn user_collection" data-id="612101" 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>   |  29分钟前  |   </div> <div class="tit lineOverflow"><a href="/article/612085.html" title="CSS设置宽度后布局被撑开，使用box-sizing: border-box解决" class="aBlack">CSS设置宽度后布局被撑开，使用box-sizing: border-box解决</a></div> <div class="opt"> <span><i class="view"></i>266</span> <span class="collectBtn user_collection" data-id="612085" 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>   |  37分钟前  |   </div> <div class="tit lineOverflow"><a href="/article/612073.html" title="绝对定位元素居中技巧" class="aBlack">绝对定位元素居中技巧</a></div> <div class="opt"> <span><i class="view"></i>217</span> <span class="collectBtn user_collection" data-id="612073" 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>   |  43分钟前  |   </div> <div class="tit lineOverflow"><a href="/article/612067.html" title="输入框聚焦动画实现教程" class="aBlack">输入框聚焦动画实现教程</a></div> <div class="opt"> <span><i class="view"></i>445</span> <span class="collectBtn user_collection" data-id="612067" 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>   |  45分钟前  |   </div> <div class="tit lineOverflow"><a href="/article/612066.html" title="JavaScript作用域链与变量提升解析" class="aBlack">JavaScript作用域链与变量提升解析</a></div> <div class="opt"> <span><i class="view"></i>364</span> <span class="collectBtn user_collection" data-id="612066" 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>   |  49分钟前  |   </div> <div class="tit lineOverflow"><a href="/article/612063.html" title="HTML垂直居中设置方法详解" class="aBlack">HTML垂直居中设置方法详解</a></div> <div class="opt"> <span><i class="view"></i>171</span> <span class="collectBtn user_collection" data-id="612063" 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>   |  51分钟前  |   </div> <div class="tit lineOverflow"><a href="/article/612062.html" title="CSS实现列表项删除时向右飘走渐隐，主要依赖于CSS动画和过渡效果。以下是一个简单的示例，展示如何通过CSS实现这一效果。实现思路使用CSS动画：定义一个关键帧动画（@keyframes），使元素在删除时向右移动并逐渐透明。添加过渡效果：通过transition属性让动画更平滑。JavaScript触发动画：当用户点击删除按钮时，触发动画并移除元素。示例代码HTML<ul id="myList">" class="aBlack">CSS实现列表项删除时向右飘走渐隐，主要依赖于CSS动画和过渡效果。以下是一个简单的示例，展示如何通过CSS实现这一效果。实现思路使用CSS动画：定义一个关键帧动画（@keyframes），使元素在删除时向右移动并逐渐透明。添加过渡效果：通过transition属性让动画更平滑。JavaScript触发动画：当用户点击删除按钮时，触发动画并移除元素。示例代码HTML<ul id="myList"></a></div> <div class="opt"> <span><i class="view"></i>425</span> <span class="collectBtn user_collection" data-id="612062" 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>   |  58分钟前  |   </div> <div class="tit lineOverflow"><a href="/article/612056.html" title="如何固定表格首列颜色_td:first-child设置方法" class="aBlack">如何固定表格首列颜色_td:first-child设置方法</a></div> <div class="opt"> <span><i class="view"></i>159</span> <span class="collectBtn user_collection" data-id="612056" 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小时前  |   </div> <div class="tit lineOverflow"><a href="/article/612051.html" title="Tailwind CSS位移动画技巧：translate类应用解析" class="aBlack">Tailwind CSS位移动画技巧：translate类应用解析</a></div> <div class="opt"> <span><i class="view"></i>382</span> <span class="collectBtn user_collection" data-id="612051" 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小时前  |   </div> <div class="tit lineOverflow"><a href="/article/612043.html" title="HTML录音无法支持媒体流怎么办" class="aBlack">HTML录音无法支持媒体流怎么办</a></div> <div class="opt"> <span><i class="view"></i>320</span> <span class="collectBtn user_collection" data-id="612043" 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小时前  |   </div> <div class="tit lineOverflow"><a href="/article/612042.html" title="JavaScript深拷贝与浅拷贝区别及注意事项" class="aBlack">JavaScript深拷贝与浅拷贝区别及注意事项</a></div> <div class="opt"> <span><i class="view"></i>189</span> <span class="collectBtn user_collection" data-id="612042" 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 loading="lazy" 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 loading="lazy" 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 loading="lazy" 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 loading="lazy" 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 loading="lazy" 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>  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <div class="footer"> <ul> <li ><a href="/" class="aLightGray"><em class="material-icons">home</em><span>首页</span></a></li> <li class="curr"><a href="/articlelist.html" class="aLightGray"><em class="material-icons">menu_book</em><span>阅读</span></a></li> <li ><a href="/courselist.html" class="aLightGray"><em class="material-icons">school</em><span>课程</span></a></li> <li ><a href="/ai.html" class="aLightGray"><em class="material-icons">smart_toy</em><span>AI助手</span></a></li> <li ><a href="/user.html" class="aLightGray"><em class="material-icons">person</em><span>我的</span></a></li> </ul> </div> <script src="/assets/js/require.js" data-main="/assets/js/require-frontend.js?v=1671101972"></script> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?3dc5666f6478c7bf39cd5c91e597423d"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script src="/assets/js/SyntaxHighlighter/shCore.js?3.1.1"></script> <script> document.addEventListener('DOMContentLoaded', function () { if (document.querySelector('.cont pre')) { SyntaxHighlighter.all(); } }); </script> </body> </html>