用iframe写的一个简单的小后台
html代码：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>用iframe写一个迷你小后台</title> <link rel="stylesheet" href="css/dome1.css"></head><body> <!-- 总体 --> <div class="total"> <!-- 头部 --> <div class="header"> <div class="header-left">网站后台管理</div> <div class="header-right"><a href="../1209/dome3.html" target="content">登录</a></div> </div> <div class="aside"> <a href="../oooo/img.html" target="content">壁纸</a> <a href="../1209/dome1.html" target="content">课程表</a> <a href="../1209/dome2.html" target="content">列表</a> <a href="https://www.baidu.com/" target="content">百度</a> <a href="https://www.php.cn/" target="content">php中文网</a> </div> <div class="main"> <iframe srcdoc="请点击左侧按钮" name="content"></iframe> </div> </div></body></html>
css代码：
a{ text-decoration: none;}.total{ width:960px; margin:0 auto; margin-top:50px;}.header{ height:60px; background:rgb(174, 174, 184); font-size:24px; line-height:60px; padding:0 10px;}.header-left{ float:left;}.header-right{ float:right;}.aside{ width:200px; height:600px; background:lightcyan; border:1px solid rgb(207, 235, 235); float:left;}.main{ float:left;}iframe{ width:754px; height:598px; background-color: rgb(240, 235, 235);}.aside a { color: rgb(121, 20, 236); display:block; font-size:30px; text-align:center; line-height:50px; border-bottom:1px solid rgb(181, 226, 226); }
登录页面：
课程表页面：
CSS样式优先级
css的继承性性
css的继承性指的是应用在一个标签上的那些css属性被传到其子标签上。
<div style="color:red;"> <p>Hello World!</p></div>
如果<div>有个属性color: red,则这个属性将被<p>继承，即<p>也拥有属性color: red。
1：最近的祖先样式比其他祖先样式优先级高。
<div style="color:red;"> <div style="color:blue;"> <div class="son">Hello World!</div> </div></div>
2：”直接样式”比”祖先样式”优先级高。
<div style="color:red;"> <div class="son" style="color:pink;">Hello World!</div></div>
选择器的优先级
CSS7种基础的选择器：
ID 选择器， 如 #id{}
类选择器， 如 .class{}
伪类选择器， 如 :hover{}
伪元素选择器， 如 ::before{}
标签选择器， 如 span{}
通配选择器， 如 *{}
3：优先级关系：内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器
html代码：
<div class="color-a" id="color-b" style="color:green;"> Hello World!</div>
css代码：
#color-b{ color:red; }.color-a{ color:blue; }div{ color:grey; }
4：属性后插有!important的属性拥有最高优先级。若同时插有!important，则再利用规则3判断优先级。
html代码：
<div class="father"> <p class="son">Hello World!</p></div>
css代码：
p{ color:red !important; }.father .son{ color:blue; }
HTML中引入CSS的方式
有4种方式可以在HTML中引入CSS。其中有2种方式是在HTML文件中直接添加CSS代码，另外两种是引入外部CSS文件。
1.内联方式
内联方式指的是直接在HTML标签中的style属性中添加CSS。
<div style="color:red;">你好！</div>
2.嵌入方式
嵌入方式指的是在HTML头部中的<style>标签下书写CSS代码。
<head> <style> .cotent{ color:red; } </style></head>
3.链接方式
链接方式指的是使用HTML头部的<head>标签引入外部的CSS文件。
<head> <link rel="stylesheet" type="text/css" href="css/style.css"></head>
4.导入方式
导入方式指的是使用CSS规则引入外部CSS文件。
<style> @import url(style.css);</style>
总结
内联方式只能改变当前标签的样式，如果想要改变多个样式，就要修改很多，会使代码变得冗长，使网页难以维护。嵌入方式只对当前页面有效，当多个页面需要引入相同的CSS代码时，这样写会导致代码冗余，也不利于维护。链接方式是最常用的，使用这种方式，所有的CSS代码只存在于单独的CSS文件中，所以具有良好的可维护性。所以，我们应尽量使用<link>标签导入外部CSS文件，避免或者少使用其他三种方式。
