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

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

1、iframe内联框架

语法iframe.name=a.target
管理系统后台admin.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>管理系统后台</title>
</head>
<body>
    <div>
        <h3>XX网站后台管理系统v1.0.xx</h3>
        <header><em>admin</em></header>
        <button>退出</button>
    </div>
    <nav>
        <figure>
        <figcaption>管理系统导航</figcaption>
        <a href="console.html" target="content">控制台</a>
        <a href="authority.html" target="content">权限管理</a>
        <a href="general.html" target="content">常规管理</a>
        <a href="member.html" target="content">会员管理</a>
        <a href="plug.html" target="content">插件管理</a>
    </figure>
    </nav>
    <main>
        <iframe src="" frameborder="0" name="content"></iframe>
    </main>
</body>
</html>

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

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

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

标签选择器,语法tag.style=""或tag {属性：值;...}
属性选择器，语法[attribute=valur]{属性：值；...}
语法糖id属性选择器,语法#id值{属性：值；...}
语法糖类选择器，语法.class值{属性：值；...}

组合选择器,语法所有的属性用逗号隔开{属性：值；...}
例：
```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.元素选择器 */
  figure div h3 {
     color:blue;
     text-align:center;
     margin:0px;
     font-weight:bold
 }
 /* 2.属性选择器 */
 [name=navbar]{
     background-image:url('../../../1019/static/images/girl.jpg');
     font-size:larger;
     margin:0px;
     height:800px;
 }
 /* 3.语法糖id属性选择器 */
 #topbar {
     font-size:large;
 }
 /* 4.语法糖class属性选择器 */
 .asd{
     text-align:left;
     font-size:medium;
     color:red;
 }
 /* 5.组合选择器,所有选择器之间，用逗号隔开 */
 figure,nav,#topbar,.asd {
     background-color:lightgreen;
 }

</style>
</head>
<body>

<hr>

<nav name="navbar">
    <ul>
        <li>网站首页</li>
        <li>新闻资讯</li>
        <li>联系我们</li>
    </ul>
</nav>
<hr>
<header id="topbar">
    <div>admin</div>
</header>
<aside>
    <article>
        <ul class="asd">
            <li>加入我们</li>
            <li>更多内容</li>
            <li>售后服务</li>
        </ul>
    </article>
</aside>

</body>
</html>
```

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

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

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

1、iframe内联框架

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

相关文章