Blogger Information
Blog 5
fans 0
comment 0
visits 760
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
用写简单的后台布局
P粉168604607
Original
197 people have browsed it
  1. 作业要求用<iframe>写一个简单的后台布局, 注意a.target与iframe.name的配合 2. 实例演示html元素的样式来源与优先级(要有图示)

  • 下面是我的代码


    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=ht, initial-scale=1.0">

    7.  <title>Document</title>

    8.  <style>

    9.      header{

    10.          height: 100px;

    11.          background-color: rgb(51, 171, 160);

    12.      }

    13.       nav{

    14.          border:1px;

    15.          width:10em;

    16.          height: 800px;

    17.          background-color: #fde092;

    18.      }

    19.      iframe{

    20.          border: 1px;

    21.          width: 700px;

    22.          height: 500px;

    23.      }

    24.  </style>

    25. </head>

    26. <body>

    27.  <header>

    28.      <h1>网站后台管理系统<small>(V1.0)</small></h1>

    29.  </header>

    30.  <nav>

    31.      <a href="https://www.runoob.com/" target="wbody">php中文网</a><br>

    32.      <a href="https://www.runoob.com/" target="wbody">菜鸟教程</a><br>

    33.      <a href="https://www.163.com/" target="wbody">网易</a><br>

    34.  </nav>

    35.  <iframe src="" frameborder="1" name="wbody"></iframe>

    36. </body>

    37. </html>

  • 由于CSS还没有正式学,还是有点问题。最明显的三点:

  1. 头部文字不是上下距中

  2. iframe主体窗口不是在nav标签的右边,而是下面

  3. 上图代码产生的效果

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