Blogger Information
Blog 11
fans 0
comment 0
visits 4687
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
内联框架的简单练手
昊森
Original
595 people have browsed it

内联框架介绍

内联框架只有一个标签<iframe>
iframe.src:嵌入一个页面的URL
iframe.srcdoc:嵌入html代码
iframe.name:嵌入页面上下文,可以与以下两个标签属性绑定
a.target:点击链接会在指定的框架窗口中打开
input/button.formtarget:与上面功能一样
iframe.width:设置框架宽度,默认300px
iframe.heiget:设置框架高度,默认150px
iframe.frameborder:设置框架边框

一个简单的后台

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7. <title>iframe标签和元素优先级</title>
  8. </head>
  9. <body>
  10. <!-- 用iframe写一个简单的后台框架 -->
  11. <!-- 页面头部 -->
  12. <header>
  13. <div class="head">
  14. <!-- 一个logo -->
  15. <h1>后台管理系统<small>V1.0</small></h1>
  16. <!-- 用户昵称 -->
  17. <b>昊森</b>
  18. <!-- 退出按钮 -->
  19. <button>退出</button>
  20. </div>
  21. </header>
  22. <!-- 页面侧边栏-->
  23. <nav>
  24. <div class="nav">
  25. <a href="">首页</a>
  26. <a href="https://zaixym.com/" target="id">在线源码网</a>
  27. <a href="https://zaixym.com/wxym" target="id">微信源码</a>
  28. <a href="https://zaixym.com/bjjc" target="id">笔记教程</a>
  29. </div>
  30. </nav>
  31. <!-- 页面主体 -->
  32. <div class="boy">
  33. <figure>
  34. <iframe
  35. srcdoc="<h1>我是后台首页</h1>"
  36. frameborder="0"
  37. name="id"
  38. width="500"
  39. height="800"
  40. ></iframe>
  41. </figure>
  42. </div>
  43. </body>
  44. </html>

成品演示

成品演示

Correcting teacher:PHPzPHPz

Correction status:qualified

Teacher's comments:作业完成的很好,只是你应该在提交作业的时候没有在“状态”这一栏选择“作业”,或者没有选择对应哪一天的作业
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post