简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 1210—用iframe写一个简单的小后台， 理解css优先级。
Blogger Information
Blog 64
fans 2
comment 1
visits 46341
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
1210—用iframe写一个简单的小后台， 理解css优先级。
Y的博客
Original
595 people have browsed it

1.用iframe写一个简单的小后台

运行结果

代码

  1.  <!DOCTYPE html>
  2.     <html lang="en">
  3.     <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>网站后台管理</title>
  7. <link rel="stylesheet" href="../1210/style/ifram.css">
  8. </head>
  9. <body>
  10. <div class="header">网站后台管理</div>
  11. <div class="aside">
  12.     <a href="" target="content">内容管理</a>
  13.     <a href="" target="content">栏目管理</a>
  14.     <a href="" target="content">站点管理</a>
  15.     <a href="../1210/demo1.html" target="content">联系我们</a>
  16. </div>
  17. <div class="main">
  18.     <iframe srcdoc="点击左侧" name="content"></iframe>
  19. </div>  
  20. </body>
  21. </html>

2.理解css优先级。

css元素样式会受到4个级别声明的影响

  1. 继承的：根据元素在文档的结构和层级关系来确定它最终的样式
  2. 浏览器的：用户代理模式，大多数浏览器表基本一致
  3. 自定义的：写到HTML文档的 style 标签中的
  4. 行内样式（内联样式）：写到元素的 style 属性中的
    级别越来越高，优先级由低到高

    选择器优先级

  • 标签选择器 
    1.   h1{
    2.   color:blue;
    }
  • 属性选择器
    1.   *[class="title"] {
    2.       color:violet;
    3.   }
  • 类选择器
    1.    .title{
    2.   color: aquamarine;
    }
  • id 选择器
    1.  #page-title {
    2.      color:black;
    3.  }
    id选择器级别最高
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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！