登录表单+iframe后台架构+css优先级 -

1. 登录表单

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>登录表单</title>
</head>
<body>
    <!-- method: 提交类型,提交数据以?k=y&k=y查询字符串添加到url中 -->
    <form style="text-align: center;" method="post">
        <div>
            <label for="my-email">邮箱:</label>
            <input type="email" id="my-email" name="email" value="" placeholder="a@email.com" required />
        </div>
        <div>
            <label for="psw">密码:</label>
            <input type="password" id="psw" name="password" value="123" placeholder="数字+字母" required />
        </div>
        &nbsp;
        <div>
            <button>登陆</button>
        </div>
    </form>
</body>
</html>

效果截图

登录表单

2. 后台架构

<!DOCTYPE html>
<html lang="xfqm">
<head>
    <meta charset="UTF-8" />
    <title>iframe小后台</title>
    <style>
    body {
        margin: 0;
        display: grid;
        grid-template-columns: 10em 1fr;
    }
    .header {
        text-align: center;
        padding-top: 0.7em;
        grid-column: span 2;
        height: 2em;
        background-color: rgb(173, 158, 15);
    }
    .aside {
        display: grid;
        grid-template-rows: repeat(auto-fit, 2em);
        background-color: rgb(13, 133, 97);
    }
    iframe {
        width: 100%;
        min-height: 42em;
        background-color: #fff;
        border: none;
        padding: 2em;
    }
    a {
        text-decoration: none;
        color: #555;
        background-color: #fff;
        border-bottom: 1px solid #ccc;
        border-right: 1px solid #ccc;
    }       
    </style>
</head>
<body>
    <div class="header" style="font-size: 30px;">网 站 管 理 后 台</div>
    <div class="aside">
    <a href="https://www.bilibili.com/" target="content">BiliBili官网</a>
    <a href="https://image.baidu.com/" target="content">百度图片</a>
    <a href="http://sports.sina.com.cn/" target="content">新浪体育</a>
    <a href="https://weibo.com/" target="content">微博</a>
    <a href="https://www.iqiyi.com/"  target="content">爱奇艺</a>
    </div>
    <div class="main">
    <iframe srcdoc="请右击左侧按钮" name="content"></iframe>
    </div>
</body>
</html>

效果截图

iframe小后台

3. CSS优先级

Important的优先级>内联样式的优先级>ID选择器优先级>Class选择器的优先级>从body元素继承样式

从 body 元素继承样式

<style>
body {
 background-color: black;   /*页面背景颜色*/
 font-family: monospace;    /*页面字体*/
 color: green;              /*字体颜色*/
}
</style>
<h1>Hello World!</h1>

Class 选择器的优先级高于继承样式

<style>
body {
  background-color: black;
  font-family: monospace;
  color: green;
}
/*粉红色样式定义*/
.pink-text {
  color: pink;
}
</style>
<h1>Hello World!</h1>                      /*继承body样式*/
<h1 class="pink-text">Hello World2!</h1>   /*使用专属class样式*/

ID选择器优先级高于 Class 选择器

<style>
body {
  background-color: black;
  font-family: monospace;
  color: green;
}
 /*添加id样式*/
#orange-text {
  color: orange;
}
.pink-text {
  color: pink;
}
.blue-text {
  color: blue;
}
</style>
/*添加id属性，并保留上述的class属性*/
<h1 id="orange-text" class="pink-text blue-text">Hello World!</h1>

内联样式的优先级高于 ID 选择器

<style>
body {
  background-color: black;
  font-family: monospace;
  color: green;
}
#orange-text {
  color: orange;
}
.pink-text {
  color: pink;
}
.blue-text {
  color: blue;
}
</style>
/*添加内联样式，同时保留 blue-text 和 pink-text 这两个 class样式以及 id 样式*/
<h1 id="orange-text" class="pink-text blue-text" style="color: white">Hello World!</h1>

Important 的优先级最高

<style>
body {
  background-color: black;
  font-family: monospace;
  color: green;
}
#orange-text {
  color: orange;
}
.pink-text {
  color: pink !important;    /*添加在这一行*/
}
.blue-text {
  color: blue;
}
</style>
/*并且保留之前所有的CSS样式*/
<h1 id="orange-text" class="pink-text blue-text" style="color: white">Hello World!</h1>