一、内联框架标签

HTML的内联框架元素<iframe>标签可以将其他的HTML页面嵌入到当前页面中。
内联框架的代码结构：

<a href="www.abc.com" target="iframe"></a>
<iframe src="" srcdoc="" frameborder="0" name="iframe"></iframe>

src 表示被嵌套的URL地址；
srcdoc 该属性可以是一段html代码，这些代码会被渲染到iframe中展示最终的样式。
name 与<a>标签和<form>标签的target属性可以配合使用，当点击对应的标签按钮时，可以跳转到点击的标签的URL地址。

拓展：使用iframe可以实现一个后台管理系统的菜单导航。

二、CSS基础语法

1.什么是CSS？
CSS全称：Cascading Style Sheets，中文名称叫层叠样式表。它是用来表示HTML、XML等文件样式的计算机语言。

2.CSS相关术语：
CSS的规则由两个部分组成：

选择器：由html元素构成；
声明块：由一对“{…}”包裹的名、值对。

例如：

<style>
/* 声明块中的每一个名、值对，叫一个“样式声明” */
h1 {
    /* 前景色 */
    color: green;
    font-weight: 200;
}
</style>
<header class="page-header">
    <h1 id="page-title" class="title" style="color: green;">Web全栈开发入门课程</h1>
    <h2 id="page-title">大家晚上好，我是Hello World！</h2>
</header>

效果如下：

在Chrome浏览器中，通过F12打开控制台工具，通过选择工具选中h1标签，我们可以看到一个元素的样式会受到四个级别的影响：

继承的：根据元素在文档的结构和层级关系来确定它的最终样式；
浏览器客户端：用户代理样式（user agent style），基本上浏览器的表现样式都是一致的；
用户自定义：写在HTML文档<style>标签中的样式；
行内样式（内联样式）：写在元素的style属性中的样式。

3.CSS层叠与优先级

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS层叠与优先级</title>
    <!-- 如果CSS样式仅仅用来控制当前页面的元素，我们就用style标签写在当前页面中。 -->
    <style>
        /* CSS（Cascading Style Sheets）：层叠样式表 */
        /* 1.标签选择器 */
        h1 {
            color: green;
        }
        /* 2.属性选择器 */
        /* *：表示所有元素（标签） */
        *[class="title"] {
            color: hotpink;
        }
        h1[class="title"] {
            color: indigo;
        }
        h2[class="title"] {
            color: mediumslateblue;
        }
        /* 3.类选择器 */
        /* .title {
            color: lawngreen;
        } */
        /* 4.id选择器 */
        /* #page-title {
            color: lightseagreen;
        } */
        /* 标签选择器 < 类选择器 < id选择器 < 行内样式 */
    </style>
</head>
<body>
    <header class="page-header">
        <h1 id="page-title" class="title">Web全栈开发入门课程</h1>
        <h2 id="page-title" class="title">大家晚上好，我是Hello World！</h2>
    </header>
</body>
</html>

效果图：

由上述例子可以看出CSS的优先级是：

标签选择器 < 类选择器 < id选择器 < 行内样式

其中行内元素的优先级别是最高的，这点是需要注意的，其实这个优先级从控制台也是能看出来的，如下图：

作业：

使用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>
    <style>
        body {
            display: grid;
            grid-template-columns: 10em 1fr;
            margin: 0;
        }
        .header {
            height: 4em;
            line-height: 4em;
            background-color: #393D49;
            grid-column: span 2;
            color: #ffffff;
            text-align: center;
            font-weight: bold;
        }
        .aside {
            display: grid;
            grid-template-rows: repeat(auto-fit, 4.8em);
            background-color: #393D49;
        }
        .aside a {
            display: block;
            height: 4.8em;
            line-height: 4.8em;
            border-bottom: 1px solid #666;
            padding-left: 1em;
            transition: all 0.4s;
        }
        .aside a:hover {
            background-color:#009688;;
        }
        iframe {
            width: 100%;
            min-height: 68em;
            padding-left: 30px;
            border: none;
            background-color: #ffffff;
        }
        .footer {
            display: gird;
            grid-column: span 2;
            background-color: #393D49;
        }
        .footer ul {
            display: flex;
        }
        .footer ul li {
            list-style: none;
            padding-left: 1em;
        }
        .footer ul li a {
            color: #c8cdd2;
            font-size: 0.8em;
        }
        a {
            text-decoration: none;
            color: #c8cdd2;
        }
        a:hover {
            color: #ffffff;
        }
    </style>
</head>
<body>
    <!-- 头部 -->
    <div class="header">后台管理系统</div>
    <!-- 侧边栏导航 -->
    <div class="aside">
        <a href="../20201209/demo1.html" target="box">后台首页</a>
        <a href="../20201209/demo2.html" target="box">商品列表</a>
        <a href="../20201209/demo3.html" target="box">课程表</a>
        <a href="../20201209/demo8.html" target="box">表单元素</a>
    </div>
    <!-- 主体-->
    <div class="container">
        <iframe srcdoc="请单击左侧按钮" frameborder="0" name="box"></iframe>
    </div>
    <!-- 页尾 -->
    <div class="footer">
        <ul>
            <li><a href="" target="_blank">PHP视频</a></li>
            <li><a href="" target="_blank">网站首页</a></li>
            <li><a href="" target="_blank">PHP实战</a></li>
            <li><a href="" target="_blank">PHP代码</a></li>
            <li><a href="" target="_blank">PHP手册</a></li>
            <li><a href="" target="_blank">词条手记</a></li>
            <li><a href="" target="_blank">编程词典</a></li>
            <li><a href="" target="_blank">php培训</a></li>
        </ul>
    </div>
</body>
</html>

效果图：

CSS来源：

继承父级的
用户代理样式
自定义样式
行内样式

由以上案例可以看出来这4个来源的优先级是：

继承父级的样式 < 用户代理样式 < 自定义样式 < 行内样式

iframe和css基础知识

一、内联框架标签

二、CSS基础语法

相关文章