Community Learn Tools Library Leisure
search
English
Home > List of blog posts > day3-1210作业 iframe后台与css优先级初尝
Blogger Information
Blog 16
fans 0
comment 0
visits 15847
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
day3-1210作业 iframe后台与css优先级初尝
Allen在php中文网的学习笔记
Original
646 people have browsed it

相关信息

2020年12月10日

知识点概述

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

1210作业

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

作业提交一

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

作业提交二

image.png

实战学习

演示环境说明

  1. 系统:centos8
  2. web服务器：nginx
  3. php版本:74
  4. IDE:vscode

作业代码合集

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>1210作业 PHP中文网后台管理系统</title>
  8.     <link rel="stylesheet" href="//static.gzj2001.com/layui/css/layui.css">
  9. </head>
  11. <body class="layui-layout-body">
  12.     <div class="layui-layout layui-layout-admin">
  13.         <div class="layui-header">
  14.             <div class="layui-logo">PHP中文网后台管理系统</div>
  15.             <!-- 头部区域（可配合layui已有的水平导航） -->
  16.             <ul class="layui-nav layui-layout-left">
  17.                 <li class="layui-nav-item"><a href="../index.html" target="main">控制台</a></li>
  18.                 <li class="layui-nav-item"><a href="../404.html" target="main">用户管理</a></li>
  19.                 <li class="layui-nav-item"><a href="../day1/index.html" target="main">课程管理</a></li>
  20.                 <li class="layui-nav-item"><a href="../day2/index.html" target="main">财务管理</a></li>
  21.             </ul>
  22.             <ul class="layui-nav layui-layout-right">
  23.                 <li class="layui-nav-item">
  24.                     <a href="javascript:;">
  25.                         <img src="https://img.gzj2001.com/logo.jpg" class="layui-nav-img">
  26.                         Allen Chen
  27.                     </a>
  28.                 </li>
  29.                 <li class="layui-nav-item"><a href="">退出</a></li>
  30.             </ul>
  31.         </div>
  33.         <div class="layui-side layui-bg-black">
  34.             <div class="layui-side-scroll">
  35.                 <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
  36.                 <ul class="layui-nav layui-nav-tree" lay-filter="test">
  37.                     <li class="layui-nav-item"><a href="../index.html" target="main">控制台</a></li>
  38.                     <li class="layui-nav-item"><a href="../day3/index1.html" target="main">用户管理</a></li>
  39.                     <li class="layui-nav-item"><a href="../day2/index2.html" target="main">课程管理</a></li>
  40.                     <li class="layui-nav-item"><a href="../day1/index4.html" target="main">文章管理</a></li>
  41.                     <li class="layui-nav-item"><a href="../day1/index1.html" target="main">评论管理</a></li>
  42.                     <li class="layui-nav-item"><a href="../day2/index3.html" target="main">财务管理</a></li>
  43.                     <li class="layui-nav-item"><a href="../day2/index4.html" target="main">系统管理</a></li>
  44.                     <li class="layui-nav-item"><a href="../day2/index5.html" target="main">服务器管理</a></li>
  45.                 </ul>
  46.             </div>
  47.         </div>
  49.         <div class="layui-body">
  50.             <!-- 内容主体区域 -->
  51.             <div>
  52.                 <iframe src="//www.gzj2001.com" style="width: 100%;height: 850px;" name="main"></iframe>
  53.             </div>
  54.         </div>
  56.         <div class="layui-footer">
  57.             <!-- 底部固定区域 -->
  58.             © www.gzj2001.com 城南花开博客
  59.         </div>
  60.     </div>
  61. </body>
  63. </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

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post