Community
Learn
Tools Library
AI Tools
Leisure
search
English
Home > List of blog posts > 2022.10.19第五课：ifame内联框架和简单的CSS选择器的学习
Blogger Information
Blog 14
fans 0
comment 0
visits 7569
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
2022.10.19第五课：ifame内联框架和简单的CSS选择器的学习
启动未来
Original
509 people have browsed it

2022.10.19 ifame内联框架和简单的CSS选择器的学习

一、iframe内联框架制作简单的网站后台

1、iframe内联框架

语法iframe.name=a.target
管理系统后台admin.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=device-width, initial-scale=1.0">
  7.     <title>管理系统后台</title>
  8. </head>
  9. <body>
  10.     <div>
  11.         <h3>XX网站后台管理系统v1.0.xx</h3>
  12.         <header><em>admin</em></header>
  13.         <button>退出</button>
  14.     </div>
  15.     <nav>
  16.         <figure>
  17.         <figcaption>管理系统导航</figcaption>
  18.         <a href="console.html" target="content">控制台</a>
  19.         <a href="authority.html" target="content">权限管理</a>
  20.         <a href="general.html" target="content">常规管理</a>
  21.         <a href="member.html" target="content">会员管理</a>
  22.         <a href="plug.html" target="content">插件管理</a>
  23.     </figure>
  24.     </nav>
  25.     <main>
  26.         <iframe src="" frameborder="0" name="content"></iframe>
  27.     </main>
  28. </body>
  29. </html>

然后分别创建console.html\authority.html
general.html\mumber.html\plug.html
最后呈呈现的效果如下
！效果呈现：

二、简单的CSS选择器-基本选择器

笔记：css的基本选择器，有标签选择器，属性选择器，组合选择器等
下面一一来演示：

  1. 标签选择器,语法tag.style=""或tag {属性：值;...}
  2. 属性选择器，语法[attribute=valur]{属性：值；...}
  3. 语法糖id属性选择器,语法#id值{属性：值；...}
  4. 语法糖类选择器，语法.class值{属性：值；...}
  5. 组合选择器,语法所有的属性用逗号隔开{属性：值；...}
    例：
    ```html
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS基本选择器</title>
    <style>
    1.  /* 1.元素选择器 */
    2.   figure div h3 {
    3.      color:blue;
    4.      text-align:center;
    5.      margin:0px;
    6.      font-weight:bold
    7.  }
    8.  /* 2.属性选择器 */
    9.  [name=navbar]{
    10.      background-image:url('../../../1019/static/images/girl.jpg');
    11.      font-size:larger;
    12.      margin:0px;
    13.      height:800px;
    14.  }
    15.  /* 3.语法糖id属性选择器 */
    16.  #topbar {
    17.      font-size:large;
    18.  }
    19.  /* 4.语法糖class属性选择器 */
    20.  .asd{
    21.      text-align:left;
    22.      font-size:medium;
    23.      color:red;
    24.  }
    25.  /* 5.组合选择器,所有选择器之间，用逗号隔开 */
    26.  figure,nav,#topbar,.asd {
    27.      background-color:lightgreen;
    28.  }
    </style>
    </head>
    <body>

    <figure>
    <div>
    <h3>php.cn</h3>
    </div>
    </figure>

<hr> 

  1. <nav name="navbar">
  2.     <ul>
  3.         <li>网站首页</li>
  4.         <li>新闻资讯</li>
  5.         <li>联系我们</li>
  6.     </ul>
  7. </nav>
  8. <hr>
  10. <header id="topbar">
  11.     <div>admin</div>
  12. </header>
  15. <aside>
  16.     <article>
  17.         <ul class="asd">
  18.             <li>加入我们</li>
  19.             <li>更多内容</li>
  20.             <li>售后服务</li>
  21.         </ul>
  22.     </article>
  23. </aside>

</body>
</html>
```

Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：效果实现的不错 以后只要是代码都可以放在代码块中,并且,下次请在https://www.php.cn/member/courses/work.html页面提交作业
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