iframe的迷你后台布局与CSS优先级

1、iframe迷你后台布局

1.1 iframe是html的内联框架，在页面中开辟一个窗口的位置来显示内容

示范代码

<!--
1 a标签的target属性与与iframe的name属性一致即可实现联动；
2 iframe的srcdoc属性为窗口内容加载之前显示的说明，可以用CSS的标签修饰
-->
<div>
<a href="https://j.map.baidu.com/1c/VOX" target="hefei">合肥市</a>
<iframe srcdoc="合肥市地图" name="hefei"></iframe>
</div>

1.2 网站管理后台的布局：

顶头：header,标题说明
中间：左侧：aside，通常为导航
中间：主体：main，iframe在窗口显示部分，还能细分为多个section模块
底部：footer,辅助说明信息

示范代码：

<div class="header">网站管理后台</div>
<div class="aside">
<a href="../1208/demo2.html" target="content">链接与锚点</a>
<a href="../1208/demo3.html" target="content">图片</a>
<a href="../1209/demo1.html" target="content">列表元素</a>
<a href="../1209/demo2.html" target="content">表格元素</a>
<a href="../1209/demo8.html" target="content">表格元素</a>
</div>
<div class="main">
<iframe srcdoc="请右击左侧按钮" name="content"></iframe>
</div>

2、CSS优先级

2.1 html元素的样式主要受以下4个方面影响，优先级别由低到高

集成根据元素在文档的结构和层级关系来决定最终样式
浏览器用户代理样式，大多数浏览器表现基本一致
自定义写在文档的style标签中。
行内样式内联样式，写到元素的style中

2.2 选择器，主要有以下4个，优先级由低到高

标签选择器：适用于所有选定标签
属性选择器：选定设置了某个属性的标签对象
类选择器：选定class属性为指定值的对象
id选择器：选定id属性为指定值的对象

示范代码：

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>层叠与优先级</title>
    <style>
      /* css: 层叠样式表 */
      /* 1. 标签选择器 */
      h1 {
        /* color: green; */
      }
      /* 2. 属性选择器 */
      /* *:表示所有元素/标签 */
      /* h1[class="title"] {
        color: violet;
      }
      h1[id="page-title"] {
        color: red;
      } */
      /* id:浏览器并不检查它的唯一性，由程序员自己控制 */
      /* h1 {
        color: blue;
      } */
      /* 3. 类选择器 */
      /* .title {
        color: violet;
      } */
      /* 4. id选择器 */
      /* #page-title {
        color: yellow;
      } */
    </style>
  </head>
  <body>
    <!-- <header class="page-header">
      <h1 id="page-title" class="title">Web全栈开发入门课程</h1>
      <h2 id="page-title" class="title">大家晚上好,我是天蓬老师</h1>
    </header> -->
    <style>
      h1 {
        color: red !important;
      }
      .active {
        color: turquoise;
      }
      #first {
        color: blue;
      }
      /* tag < class < id  */
    </style>
    <h1 class="active" id="first">Hello World</h1>
  </body>
</html>

批改老师：

天蓬老师

批改状态：合格

老师批语：

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

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

0条评论

作者最新博文

php-229911-1208

2020-12-09 19:03:51