1210-iframe内嵌与css初识

1210-iframe与css初识

1.iframe内联框架的工作原理

    <!-- a标签内联iframe标签时，必须给a标签设置一个target，以及给iframe设置name，值要对等 -->
    <!-- iframe标签要放文字的时候，可以加个srcdoc，里面可以放文字及元素 -->
    <div>
        <a href="https://j.map.baidu.com/36/OU8" target="gd">广东</a>
        <iframe srcdoc="广东地图" name="gd"></iframe>
    </div>
    <div>
        <a href="https://j.map.baidu.com/36/OU8" target="sz">深圳</a>
        <iframe srcdoc="深圳地图" name="sz"></iframe>
    </div>

实战演示：

---

2.iframe做一个简单迷你后台

给iframe加name属性，a标签加target属性，值相等，就可以内联

    <header class="header">网站管理后台</header>
    <div class="aside">
    <!-- 侧边栏 -->
    <a href="/1209/demo3.html" target="content">首页</a>
    <a href="/1209/demo5.html" target="content">用户管理</a>
    <a href="/1208/demo3.html" target="content">订单管理</a>
    <a href="/1208/demo1.html" target="content">系统设置</a>
    </div>
    <div class="main">
    <!-- 主体 -->
    <iframe srcdoc="请点击侧边栏导航" name="content"></iframe>
    </div>

实战演示：

---

3.布局元素

值	说明
header	页头
aside	侧边栏
main	主体
footer	页脚
div	通用容器块标签

    <header><h1>header</h1></header>
    <!-- div块标签 -->
    <div class="container">
        <!-- 侧边栏 -->
        <aside>
            <h1>aside</h1>
        </aside>
        <!-- 主体 -->
        <main>
            <h1>main</h1>
           <!-- <article>今天是个好日子</article> -->
            <div>
                <section>
                    广告位
                </section>
                <section>
                    广告位
                </section>
            </div>
        </main>
    </div>
    <!-- 页脚 -->
   <footer>footer</footer>

实战演示：

---

4.初识css

术语：规则，选择器，声明块，属性和值

• 选择器：h1
• 声明块：由一堆”{…}”包住的内容
• 规则：选择器 + 声明块
• 属性和值：写在声明块中的名值对

        /* 标签选择器 */
        h1{
            color: aquamarine;
        }
        /* 类选择器 */
        .title{
            color: blue;
        }
        /* id选择器 */
        #hello{
            color: blueviolet;
        }
        /* 
        css是层叠样式
        优先级：标签<类<id
        */

实战演示：

---

5.层叠与优先级

• 1.优先级

  1.css是图层样式表
  2.优先级：元素标签 > 类class < id属性
  3.!important 可以提升最大优先级

图示：

• 2.层叠
  • 影响css样式的四个来源
    1. HTML默认样式
    2. 浏览器用户代理样式
    3. 用户自定义：当前页面css代码
    4. 行内：style

---

作业：iframe写一个简单的小后台

    <!-- 头部 -->
    <header class="header"><h3>商城后台管理系统</h3></header>
    <div class="aside">
    <!-- 侧边栏 -->
        <a href="/1209/demo1.html" target="con">控制面板</a>
        <a href="/1209/demo2.html" target="con">商品分类</a>
        <a href="/1209/demo3.html" target="con">商品管理</a>
        <a href="/1209/demo4.html" target="con">会员管理</a>
        <a href="/1209/demo5.html" target="con">商家管理</a>
    </div>
    <!-- 主体 -->
    <div class="main">
        <iframe srcdoc="请点击侧边栏" name="con"></iframe>
    </div>