Community Learn Tools Library Leisure
search
English
Home > List of blog posts > iframe实战练习
Blogger Information
Blog 19
fans 0
comment 0
visits 10715
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
iframe实战练习
牙森江
Original
297 people have browsed it

今天的iframe实战练习

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>实战练习-后台小案例</title>
  8.     <style>
  9.         *{
  10.             margin: 0px;
  11.             padding: 0px;
  12.             box-sizing: border-box;
  13.         }
  14.         body{
  16.               display: grid;
  18.         }
  19.         header{
  20.             width: 100%;
  21.             height: 160px;
  22.             background-color: aqua;
  23.             display: flex;
  24.             place-items: center;
  26.         }
  27.         header h1{
  28.             color: brown;
  29.             margin-left: 20px;
  30.         }
  31.         header section{
  32.             display: flex;
  33.             margin-left: auto;
  34.         }
  35.         header span{
  36.             margin-right: 20px;
  37.         }
  38.          header button{
  39.             margin-right: 20px;
  40.         }
  41.         nav{
  42.             background-color: rgb(235, 20, 20);
  43.             display: grid;
  44.             width: 15%;
  45.             text-align: center;
  46.             margin-top : 5px;
  48.         }
  49.         a{
  50.             text-decoration: none;
  51.         }
  52.         iframe{
  53.             margin-top: 5px;
  54.             width: 70%;
  55.             height: 100%;
  56.             background-color: rgb(142, 178, 245);
  59.         }
  60.     </style>
  61. </head>
  62. <body>
  63.    <!-- 后台顶部 -->
  64.    <header>
  65.        <h1>学生管理系统</h1>
  66.        <section>
  67.         <span>admin</span>
  68.         <button>退出</button>
  69.        </section>
  70.    </header>
  72.    <!-- 后台左侧 -->
  73.       <nav>
  74.         <a href="./表单-实战练习.html" target="content">登录页面</a>
  75.         <a href="实战-课程表.html" target="content">课程表</a>
  76.         <a href="./iframe+a.html" target="content">iframe练习</a>
  77.         <a href="./购物清单.html" target="content">购物清单</a>
  78.         <a href="" target="content">元素属性</a>
  79.         <a href="" target="content">元素属性</a>
  80.         <a href="" target="content">元素属性</a>
  81.         <a href="" target="content">元素属性</a>
  82.       </nav>
  83.    <!-- 后台右侧 -->
  84.    <iframe src="" frameborder="0" name="content" width="100%" height="100%"></iframe>
  85. </body>
  86. </html>

运行效果：

Correcting teacher：PHPzPHPz

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