《HTML内嵌框架》

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接: https://blog.csdn.net/qq_44894205/article/details/102746021

内嵌框架的作用

内嵌框架多用于界面切换等场景,有效的减少了代码使用量,减少了运维工程师对代码维护的困难

实例1.内嵌的基本用法

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
 </head>
 <body>
  <h1>头部</h1>
  <!-- target绑定iframe声明的name -->
  <a href="http://www.baidu.com" target="demo">内容1</a>
  <a href="https://www.jd.com" target="demo">内容2</a>
  <a href="https://ai.taobao.com" target="demo">内容3</a>
  <br>
  <!-- src为默认界面,name和target配合绑定使用 -->
  <iframe src="https://www.runoob.com/css/css-dropdowns.html" width="800px" height="500px" name="demo"></iframe>
  <br>
  <h1>尾部</h1>
 </body>
</html>

是不是有小伙伴还想要去除边框呀!很简单的哟!

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
 </head>
 <body>
  <h1>头部</h1>
  <!-- target绑定iframe声明的name -->
  <a href="http://www.baidu.com" target="demo">内容1</a>
  <a href="https://www.jd.com" target="demo">内容2</a>
  <a href="https://ai.taobao.com" target="demo">内容3</a>
  <br>
  <!-- src为默认界面,name和target配合绑定使用 -->
  <iframe src="https://www.runoob.com/css/css-dropdowns.html" width="800px" height="500px" name="demo" frameborder="0"></iframe>
  <br>
  <h1>尾部</h1>
 </body>
</html>

猜你喜欢

转载自blog.csdn.net/qq_44894205/article/details/102746021
今日推荐