iframe简单后台实例和html样式的使用

2023年01月24日 15:26:01阅读数:31博客 / 追梦赤子 /

iframe简单后台实例

  1. <!DOCTYPE html>
  2. <html lang="en">
  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. body {
  10. display: grid;
  11. grid-template-columns: 12em 1fr;
  12. grid-template-rows: 5em 1fr;
  13. }
  14. body header {
  15. grid-column-end: span 2;
  16. background-color: seagreen;
  17. display: flex;
  18. /* padding: 2em; */
  19. }
  20. body header h1 {
  21. display: flex;
  22. }
  23. body header section {
  24. color: red;
  25. margin-left: auto;
  26. padding-right: 2em;
  27. }
  28. body header section i {
  29. color: aliceblue;
  30. margin-right: 1em;
  31. }
  32. nav {
  33. display: grid;
  34. grid-auto-rows: min-content;
  35. background-color: lightyellow;
  36. border-right: 1px solid currentColor;
  37. padding: 1em;
  38. list-style: none;
  39. }
  40. nav a {
  41. text-decoration: none;
  42. padding: 0.5em 0;
  43. border-bottom: 1px solid #555;
  44. }
  45. body iframe {
  46. width: calc(100vw - 10em);
  47. height:calc(100vw - 60em);
  48. border: none;
  49. background-color: #efefef;
  50. }
  51. </style>
  52. </head>
  53. <body>
  54. <!-- 顶部 -->
  55. <header>
  56. <h1>简单管理后台</h1>
  57. <section>
  58. <i>admin</i>
  59. <button type="button">退出</button>
  60. </section>
  61. </header>
  62. <!-- 左侧 -->
  63. <nav>
  64. <a href="../0116/work01.html" target="content">课程表</a>
  65. <a href="work02.html" target="content">样式设置和优先级</a>
  66. <a href="../0118/work01.html" target="content">html选择器</a>
  67. </nav>
  68. <!-- 内容主体 -->
  69. <iframe src="" name="content" frameborder="0">
  70. </iframe>
  71. </body>
  72. </html>

html样式来源和优先级

  1. <!DOCTYPE html>
  2. <html lang="en">
  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>html样式来源与优先级实例</title>
  8. <!-- 外部样式引用方式1 link标签(异步)) -->
  9. <!-- <link rel="stylesheet" href="static/css/style.css"> -->
  10. <style>
  11. /* 外部样式引用方式2 指令 @import url()(同步) */
  12. @import url('static/css/style.css');
  13. </style>
  14. </head>
  15. <body>
  16. <!-- 1、设置行内样式 -->
  17. <p style="color: red;">我是行内样式tag.style</p>
  18. <!-- 2、设置文档样式 -->
  19. <style>
  20. p:nth-child(n+2) {
  21. color: green;
  22. }
  23. </style>
  24. <p>我是文档样式"<"style">"</p>
  25. <!-- 3、引用外部样式 -->
  26. <h2>我通过link标签(@import 指令)引用外部样式</h2>
  27. <hr/>
  28. <label for="">样式优先级:</label>
  29. <h2 style="color:blue;">行内样式 > 文档样式 > 外部样式</h2>
  30. </body>
  31. </html>

批改状态:合格

老师批语:

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

全部评论

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

条评论
  • 博主信息
    追梦赤子
    博文
    7
    粉丝
    0
    评论
    0
    访问量
    433
    积分:0
    P豆:14