1210-iframe與css初識(shí)

1.iframe內(nèi)聯(lián)框架的工作原理

    <!-- a標(biāo)簽內(nèi)聯(lián)iframe標(biāo)簽時(shí)，必須給a標(biāo)簽設(shè)置一個(gè)target，以及給iframe設(shè)置name，值要對(duì)等 -->
    <!-- iframe標(biāo)簽要放文字的時(shí)候，可以加個(gè)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>

實(shí)戰(zhàn)演示：

2.iframe做一個(gè)簡(jiǎn)單迷你后臺(tái)

給iframe加name屬性，a標(biāo)簽加target屬性，值相等，就可以內(nèi)聯(lián)

    <header class="header">網(wǎng)站管理后臺(tái)</header>
    <div class="aside">
    <!-- 側(cè)邊欄 -->
    <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">系統(tǒng)設(shè)置</a>
    </div>
    <div class="main">
    <!-- 主體 -->
    <iframe srcdoc="請(qǐng)點(diǎn)擊側(cè)邊欄導(dǎo)航" name="content"></iframe>
    </div>

實(shí)戰(zhàn)演示：

3.布局元素

值	說明
header	頁頭
aside	側(cè)邊欄
main	主體
footer	頁腳
div	通用容器塊標(biāo)簽

    <header><h1>header</h1></header>
    <!-- div塊標(biāo)簽 -->
    <div class="container">
        <!-- 側(cè)邊欄 -->
        <aside>
            <h1>aside</h1>
        </aside>
        <!-- 主體 -->
        <main>
            <h1>main</h1>
           <!-- <article>今天是個(gè)好日子</article> -->
            <div>
                <section>
                    廣告位
                </section>
                <section>
                    廣告位
                </section>
            </div>
        </main>
    </div>
    <!-- 頁腳 -->
   <footer>footer</footer>

實(shí)戰(zhàn)演示：

4.初識(shí)css

術(shù)語：規(guī)則，選擇器，聲明塊，屬性和值

選擇器：h1
聲明塊：由一堆”{…}”包住的內(nèi)容
規(guī)則：選擇器 + 聲明塊
屬性和值：寫在聲明塊中的名值對(duì)

        /* 標(biāo)簽選擇器 */
        h1{
            color: aquamarine;
        }
        /* 類選擇器 */
        .title{
            color: blue;
        }
        /* id選擇器 */
        #hello{
            color: blueviolet;
        }
        /* 
        css是層疊樣式
        優(yōu)先級(jí)：標(biāo)簽<類<id
        */

實(shí)戰(zhàn)演示：

5.層疊與優(yōu)先級(jí)

1.優(yōu)先級(jí)

1.css是圖層樣式表
2.優(yōu)先級(jí)：元素標(biāo)簽 > 類class < id屬性
3.!important 可以提升最大優(yōu)先級(jí)

圖示：

2.層疊
- 影響css樣式的四個(gè)來源
  1. HTML默認(rèn)樣式
  2. 瀏覽器用戶代理樣式
  3. 用戶自定義：當(dāng)前頁面css代碼
  4. 行內(nèi)：style

作業(yè)：iframe寫一個(gè)簡(jiǎn)單的小后臺(tái)

    <!-- 頭部 -->
    <header class="header"><h3>商城后臺(tái)管理系統(tǒng)</h3></header>
    <div class="aside">
    <!-- 側(cè)邊欄 -->
        <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">會(huì)員管理</a>
        <a href="/1209/demo5.html" target="con">商家管理</a>
    </div>
    <!-- 主體 -->
    <div class="main">
        <iframe srcdoc="請(qǐng)點(diǎn)擊側(cè)邊欄" name="con"></iframe>
    </div>