css优先级别和iframe框架的使用

用iframe写一个简单的小后台;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>iframe 后台</title>
    <base target="testbody" />
</head>
<style   type="text/css">
*{
margin:0;
padding:0;
box-sizing: border-box;
}
body{
    background-color:#fff;
}
.head{
width:100%;
height:60px;
line-height: 60px;
background-color:#369;
padding-left: 20px;
}
.container{
overflow: hidden;
}
.container  .left{
width:15%;
float: left;
overflow: hidden;
background-color: #6595B8;
min-height: 42em;
}
.container  .left  dl  dt{
    font-size:16px;
    line-height: 28px;
    font-weight: bolder;
    text-indent: 6px;
    border-bottom:1px solid   #369;
}
.container  .left  dl dd{
    font-size:14px;
    line-height: 25px;
    text-indent: 24px;
    border-bottom:1px solid   #369;
}
.container  .left  dl dd a{
    text-decoration: none;
    color:#333;
}
.container  .body{
    width:85%;
    float: left;
    background-color: lightgrey;
    padding-left:3px;
    min-height: 42em;
}
.container  .body  iframe{
float:left;
height:42rem;
}
</style>
<div class="head">网站后台管理系统</div>
<div class="container">
<div class="left">
    <dl>
        <dt>网站设置</dt>
        <dd><a   href="test.html">系统设置</a></dd>
     </dl>
     <dl>
        <dt>文章管理</dt>
        <dd><a   href="test.html">内容添加</a></dd>
        <dd><a   href="test.html">文章信息</a></dd>
        <dd><a   href="test.html">生成静态</a></dd>
     </dl>    
</div>
<div class="body"><iframe    src="test.html" marginheight="0"  marginwidth="0"   frameborder="0"  width="100%"   height="auto"  name="testbody">
</iframe></div>
</div>
</body>
</html>

效果：

理解css优先级，并实例图示演示元素样式的四个来源:

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>CSS优先级</title>
    <style>
/* 标签选择器 */
div{
        color: green;
}
 /* 2. 属性选择器 */
a[href] {
        color: violet;
 }
   /* 3. 类选择器 */
.classelect{
        color:cyan;
}
/* 4. id选择器 */
#title {
        color: red;
}
.currid{
color:lime;
}
#currid{
color:lime;
}
span[name="currname"]{
color:yellow !important;
background-color: royalblue;
}
</style>
  </head>
  <body>
<div>标签选择器</div>
<a   href="">属性选择器</a>
<h3  class="classelect">类选择器</h3>
<p  id="title">id选择器</p>
<hr>
<span  name="currname"     id="currid"   class="currid"   style="color:red"  >综合使用</span>
  </body>
</html>

效果：

相关文章