相关信息
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>
<!-- 页头 -->
<!-- 实体字符:页面中原样显示，不会被浏览器解析 -->
<!-- 使用< = 小于 > 大鱼号 -->
<header><头部></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
作业提交二
实战学习
演示环境说明
系统: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