Community
Learn
Tools Library
AI Tools
Leisure
search
English
Home > List of blog posts > 1220iframe的迷你后台与CSS优先级-229911
Blogger Information
Blog 13
fans 0
comment 0
visits 9278
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
1220iframe的迷你后台与CSS优先级-229911
我是贝壳
Original
488 people have browsed it

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

1、iframe迷你后台布局

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

示范代码

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

1.2 网站管理后台的布局：

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

示范代码：

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

2、CSS优先级

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

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

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

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

示范代码：

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <title>层叠与优先级</title>
  7.     <style>
  8.       /* css: 层叠样式表 */
  10.       /* 1. 标签选择器 */
  11.       h1 {
  12.         /* color: green; */
  13.       }
  15.       /* 2. 属性选择器 */
  16.       /* *:表示所有元素/标签 */
  17.       /* h1[class="title"] {
  18.         color: violet;
  19.       }
  20.       h1[id="page-title"] {
  21.         color: red;
  22.       } */
  23.       /* id:浏览器并不检查它的唯一性，由程序员自己控制 */
  25.       /* h1 {
  26.         color: blue;
  27.       } */
  29.       /* 3. 类选择器 */
  30.       /* .title {
  31.         color: violet;
  32.       } */
  33.       /* 4. id选择器 */
  34.       /* #page-title {
  35.         color: yellow;
  36.       } */
  37.     </style>
  38.   </head>
  39.   <body>
  40.     <!-- <header class="page-header">
  41.       <h1 id="page-title" class="title">Web全栈开发入门课程</h1>
  42.       <h2 id="page-title" class="title">大家晚上好,我是天蓬老师</h1>
  43.     </header> -->
  45.     <style>
  46.       h1 {
  47.         color: red !important;
  48.       }
  50.       .active {
  51.         color: turquoise;
  52.       }
  53.       #first {
  54.         color: blue;
  55.       }
  57.       /* tag < class < id  */
  58.     </style>
  59.     <h1 class="active" id="first">Hello World</h1>
  60.   </body>
  61. </html>
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post