Iframe+a标签搭配应用布局和html元素的样式来源与优先级介绍

2023年01月24日 10:13:22阅读数:140博客 / 远方 / 学习笔记

简介:①Iframe+a标签搭配应用布局②html元素的样式来源与优先级介绍

Iframe+a标签搭配应用布局

源码附图

附图1

源码示例

  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. <style>
  9. nav{
  10. padding-bottom:5px;
  11. padding-top:5px;
  12. }
  13. nav>p{
  14. text-align: center;
  15. }
  16. nav>p>a{
  17. color:#ffffff;
  18. }
  19. </style>
  20. </head>
  21. <body>
  22. <header>
  23. <strong>Manager</strong><a href="a1.html" target="content" style="margin-left:15px;">退出</a>
  24. </header>
  25. <nav style="background-color: rgb(12, 230, 157);width:100px;margin-top:15px;">
  26. <p><a href="a2.html" target="content">菜单一</a></p>
  27. <p><a href="a3.html" target="content">菜单二</a></p>
  28. <p><a href="a4.html" target="content">菜单三</a></p>
  29. </nav>
  30. <section>
  31. <iframe src="a1.html" frameborder="0" name="content" style="background-color:rgb(173, 173, 214);padding-left:10px;margin-top:15px;"></iframe>
  32. </section>
  33. </body>
  34. </html>

html元素的样式来源与优先级介绍

代码运行效果图

附件2

源码示例

  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. <!-- 外部样式 -->
  8. <link rel="stylesheet" href="./style/css/h.css">
  9. <title>html元素的样式来源与优先级</title>
  10. <!-- 文档样式 -->
  11. <style>
  12. h1{
  13. color:#ffff00;
  14. background-color:#c9c9c9;
  15. }
  16. </style>
  17. </head>
  18. <body>
  19. <!-- 行内样式 -->
  20. <h1 style="color:#ff0000;">hello 2023</h1>
  21. </body>
  22. </html>

总结:通过Iframe标签的name元素和a标签的target元素配合使用达到点击不同链接在当前页面跳转到对应的iframe子页面,标签元素孰能生巧,多练、多练、多练。

批改状态:合格

老师批语:很好,继续加油

版权申明:本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!

全部评论

文明上网理性发言,请遵守新闻评论服务协议

条评论
  • 博主信息
    远方
    博文
    5
    粉丝
    0
    评论
    0
    访问量
    954
    积分:1
    P豆:70.5