技术文章 > web前端 > html教程

如何将CSS应用于iframe？

WBOY 转载: 2023-08-27 09:53:02 411浏览

如何将CSS应用于iframe？

使用 HTML 标签定义内联框架。 <iframe> 标记与 <frameset> 标记没有某种关系，相反，它可以出现在文档中的任何位置。 <iframe> 标签定义文档内的矩形区域，浏览器可以在其中显示单独的文档，包括滚动条和边框。 src 属性用于指定占据内联框架的文档的 URL。</p> <p>我们可以轻松地将 CSS 应用于 iframe，但让我们首先看看 <iframe> 的属性 -</p> <ul class="list"> <li><p><b>src</b> - 此属性用于给出应在框架中加载的文件名。它的值可以是任何 URL。</p></li> <li><p><b>name</b> - 此属性允许您为框架指定名称。它用于指示文档应该加载到哪个框架。</p></li> <li><p><b>marginheight</b> - 此属性允许您指定框架边框及其内容的顶部和底部之间的空间高度。该值以像素为单位给出。</p></li> <li><p><b>height</b> - 此属性指定 <iframe> 的高度。</p></li> <li><p><b>scrolling</b> - 此属性控制框架上出现的滚动条的外观。该值可以是“yes”、“no”或“auto”。</p></li> <li><p><b>longdesc</b> - 此属性允许您提供指向另一个页面的链接，其中包含框架内容的详细描述。</p></li> <li><p><b>width</b> - 此属性指定 <iframe> 的宽度。</p></li> </ul> <p>现在让我们将 CSS 应用到 iframe。</p> <h2>将内联 CSS 应用到 iframe</h2> <p>style属性用于设置内联css。我们设置了边框、宽度和高度 -</p> <pre class='brush:php;toolbar:false;'><iframe style="border: 2px solid gray; width: 500px; height: 400px;" src="https://www.tutorialspoint.com/market/index.asp" id="Ebooks"> </pre> <h3>示例</h3> <p>让我们看一下例子 -</p> <lt-highlighter contenteditable="false" style="display: none;"><lt-div spellcheck="false" class="lt-highlighter__wrapper" style="width: 654px !important; height: 293.25px !important; transform: none !important; transform-origin: 327px 146.625px !important; zoom: 1 !important;"><lt-div class="lt-highlighter__scroll-element" style="top: 0px !important; left: 0px !important; width: 654px !important; height: 293px !important;"></lt-div></lt-div></lt-highlighter><pre class='brush:html;toolbar:false;'><!DOCTYPE html> <html> <head> </head> <body> <h1>Courses</h1> <iframe style="border: 2px solid gray; width: 500px; height: 400px;" src="https://www.tutorialspoint.com/market/index.asp" id="Ebooks"> </iframe> </body> </html> </pre> <h2>将内部 CSS 应用到 iframe</h2> <p>style标签用于设置iframe的内部css。我们已将 iFrame 样式设置为新的边框、宽度和高度 -</p> <pre class='brush:html;toolbar:false;'>iframe { border: 3px solid green; width: 500px; height: 400px; } </pre> <h3>示例</h3> <p>让我们看一个例子 -</p> <pre class='brush:html;toolbar:false;'><!DOCTYPE html> <html> <head> <style> iframe { border: 3px solid green; width: 500px; height: 400px; } </style> </head> <body> <h1>Courses</h1> <iframe src="https://www.tutorialspoint.com/market/index.asp" id="Ebooks"> </iframe> </body> </html> </pre></p><p>以上就是如何将CSS应用于iframe？的详细内容，更多请关注php中文网其它相关文章！</p> </div> <div class="nphpQianMsg"><a href="//m.sbmmt.com/m/course/list/29/type/2.html">PHP课程</a><a href="//m.sbmmt.com/m/course/list/11.html">HTML视频教程</a><a href="//m.sbmmt.com/m/course/list/12.html">CSS视频</a><a href="//m.sbmmt.com/m/course/list/17.html">JS视频教程</a><a href="//m.sbmmt.com/m/course/list/18.html">Vue视频教程</a><div class="clear"></div></div> <div class="nphpQianSheng"><span>声明：</span>本文转载于：tutorialspoint，如有侵犯，请联系admin@php.cn删除</div>  </div> <script type="text/javascript" src="//m.sbmmt.com/sw/hezuo/16e561434ad42f17963b25d80a9fabeb.html" ></script> <div class="nphpSytBox"> <span>上一条：<a class="dBlack" href="//m.sbmmt.com/m/faq/598311.html">在Fabric.js中，当创建一个用于图像的画布时，HTML5画布层在鼠标点击时消失，而Firefox停止响应</a></span> <span>下一条：<a class="dBlack" href="//m.sbmmt.com/m/faq/598334.html">当浏览器开始在线工作时，在HTML中执行一个脚本吗？</a></span> </div> <div class="wwads-cn wwads-horizontal" data-id="164" style="max-width:100%"></div> <div class="nphpSytBox1"> <div class="nphpShou"> <script type="text/javascript" src="//m.sbmmt.com/sw/hezuo/7295e38849324c4a3f458e359856409d.html" ></script> <div class="clear"></div> </div> <ul class="nphpBian"> <li> <a href="//m.sbmmt.com/m/blog/detail/1046940.html"><span class="bg1"></span><dl><dt>编程学习群</dt><dd>技术答疑交流</dd></dl><div class="clear"></div></a> </li> <li> <a href="javascript:window.location.href = 'https://mp.weixin.qq.com/s?__biz=Mzk0MTE2MDU0Ng==&mid=2247487529&idx=1&sn=f4f9feda0951312daebe69478f219e7a&chksm=c2d7f124f5a0783233d879a6de3c59165dc2520e15813860b5bace817a6e08e530d454abd3c6#rd';"><span class="bg2"></span><dl><dt>关注公众号</dt><dd>获取学习资源</dd></dl><div class="clear"></div></a> </li> <div class="clear"></div> </ul> </div> <div class="nphpSytBox2"> <div class="nphpZbktTitle"> <h2>相关文章</h2> <em><a href="//m.sbmmt.com/m/article.html" class="bBlack"><i>查看更多</i><b></b></a></em> <div class="clear"></div> </div> <ul class="nphpXgwzList">   <li><b></b><a href="//m.sbmmt.com/m/faq/600256.html" class="aBlack">如何在JavaScript中搜索链接的type属性的值？</a><div class="clear"></div></li> <li><b></b><a href="//m.sbmmt.com/m/faq/600419.html" class="aBlack">我们如何在HTML中将两个部分并排放置？</a><div class="clear"></div></li> <li><b></b><a href="//m.sbmmt.com/m/faq/600420.html" class="aBlack">WordPress 操作与过滤器：了解区别</a><div class="clear"></div></li> <li><b></b><a href="//m.sbmmt.com/m/faq/600411.html" class="aBlack">如何同时切换按钮和提交表单？</a><div class="clear"></div></li> <li><b></b><a href="//m.sbmmt.com/m/faq/600236.html" class="aBlack">JavaScript中的键盘事件altKey属性的作用是什么？</a><div class="clear"></div></li> </ul> </div> <script type="text/javascript" src="//m.sbmmt.com/sw/hezuo/cf85c41f1b0ce5f8359e5229784c31e4.html" ></script> <div class="nphpSytBox2"> <div class="nphpTjkcTitle"> <ul class="nphpTjkcMenu menu1"> <li class="current">热门课程</li> <div class="clear"></div> </ul> <div class="clear"></div> </div> <div class="nphpRmkcBox" style="padding-top:0px;"> <ul class="nphpRmkcList"> <li> <a href="//m.sbmmt.com/m/course/1540.html"><img data-src="//m.sbmmt.com/img/upload/course/000/000/068/643cef38f10ac763.png" alt="前端基础到实战（HTML5+CSS3+ES6+NPM）" class="lazyload" src="//m.sbmmt.com/img/upload/course/000/000/068/643cef38f10ac763.png" onerror="this.src='/static/mobimages/moren/236_132.png'"/></a> <dl> <dt><a href="//m.sbmmt.com/m/course/1540.html" title="前端基础到实战（HTML5+CSS3+ES6+NPM）" class="aBlack">前端基础到实战（HTML5+CSS3+ES6+NPM）</a></dt> <dd> <span> <em> <h2>￥800</h2> <i>￥1200</i> <div class="clear"></div> </em> <p>已抢26633个</p> </span> <b><a href="//m.sbmmt.com/m/course/1540.html">抢</a></b> <div class="clear"></div> </dd> </dl> <div class="clear"></div> </li> <li> <a href="//m.sbmmt.com/m/course/1541.html"><img data-src="//m.sbmmt.com/img/upload/course/000/000/068/643cf0cf4bc5d138.png" alt="PHP基础到实战（PHP+MySQL）" class="lazyload" src="//m.sbmmt.com/img/upload/course/000/000/068/643cf0cf4bc5d138.png" onerror="this.src='/static/mobimages/moren/236_132.png'"/></a> <dl> <dt><a href="//m.sbmmt.com/m/course/1541.html" title="PHP基础到实战（PHP+MySQL）" class="aBlack">PHP基础到实战（PHP+MySQL）</a></dt> <dd> <span> <em> <h2>￥800</h2> <i>￥1200</i> <div class="clear"></div> </em> <p>已抢14098个</p> </span> <b><a href="//m.sbmmt.com/m/course/1541.html">抢</a></b> <div class="clear"></div> </dd> </dl> <div class="clear"></div> </li> <li> <a href="//m.sbmmt.com/m/course/1563.html"><img data-src="//m.sbmmt.com/img/upload/course/000/000/067/6491138c05f26215.png" alt="前端开发（基础+实战项目合集）" class="lazyload" src="//m.sbmmt.com/img/upload/course/000/000/067/6491138c05f26215.png" onerror="this.src='/static/mobimages/moren/236_132.png'"/></a> <dl> <dt><a href="//m.sbmmt.com/m/course/1563.html" title="前端开发（基础+实战项目合集）" class="aBlack">前端开发（基础+实战项目合集）</a></dt> <dd> <span> <em> <h2>￥800</h2> <i>￥1200</i> <div class="clear"></div> </em> <p>已抢7085个</p> </span> <b><a href="//m.sbmmt.com/m/course/1563.html">抢</a></b> <div class="clear"></div> </dd> </dl> <div class="clear"></div> </li> <li> <a href="//m.sbmmt.com/m/course/1564.html"><img data-src="//m.sbmmt.com/img/upload/course/000/000/067/6491146f5949d175.png" alt="PHP编程（基础知识点汇总）" class="lazyload" src="//m.sbmmt.com/img/upload/course/000/000/067/6491146f5949d175.png" onerror="this.src='/static/mobimages/moren/236_132.png'"/></a> <dl> <dt><a href="//m.sbmmt.com/m/course/1564.html" title="PHP编程（基础知识点汇总）" class="aBlack">PHP编程（基础知识点汇总）</a></dt> <dd> <span> <em> <h2>￥800</h2> <i>￥1200</i> <div class="clear"></div> </em> <p>已抢8595个</p> </span> <b><a href="//m.sbmmt.com/m/course/1564.html">抢</a></b> <div class="clear"></div> </dd> </dl> <div class="clear"></div> </li> <li> <a href="//m.sbmmt.com/m/course/1565.html"><img data-src="//m.sbmmt.com/img/upload/course/000/000/067/649bcbb41f728422.png" alt="前后端分离的商城系统（Vue3+Laravel8+Uniapp）" class="lazyload" src="//m.sbmmt.com/img/upload/course/000/000/067/649bcbb41f728422.png" onerror="this.src='/static/mobimages/moren/236_132.png'"/></a> <dl> <dt><a href="//m.sbmmt.com/m/course/1565.html" title="前后端分离的商城系统（Vue3+Laravel8+Uniapp）" class="aBlack">前后端分离的商城系统（Vue3+Laravel8+Uniapp）</a></dt> <dd> <span> <em> <h2>￥1200</h2> <i>￥2400</i> <div class="clear"></div> </em> <p>已抢17537个</p> </span> <b><a href="//m.sbmmt.com/m/course/1565.html">抢</a></b> <div class="clear"></div> </dd> </dl> <div class="clear"></div> </li> <li> <a href="//m.sbmmt.com/m/course/1567.html"><img data-src="//m.sbmmt.com/img/upload/course/000/000/067/6497b00716a93137.png" alt="PHP MySQL基础编程课" class="lazyload" src="//m.sbmmt.com/img/upload/course/000/000/067/6497b00716a93137.png" onerror="this.src='/static/mobimages/moren/236_132.png'"/></a> <dl> <dt><a href="//m.sbmmt.com/m/course/1567.html" title="PHP MySQL基础编程课" class="aBlack">PHP MySQL基础编程课</a></dt> <dd> <span> <em> <h2>￥800</h2> <i>￥1200</i> <div class="clear"></div> </em> <p>已抢7030个</p> </span> <b><a href="//m.sbmmt.com/m/course/1567.html">抢</a></b> <div class="clear"></div> </dd> </dl> <div class="clear"></div> </li> </ul> </div> <div class="nphpShou2"> <a href="//m.sbmmt.com/m/app/" class="aRed"><b></b><em>打开APP，随时随地在线学习！</em><span></span></a> <div class="clear"></div> </div> </div> </div>   <div class="nphpFoot" id="nphpFoot" style="display:none;"> <script type="text/javascript" src="//m.sbmmt.com/sw/hezuo/7c9c0cc71ad595f7716f2f0c50381e48.html" ></script> </div>   <div class="nphpYouBox" style="display: none;"> <div class="nphpYouBg"> <div class="nphpYouTitle"><span onclick="$('.nphpYouBox').hide()"></span><a href="//m.sbmmt.com/m/"></a><div class="clear"></div></div> <ul class="nphpYouList"> <li><a href="//m.sbmmt.com/m/"><b class="icon1"></b><span>首页</span><div class="clear"></div></a></li> <li><a href="//m.sbmmt.com/m/course.html"><b class="icon2"></b><span>课程</span><div class="clear"></div></a></li> <li><a href="//m.sbmmt.com/m/article.html"><b class="icon3"></b><span>文章</span><div class="clear"></div></a></li> <li><a href="//m.sbmmt.com/m/wenda.html"><b class="icon4"></b><span>问答</span><div class="clear"></div></a></li> <li><a href="//m.sbmmt.com/m/blog.html"><b class="icon5"></b><span>博客</span><div class="clear"></div></a></li> <li><a href="//m.sbmmt.com/m/dic.html"><b class="icon6"></b><span>词典</span><div class="clear"></div></a></li> <li><a href="//m.sbmmt.com/m/course/type/99.html"><b class="icon7"></b><span>手册</span><div class="clear"></div></a></li> <li><a href="//m.sbmmt.com/m/xiazai/"><b class="icon8"></b><span>资源</span><div class="clear"></div></a></li> <li><a href="//m.sbmmt.com/m/search"><b class="icon9"></b><span>搜索</span><div class="clear"></div></a></li> <li><a href="//m.sbmmt.com/m/app/"><b class="icon10"></b><span>APP下载</span><div class="clear"></div></a></li> <li><a href="//m.sbmmt.com/m/mk.html"><b class="icon11"></b><span>PHP培训</span><em>新</em><div class="clear"></div></a></li> <div class="clear"></div> </ul> </div> </div>   <div class="nphpDing" style="display: none;"> <div class="nphpDinglogo"><a href="//m.sbmmt.com/m/faq/#"></a></div> <div class="nphpNavIn1"> <div class="swiper-container nphpNavSwiper1"> <div class="swiper-wrapper"> <div class="swiper-slide"><a href="//m.sbmmt.com/m/" >首页</a></div> <div class="swiper-slide"><a href="//m.sbmmt.com/m/course.html" >课程</a></div> <div class="swiper-slide"><a href="//m.sbmmt.com/m/map.html">路径</a></div> <div class="swiper-slide"><a href="//m.sbmmt.com/m/article.html" class="hover">文章</a></div> <div class="swiper-slide"><a href="//m.sbmmt.com/m/mk.html" title="PHP培训">PHP培训</a><b></b></div> <div class="swiper-slide"><a href="//m.sbmmt.com/m/coding.html">精品课</a></div> <div class="swiper-slide"><a href="//m.sbmmt.com/m/xiazai" >下载</a></div> <div class="clear"></div> </div> </div> <script> var swiper = new Swiper('.nphpNavSwiper1', { slidesPerView : 'auto' }); </script> </div> </div>  </div> <script> (function () { var bp = document.createElement('script');var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') {bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';} else {bp.src = 'http://push.zhanzhang.baidu.com/push.js';} var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://m.sbmmt.com/hm.js?c0e685c8743351838d2a7db1c49abd56"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script>isLogin = 0;</script> <script type="text/javascript" src="//m.sbmmt.com/m/static/layui/layui.js"></script> <script type="text/javascript" src="//m.sbmmt.com/m/static/js/global.js?4.9.47"></script> <script> var returnCitySN = ''; </script> <script type="text/javascript" charset="UTF-8" src="//m.sbmmt.com/ip/city.php?sign=0c0c7efad466fbf265629557e9796f31"></script> <script> var cname = returnCitySN.cname; var cname = cname.split("|"); function setCookie(name,value,iDay){ //name相当于键，value相当于值，iDay为要设置的过期时间（天） var oDate = new Date(); oDate.setDate(oDate.getDate() + iDay); document.cookie = name + '=' + value + ';path=/;domain=.php.cn;expires=' + oDate; } //读cookies function getCookiea(name) { var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)"); if(arr=document.cookie.match(reg)) return arr[2]; else return null; } var ad = getCookiea('ad'); if(ad) { var num = parseInt(ad)+1; } else { var num = 1; } if(num <= 2000) { if( returnCitySN == '' || encodeURIComponent(returnCitySN.cname).indexOf('%E5%8C%97%E4%BA%AC') != -1 ) { $('#nphpFoot').remove(); $('#adTop').remove(); } else { $('#nphpFoot').show(); $('#adTop').show(); $(document).ready(function(){ $('.nphpQianCont').before('<div class="nphpShou"><a href="https://work.weixin.qq.com/kfid/kfc8cc2d6defcf3c202" targe="_blank" style="width:100%;" rel="nofollow" class="aRed"><b class="icon2"></b><em style=" font-style:normal">【'+cname[2]+'】PHP编程学习，咨询领取优惠！</em><span></span></a></div>') }) } setCookie('ad',num,1) } </script> </div> <script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script> <link rel='stylesheet' id='_main-css' href='//m.sbmmt.com/m/static/css/viewer.min.css' type='text/css' media='all'/> <script type='text/javascript' src='//m.sbmmt.com/m/static/js/viewer.min.js?1'></script> <script type='text/javascript' src='//m.sbmmt.com/m/static/js/jquery-viewer.min.js'></script> <script> jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了，就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); $(function() { $(".nphpFen em").click(function(){ if($(this).hasClass("icon1")){ $(this).removeClass("icon1").addClass("icon2").html("<b></b>已收藏") }else{ $(this).removeClass("icon2").addClass("icon1").html("<b></b>收藏") } }) $(".nphpFen i").click(function(){ if($(this).hasClass("icon1")){ $(this).removeClass("icon1").addClass("icon2").html("<b></b>已点赞") }else{ $(this).removeClass("icon2").addClass("icon1").html("<b></b>点赞") } }) }) </script> </body> </html>