博主信息
博文 16
粉丝 0
评论 0
访问量 10937
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
iframe案例来练习与HTML样式基础
Sinan学习博客
原创
595人浏览过

iframe案例来练习与HTML样式基础

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. * {
  10. margin: 0;
  11. padding: 0;
  12. box-sizing: border-box;
  13. }
  14. body {
  15. height: 100vh;
  16. width: 100vw;
  17. display: grid;
  18. grid-template-columns: 12em 1fr;
  19. grid-template-rows: 8em 1fr;
  20. }
  21. body header {
  22. display: flex;
  23. background-color: dodgerblue;
  24. /* 设置header容器的宽度,它跨越了2列 */
  25. grid-column-end: span 2;
  26. line-height: 8em;
  27. padding: 0 20px;
  28. }
  29. body header hgroup {
  30. display: flex;
  31. color: #fff;
  32. }
  33. body header hgroup h1 {
  34. font-size: 3em;
  35. }
  36. body header hgroup h2 {
  37. font-size: 1em;
  38. margin-left: 20px;
  39. }
  40. body header p {
  41. margin-left: auto;
  42. color: #fff;
  43. }
  44. body header p button {
  45. margin-left: 10px;
  46. padding: 4px;
  47. border: none;
  48. }
  49. body nav {
  50. background-color: #eee;
  51. border-right: 1px solid #333;
  52. padding: 10px;
  53. }
  54. body iframe {
  55. width: 100%;
  56. height: 100%;
  57. border: none;
  58. }
  59. body nav ul li {
  60. list-style-type: none;
  61. }
  62. body nav ul li a {
  63. display: block;
  64. padding: 0.5em 0;
  65. border-bottom: 1px solid #555;
  66. text-align: center;
  67. text-decoration: none;
  68. }
  69. </style>
  70. </head>
  71. <body>
  72. <!-- 顶部商标与状态 -->
  73. <header>
  74. <hgroup>
  75. <h1>LOGO</h1>
  76. <h2>网站后台管理系统 <small>(1.1v)</small></h2>
  77. </hgroup>
  78. <p><em>admin</em><button onclick="logout()">退出登录</button></p>
  79. </header>
  80. <!-- 左侧导航 -->
  81. <nav>
  82. <ul>
  83. <li><a href="#" target="content">item1</a></li>
  84. <li><a href="#" target="content">item2</a></li>
  85. <li><a href="#" target="content">item3</a></li>
  86. <li><a href="#" target="content">item4</a></li>
  87. <li><a href="#" target="content">item5</a></li>
  88. <li><a href="#" target="content">item6</a></li>
  89. </ul>
  90. </nav>
  91. <!-- iframe动态内容部分 -->
  92. <iframe src="inc/default.html" name="content"></iframe>
  93. <!-- JS代码 -->
  94. <script>
  95. function logout() {
  96. return confirm("是否退出?") ? alert("退出成功") : false;
  97. }
  98. </script>
  99. </body>
  100. </html>

效果预览:


元素样式来源

元素样式来两大来源:预置样式、自定义样式

一、预置样式我们可以在浏览器中查看如下:

二、自定义样式同样用h1标题示例加背景色如下:

元素样式优先级

元素样式写在不同的地方优先级会有所区别:

  • 写在元素自身的style属性里叫做行间样式
  • 写在本文档里的style标签里的文档样式
  • 写在外部CSS文档里的外部样式

它们的优先级为:行间样式 > 文档样式 > 外部样式 > 预置样式 如下图示:

  1. 外部样式覆盖了预置样式:外部样式 > 预置样式

  2. 文档样式又覆盖了外部样式:文档样式 > 外部样式 > 预置样式

  3. 行间样式覆盖了所有样式:行间样式 > 文档样式 > 外部样式 > 预置样式

批改老师:PHPzPHPz

批改状态:合格

老师批语:完成的很好,继续加油
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学