首页 > 文章 > 前端

iframe怎么用？HTML嵌入方法详解

时间：2025-08-24 11:53:04 167浏览收藏

**iframe怎么用？HTML嵌入网页方法解析**。想知道如何在HTML中嵌入网页吗？``标签是关键！本文详细解析了`<iframe>`标签的用法，通过设置`src`属性，轻松将外部页面嵌入到你的网页中。我们不仅讲解了`<iframe>`的基本语法和属性设置，还深入探讨了它的优点与缺点。`<iframe>`的隔离性使其成为嵌入广告和视频的理想选择，但同时也存在加载时间增加和影响SEO的潜在问题。更重要的是，我们提供了解决SEO问题和保障`<iframe>`安全性的实用技巧，例如避免过度使用、提供文字描述以及启用`sandbox`属性。此外，本文还对比了`<iframe>`和`<object>`标签的区别，助你选择最适合的嵌入方式。掌握`<iframe>`，让你的网页内容更加丰富多彩！

使用标签可嵌入外部页面，通过设置src属性指定URL，width和height定义尺寸；2. iframe具有隔离性，利于嵌入广告、视频等内容且不影响主页面运行；3. 缺点包括增加加载时间、影响SEO及潜在安全风险；4. 可通过window.postMessage实现跨域通信，但需验证消息来源防止XSS攻击；5. 解决SEO问题的方法包括避免使用iframe、提供文字描述及使用title属性；6. 安全措施包括启用sandbox属性、仅嵌入可信来源、使用HTTPS并定期检查内容；7. 与<object>标签相比，iframe专用于HTML页面嵌入且兼容性更好，而object支持多种媒体类型且功能更广。</p><p><img src="/uploads/20250824/175600752868aa8c68a6486.png" alt="HTML如何插入iframe？iframe标签的作用是什么？"></p><p>HTML中插入<code>iframe</code>，简单来说，就是用<code><iframe></code>标签。它的作用是在当前HTML页面中嵌入另一个HTML页面。想想看，就像在一个电视屏幕里放另一个电视节目一样，方便得很。</p><p>解决方案：</p><p>使用<code><iframe></code>标签，设置<code>src</code>属性为要嵌入的页面URL。可以设置<code>width</code>和<code>height</code>属性来调整<code>iframe</code>的大小。</p><pre class="brush:html;toolbar:false;"><iframe src="https://www.example.com" width="600" style="max-width:100%">

</code>标签的<code>src</code>属性是必须的，它指定了要嵌入的页面的地址。<code>width</code>和<code>height</code>属性是可选的，用于设置<code>iframe</code>的宽度和高度。如果没有设置，浏览器会使用默认值。</p><p>iframe还有一些其他的属性，比如<code>frameborder</code>（定义是否显示边框，0为无边框，1为有边框，现在通常使用CSS来控制边框），<code>allowfullscreen</code>（允许iframe全屏显示），以及<code>sandbox</code>（用于限制iframe内的代码执行权限，增强安全性）。</p><p><code><iframe></code>可以用来嵌入广告、地图、视频，或者其他网站的内容。比如，你可以在你的网站上嵌入一个YouTube视频，或者一个Google地图。</p><p>为什么需要使用<code><iframe></code>？</p><p><code><iframe></code>的最大好处是隔离性。嵌入的页面运行在独立的上下文中，这意味着它可以减少与主页面的冲突。比如，嵌入的广告脚本出错，通常不会影响主页面的正常运行。另外，<code><iframe></code>可以方便地引入第三方内容，而不需要修改主页面的代码。</p><p><code><iframe></code>的缺点也很明显。首先，它会增加页面的加载时间，因为浏览器需要加载额外的资源。其次，<code><iframe></code>可能会影响页面的SEO，因为搜索引擎可能无法正确地索引<code><iframe></code>中的内容。此外，<code><iframe></code>的安全性也是一个需要考虑的问题，因为嵌入的页面可能会包含恶意代码。</p><p><code><iframe></code>的内容如何与父页面交互？</p><p><code><iframe></code>和父页面可以通过<code>window.postMessage</code>方法进行跨域通信。这种方法允许不同域的页面之间安全地传递消息。具体来说，父页面可以使用<code>iframe.contentWindow.postMessage</code>方法向<code><iframe></code>发送消息，而<code><iframe></code>可以使用<code>window.parent.postMessage</code>方法向父页面发送消息。</p><p>例如，父页面向<code><iframe></code>发送消息：</p><pre class="brush:javascript;toolbar:false;">const iframe = document.getElementById('myIframe'); iframe.contentWindow.postMessage('Hello from parent!', 'https://www.example.com');</pre><p><code><iframe></code>接收消息：</p><pre class="brush:javascript;toolbar:false;">window.addEventListener('message', function(event) { if (event.origin !== 'https://www.yourdomain.com') return; // 验证消息来源 console.log('Message received: ' + event.data); }, false);</pre><p>使用<code>window.postMessage</code>时，一定要验证消息的来源，以防止跨站脚本攻击（XSS）。</p><p>如何解决<code><iframe></code>带来的SEO问题？</p><p><code><iframe></code>中的内容不容易被搜索引擎索引，这可能会影响页面的SEO。为了解决这个问题，可以尝试以下方法：</p><ul><li>尽量避免使用<code><iframe></code>，如果可以，考虑使用服务器端包含（SSI）或者AJAX来加载内容。</li><li>如果必须使用<code><iframe></code>，确保<code><iframe></code>中的内容对用户有价值，并且与主页面的主题相关。</li><li>使用<code><iframe></code>的<code>title</code>属性来描述<code><iframe></code>中的内容，这可以帮助搜索引擎理解<code><iframe></code>的作用。</li><li>在主页面上提供<code><iframe></code>内容的文字描述，这可以帮助搜索引擎索引<code><iframe></code>中的内容。</li></ul><p><code><iframe></code>的安全性如何保障？</p><p><code><iframe></code>的安全性是一个需要认真考虑的问题。为了保障<code><iframe></code>的安全性，可以采取以下措施：</p><ul><li>使用<code>sandbox</code>属性来限制<code><iframe></code>内的代码执行权限。<code>sandbox</code>属性可以禁用<code><iframe></code>内的脚本、表单提交、Cookie等功能，从而减少安全风险。</li><li>只嵌入来自信任来源的页面。不要嵌入来自未知或者不可信来源的页面，因为这些页面可能会包含恶意代码。</li><li>使用HTTPS协议来加载<code><iframe></code>，这可以防止中间人攻击。</li><li>定期检查<code><iframe></code>中的内容，确保没有安全问题。</li></ul><p><code><iframe></code>和<code>object</code>标签有什么区别？</p><p><code><iframe></code>和<code><object></code>标签都可以用来嵌入内容，但它们之间有一些区别。<code><iframe></code>主要用于嵌入HTML页面，而<code><object></code>可以嵌入各种类型的内容，包括图片、音频、视频、Flash动画等。<code><iframe></code>的兼容性更好，而<code><object></code>的功能更强大。在选择使用哪个标签时，需要根据具体的需求来决定。</p><p>以上就是《iframe怎么用？HTML嵌入方法详解》的详细内容，更多关于iframe,安全性,SEO,src属性,HTML嵌入网页的资料请关注golang学习网公众号！</p> </div> <div class="labsList"> <a href="javascript:;" class="aLightGray" title="iframe">iframe</a> <a href="javascript:;" class="aLightGray" title="安全性">安全性</a> <a href="javascript:;" class="aLightGray" title="SEO">SEO</a> <a href="javascript:;" class="aLightGray" title="src属性">src属性</a> <a href="javascript:;" class="aLightGray" title="HTML嵌入网页">HTML嵌入网页</a> </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="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>   |  1年前  |   <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>   |  1年前  |   <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>   |  1年前  |   <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> <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/91359.html" title="UI设计中为何选择绝对定位的智慧之道" class="aBlack">UI设计中为何选择绝对定位的智慧之道</a></div> <div class="opt"> <span><i class="view"></i>501</span> <span class="collectBtn user_collection" data-id="91359" 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>   |  59秒前  |   </div> <div class="tit lineOverflow"><a href="/article/296686.html" title="CSS旋转加载动画教程" class="aBlack">CSS旋转加载动画教程</a></div> <div class="opt"> <span><i class="view"></i>423</span> <span class="collectBtn user_collection" data-id="296686" 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分钟前  |   </div> <div class="tit lineOverflow"><a href="/article/296685.html" title="JS中pullAll移除数组多个值的用法" class="aBlack">JS中pullAll移除数组多个值的用法</a></div> <div class="opt"> <span><i class="view"></i>127</span> <span class="collectBtn user_collection" data-id="296685" 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>   |  5分钟前  |   </div> <div class="tit lineOverflow"><a href="/article/296681.html" title="JS消息推送的几种实现方法" class="aBlack">JS消息推送的几种实现方法</a></div> <div class="opt"> <span><i class="view"></i>312</span> <span class="collectBtn user_collection" data-id="296681" 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>   |  5分钟前  |   </div> <div class="tit lineOverflow"><a href="/article/296680.html" title="JS实现机器学习方法全解析" class="aBlack">JS实现机器学习方法全解析</a></div> <div class="opt"> <span><i class="view"></i>323</span> <span class="collectBtn user_collection" data-id="296680" 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>   |  18分钟前  |   <a href="javascript:;" class="aLightGray" title="画中画">画中画</a> <a href="javascript:;" class="aLightGray" title="object-fit">object-fit</a> <a href="javascript:;" class="aLightGray" title="功能检测">功能检测</a> <a href="javascript:;" class="aLightGray" title="::picture-in-picture-media-controls">::picture-in-picture-media-controls</a> <a href="javascript:;" class="aLightGray" title="媒体控制样式">媒体控制样式</a> </div> <div class="tit lineOverflow"><a href="/article/296668.html" title="HTML画中画样式设置方法详解" class="aBlack">HTML画中画样式设置方法详解</a></div> <div class="opt"> <span><i class="view"></i>301</span> <span class="collectBtn user_collection" data-id="296668" 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>   |  22分钟前  |   <a href="javascript:;" class="aLightGray" title="绝对定位">绝对定位</a> <a href="javascript:;" class="aLightGray" title="z-index">z-index</a> <a href="javascript:;" class="aLightGray" title="CSS伪元素">CSS伪元素</a> <a href="javascript:;" class="aLightGray" title="步骤进度连接线">步骤进度连接线</a> <a href="javascript:;" class="aLightGray" title="calc函数">calc函数</a> </div> <div class="tit lineOverflow"><a href="/article/296663.html" title="CSS进度条连接线制作教程" class="aBlack">CSS进度条连接线制作教程</a></div> <div class="opt"> <span><i class="view"></i>257</span> <span class="collectBtn user_collection" data-id="296663" 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>   |  25分钟前  |   </div> <div class="tit lineOverflow"><a href="/article/296661.html" title="JS数组slice方法全解析" class="aBlack">JS数组slice方法全解析</a></div> <div class="opt"> <span><i class="view"></i>207</span> <span class="collectBtn user_collection" data-id="296661" 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>   |  26分钟前  |   </div> <div class="tit lineOverflow"><a href="/article/296658.html" title="JS判断对象是否无原型的方法" class="aBlack">JS判断对象是否无原型的方法</a></div> <div class="opt"> <span><i class="view"></i>391</span> <span class="collectBtn user_collection" data-id="296658" 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>   |  34分钟前  |   </div> <div class="tit lineOverflow"><a href="/article/296652.html" title="CSS水平滚动文字淡出效果实现" class="aBlack">CSS水平滚动文字淡出效果实现</a></div> <div class="opt"> <span><i class="view"></i>196</span> <span class="collectBtn user_collection" data-id="296652" 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>   |  42分钟前  |   <a href="javascript:;" class="aLightGray" title="JavaScript">JavaScript</a> <a href="javascript:;" class="aLightGray" title="HTMLCanvas">HTMLCanvas</a> <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/296645.html" title="HTML钓鱼游戏制作及钩子物理实现详解" class="aBlack">HTML钓鱼游戏制作及钩子物理实现详解</a></div> <div class="opt"> <span><i class="view"></i>461</span> <span class="collectBtn user_collection" data-id="296645" 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>   |  48分钟前  |   </div> <div class="tit lineOverflow"><a href="/article/296641.html" title="HTMLlegend标签作用详解" class="aBlack">HTMLlegend标签作用详解</a></div> <div class="opt"> <span><i class="view"></i>150</span> <span class="collectBtn user_collection" data-id="296641" 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>   |  52分钟前  |   <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="非递归方法">非递归方法</a> </div> <div class="tit lineOverflow"><a href="/article/296637.html" title="汉诺塔问题是什么？递归解法全解析" class="aBlack">汉诺塔问题是什么？递归解法全解析</a></div> <div class="opt"> <span><i class="view"></i>189</span> <span class="collectBtn user_collection" data-id="296637" 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>542次学习</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>511次学习</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>498次学习</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>484次学习</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> </body> </html>