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>
