相关信息

2020年12月10日

知识点概述

iframe的应用
html5布局简略
css语法 基本术语 层叠 优先级

iframe与后台管理系统

演示地址: https://php.gzj2001.com/day3/index2.html

  <div class="header">头部</div>
    <div class="aside">
        <a href="../day1/index.html" target="main">管理1</a>
        <a href="../day1/index1.html" target="main">管理2</a>
        <a href="../day2/index.html" target="main">管理3</a>
        <a href="../day2/index2.html" target="main">管理4</a>
        <a href="../day3/index1.html" target="main">管理5</a>
    </div>
    <div class="main">
        <iframe srcdoc="主体区" name="main"></iframe>
    </div>

说明:多个a标签 指向同一个iframe。

html5布局

演示地址: https://php.gzj2001.com/day3/index3.html

<body>
    <!-- 页头 -->
    <!-- 实体字符:页面中原样显示,不会被浏览器解析 -->
    <!-- 使用&lt; = 小于 &gt; 大鱼号 -->
    <header>&lt;头部&gt;</header>

    <!-- div:通用容器块标签,内部可以防止任何类型的元素,当一个容器类型不定时可以使用她 -->
    <!-- span:通用容器,不过他内部是行内元素 文本 图片 链接 input -->
    <div class="container">
        <aside>侧边栏</aside>
        <main>主体区</main>

    </div>

<article>文章标签</article>

    <!-- 页脚 -->
    <footer>底部</footer>
</body>

说明:语义化标签名

css的语法和基本术语

演示地址: https://php.gzj2001.com/day3/index4.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css的语法和基本术语</title>
    <style>
        /* 如果你的css样式仅仅用来控制当前页面元素,就用style标签写在当前页面中。 */
        /* 术语:规则 选择器 声明块 属性和 值 */
        /* 选择器 h1 */
        /* 声明块: {} */
        /* 规则:选择器+声明块 */
        /* 属性和值:写在声明块中的名值对 */
        h1 {
            /* 声明块中的每一个名值对 叫一个样式声明 */
            /* 前景色 */
            color: khaki;
            font-weight: 200;
        }
    </style>
</head>

<body>
    <!-- 一个元素样式会受到四个级别的声明的影响
    1.集成 根据元素在文档的结构和层级关系来决定最终样式
    2.浏览器 用户代理样式,大多数浏览器表现基本一致
    3.自定义 写在文档的style标签中。
    4.行内样式 内联样式,写到元素的style中 -->
    <header class="page-header">
        <h1 id="page-title" class="title">web全站开发入门课程</h1>
        <h2 id="page-title" class="title">这里是www.gzj2001.com</h2>
    </header>
</body>

</html>

css层叠与优先级

演示地址: https://php.gzj2001.com/day3/index5.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>层叠与优先级</title>
    <style>
        /* css:层叠样式表  */

        /* 1.标签选择器 */
        /* h1 { */
            /* color: blueviolet; */
        /* } */

        /* 2.属性选择器 */
        /* *:表示所有元素/标签 */
        /* *[class="title"]
        {
            color:green;
        }
        *[id="page-title"]{
            color: burlywood;
        } */
        /* id:浏览器并不检查他的唯一性,由程序员自己控制 */

        /* 3.类选择器 */
        /* h1.title 通常表示为 .title */

        /* 4.id选择器 */
        #page-title{
            color:chartreuse;
        }
    </style>
</head>
<body>
    <!-- <header class="page-header">
        <h1 id="page-title" class="title">web全站开发入门课程</h1>
        <h2 id="page-title" class="title">这里是www.gzj2001.com</h2>
    </header> -->
    <style>
        h1{
            color: chartreuse;
            /* 可以添加!important 强制 */
        }
        .active{
            color:coral
        }
        #first{
            color: cornflowerblue;
        }
        /* id选择唯一元素,class选择一批元素 */
        /* tag < class < id */
    </style>
    <h1 class="active" id="first">hello world</h1>
</body>
</html>

说明:简略的记法 #id .class id通常唯一,class通常大量

1210作业

  • 作业标题:1210作业(iframe与css基础)
  • 作业内容:用iframe写一个简单的小后台; 理解css优先级,并实例图示演示元素样式的四个来源

作业提交一

演示地址: https://php.gzj2001.com/day3/index.html
image.png

作业提交二

image.png

实战学习

演示环境说明

系统:centos8
web服务器:nginx
php版本:74
IDE:vscode

作业代码合集

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>1210作业 PHP中文网后台管理系统</title>
    <link rel="stylesheet" href="//static.gzj2001.com/layui/css/layui.css">
</head>

<body class="layui-layout-body">
    <div class="layui-layout layui-layout-admin">
        <div class="layui-header">
            <div class="layui-logo">PHP中文网后台管理系统</div>
            <!-- 头部区域(可配合layui已有的水平导航) -->
            <ul class="layui-nav layui-layout-left">
                <li class="layui-nav-item"><a href="../index.html" target="main">控制台</a></li>
                <li class="layui-nav-item"><a href="../404.html" target="main">用户管理</a></li>
                <li class="layui-nav-item"><a href="../day1/index.html" target="main">课程管理</a></li>
                <li class="layui-nav-item"><a href="../day2/index.html" target="main">财务管理</a></li>
            </ul>
            <ul class="layui-nav layui-layout-right">
                <li class="layui-nav-item">
                    <a href="javascript:;">
                        <img src="https://img.gzj2001.com/logo.jpg" class="layui-nav-img">
                        Allen Chen
                    </a>
                </li>
                <li class="layui-nav-item"><a href="">退出</a></li>
            </ul>
        </div>

        <div class="layui-side layui-bg-black">
            <div class="layui-side-scroll">
                <!-- 左侧导航区域(可配合layui已有的垂直导航) -->
                <ul class="layui-nav layui-nav-tree" lay-filter="test">
                    <li class="layui-nav-item"><a href="../index.html" target="main">控制台</a></li>
                    <li class="layui-nav-item"><a href="../day3/index1.html" target="main">用户管理</a></li>
                    <li class="layui-nav-item"><a href="../day2/index2.html" target="main">课程管理</a></li>
                    <li class="layui-nav-item"><a href="../day1/index4.html" target="main">文章管理</a></li>
                    <li class="layui-nav-item"><a href="../day1/index1.html" target="main">评论管理</a></li>
                    <li class="layui-nav-item"><a href="../day2/index3.html" target="main">财务管理</a></li>
                    <li class="layui-nav-item"><a href="../day2/index4.html" target="main">系统管理</a></li>
                    <li class="layui-nav-item"><a href="../day2/index5.html" target="main">服务器管理</a></li>
                </ul>
            </div>
        </div>

        <div class="layui-body">
            <!-- 内容主体区域 -->
            <div>
                <iframe src="//www.gzj2001.com" style="width: 100%;height: 850px;" name="main"></iframe>
            </div>
        </div>

        <div class="layui-footer">
            <!-- 底部固定区域 -->
            © www.gzj2001.com 城南花开博客
        </div>
    </div>
</body>

</html>

其他信息

演示地址: https://php.gzj2001.com/day3/index.html
My Blog: https://www.gzj2001.com
My Blog In PHP.cn:https://www.php.cn/blog/linwx611.html