欧美精品猛交,国产区区区,国产中文欧美综合一区

目錄
◆ 結(jié)構(gòu)偽類選擇器
◆ 偽元素
◆ 標(biāo)準(zhǔn)流
◆ 浮動(dòng)
◆ 清除浮動(dòng)

一、結(jié)構(gòu)偽類選擇器

目標(biāo)：能夠使用結(jié)構(gòu)偽類選擇器在HTML中定位元素

1 作用與優(yōu)勢(shì)：

作用：根據(jù)元素在HTML中的結(jié)構(gòu)關(guān)系查找元素
優(yōu)勢(shì)：減少對(duì)于HTML中類的依賴，有利于保持代碼整潔
場(chǎng)景：常用于查找某父級(jí)選擇器中的子元素

2 選擇器

<html lang="en">
<head>
    <style>
        /* 選中第一個(gè) */
        /* li:first-child {
            background-color: green;
        } */

        /* 最后一個(gè) */
        /* li:last-child {
            background-color: green;
        } */

        /* 任意一個(gè) */
        /* li:nth-child(5) {
            background-color: green;
        } */

        /* 倒數(shù)第xx個(gè) */
        li:nth-last-child(1) {
            background-color: blue;
        }
    </style>
</head>
<body>

    <!-- ul>li{這是第$個(gè)li}*8 -->
    <ul>
        <li>這是第1個(gè)li</li>
        <li>這是第2個(gè)li</li>
        <li>這是第3個(gè)li</li>
        <li>這是第4個(gè)li</li>
        <li>這是第5個(gè)li</li>
        <li>這是第6個(gè)li</li>
        <li>這是第7個(gè)li</li>
        <li>這是第8個(gè)li</li>
    </ul>
</body>
</html>

<html lang="en">
<head>
    <style>
        /* ** 偶數(shù) 2的倍數(shù)*/
        /* li:nth-child(2n) {

            /* *** 奇數(shù) */
        /* li:nth-child(2n+1) { */
            
            /* 找到前3個(gè) */
        /* li:nth-child(-n+3) { */

            /* *** 4的倍數(shù) */
        li:nth-child(4n) {
            background-color: green;
        }
    </style>
</head>
<body>
    <ul>
        <li>這是第1個(gè)li</li>
        <li>這是第2個(gè)li</li>
        <li>這是第3個(gè)li</li>
        <li>這是第4個(gè)li</li>
        <li>這是第5個(gè)li</li>
        <li>這是第6個(gè)li</li>
        <li>這是第7個(gè)li</li>
        <li>這是第8個(gè)li</li>
    </ul>
</body>
</html>

二、偽元素

<head>
    <style>
        .father {
            width: 300px;
            height: 300px;
            background-color: pink;
        }

        .father::before {
            /* 內(nèi)容 */
            /* content屬性必須添加, 否則偽元素不生效 */
            content: '老鼠';
            color: green;
            width: 100px;
            height: 100px;
            background-color: blue;

            /* 默認(rèn)是行內(nèi)元素, 寬高不生效 */
            display: block;
        }

        .father::after {
            content: '大米';
        }
    </style>
</head>
<body>
    <!-- 偽元素 通過(guò)css創(chuàng)建標(biāo)簽, 裝飾性的不重要的小圖 -->

    <!-- 找父級(jí), 在這個(gè)父級(jí)里面創(chuàng)建子級(jí)標(biāo)簽 -->

    <div class="father">愛</div>

    <!-- 老鼠愛大米 -->
</body>

三、標(biāo)準(zhǔn)流

目標(biāo)：能夠認(rèn)識(shí) 標(biāo)準(zhǔn)流的默認(rèn)排布方式及其特點(diǎn)
? 標(biāo)準(zhǔn)流：又稱文檔流，是瀏覽器在渲染顯示網(wǎng)頁(yè)內(nèi)容時(shí)默認(rèn)采用的一套排版規(guī)則，規(guī)定了應(yīng)該以何種方式排列元素
? 常見標(biāo)準(zhǔn)流排版規(guī)則：

塊級(jí)元素：從上往下，垂直布局，獨(dú)占一行
行內(nèi)元素或行內(nèi)塊元素：從左往右，水平布局，空間不夠自動(dòng)折行

小結(jié)
? 標(biāo)準(zhǔn)流中塊級(jí)元素的排版規(guī)則是？
? 從上往下、垂直布局、獨(dú)占一行
? 標(biāo)準(zhǔn)流中行內(nèi)元素或行內(nèi)塊元素的排版規(guī)則是？
? 從左往右、水平布局、空間不夠自動(dòng)折行

四、浮動(dòng)

目標(biāo)：能夠認(rèn)識(shí)使用浮動(dòng)的作用，了解浮動(dòng)的特點(diǎn)
學(xué)習(xí)路徑：

浮動(dòng)的作用
浮動(dòng)的代碼
浮動(dòng)的特點(diǎn)
浮動(dòng)的案例

1 浮動(dòng)的作用

2 浮動(dòng)的代碼

<head>
    <style>
        /* img {
            float: left;
        } */

        div {
            width: 100px;
            height: 100px;
        }

        .one {
            background-color: pink;
            float: left;
        }

        .two {
            background-color: skyblue;
            /* flr */
            /* float: right; */
            float: left;
        }
    </style>
</head>
<body>
    <!-- 1. 圖文環(huán)繞 -->
    <!-- <img src="./images/1.jpg" alt="">
    時(shí)代呼喚著我們，人民期待著我們。全黨必須牢記，堅(jiān)持黨的全面領(lǐng)導(dǎo)是堅(jiān)持和發(fā)展中國(guó)特色社會(huì)主義的必由之路，中國(guó)特色社會(huì)主義是實(shí)現(xiàn)中華民族偉大復(fù)興的必由之路，團(tuán)結(jié)奮斗是中國(guó)人民創(chuàng)造歷史偉業(yè)的必由之路，貫徹新發(fā)展理念是新時(shí)代我國(guó)發(fā)展壯大的必由之路，全面從嚴(yán)治黨是黨永葆生機(jī)活力、走好新的趕考之路的必由之路。 戰(zhàn)略性工作  全黨要把青年工作作為戰(zhàn)略性工作來(lái)抓，用黨的科學(xué)理論武裝青年，用黨的初心使命感召青年，做青年朋友的知心人、青年工作的熱心人、青年群眾的引路人-->

    <!-- 2. 網(wǎng)頁(yè)布局: 塊在一行排列 -->
    <div class="one">one</div>
    <div class="two">two</div>
</body>

小結(jié)
? 浮動(dòng)的作用是什么？

早期作用：圖文環(huán)繞
現(xiàn)在作用：用于布局，讓垂直布局的盒子變成水平布局，如：一個(gè)在左，一個(gè)在右
? 左浮動(dòng)的屬性是？右浮動(dòng)的屬性是？
左浮動(dòng)：float : left
右浮動(dòng)：float : right

3 浮動(dòng)的特點(diǎn)

小結(jié)
? 浮動(dòng)元素的特點(diǎn)有哪些？

浮動(dòng)元素會(huì)脫標(biāo)，在標(biāo)準(zhǔn)流中不占位置
浮動(dòng)元素比標(biāo)準(zhǔn)流高出半個(gè)級(jí)別，可以覆蓋標(biāo)準(zhǔn)流中的元素
浮動(dòng)找浮動(dòng)，下一個(gè)浮動(dòng)元素會(huì)在上一個(gè)浮動(dòng)元素后面左右浮動(dòng)
浮動(dòng)元素有特殊的顯示效果：① 一行可以顯示多個(gè) ② 可以設(shè)置寬高

<head>
    <style>
        /* 浮動(dòng)的標(biāo)簽  頂對(duì)齊 */
        /* 浮動(dòng): 在一行排列, 寬高生效 -- 浮動(dòng)后的標(biāo)簽具備行內(nèi)塊特點(diǎn) */
        .one {
            width: 100px;
            height: 100px;
            background-color: pink;

            float: left;

            margin-top: 50px;
        }

        .two {
            width: 200px;
            height: 200px;
            background-color: skyblue;

            float: left;

            /* 因?yàn)橛懈?dòng), 不能生效 - 盒子無(wú)法水平居中 */
            margin: 0 auto;
        }

        .three {
            width: 300px;
            height: 300px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="one">one</div>
    <div class="two">two</div>
    <div class="three">three</div>
</body>

4 浮動(dòng)的案例

<head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .top {
            /* 寬度高度背景色 */
            height: 40px;
            background-color: #333;
        }

        .header {
            width: 1226px;
            height: 100px;
            background-color: #ffc0cb;
            margin: 0 auto;
        }

        .content {
            width: 1226px;
            height: 460px;
            background-color: green;
            margin: 0 auto;
        }

        .left {
            float: left;
            width: 234px;
            height: 460px;
            background-color: #ffa500;
        }

        .right {
            float: left;
            width: 992px;
            height: 460px;
            background-color: #87ceeb;
        }

        /* CSS書寫順序: 瀏覽器執(zhí)行效率更高
            1. 浮動(dòng) / display
            2. 盒子模型: margin border padding 寬度高度背景色
            3. 文字樣式
        */
    </style>
</head>
<body>
    <!-- 通欄的盒子: 寬度和瀏覽器寬度一樣大 -->
    <div class="top"></div>
    <div class="header">頭部</div>
    <div class="content">
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
</body>

head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        div {
            height: 614px;
            width: 1226px;
            background-color: red;
            margin: 0 auto;
        }
        .left {
            background-color: #800080;
            width: 234px;
            height: 614px;
            float: left;
        }
        .right {
            background-color: blue;
            width: 978px;
            height: 614px;
            float: right;
        }
        .right li {
            width: 234px;
            height: 300px;
            background-color: #87ceeb;
            margin-bottom: 14px;
            margin-right: 14px;
            /* 取消li的小圓點(diǎn) */
            list-style: none; 
            float: left;
        }
        .right li:nth-child(4n) {
            margin-right: 0;
        }
    </style>
</head>
<body>
    <div>
      <div class="left">

      </div>
      <div class="right">
        <ul>
            <li>li</li>
            <li>li</li>
            <li>li</li>
            <li>li</li>
            <li>li</li>
            <li>li</li>
            <li>li</li>
            <li>li</li>
        </ul>

      </div>

    </div>
</body>

<head>
    <style>
       .nav li {
        float: left;
        list-style: none;
        background-color: #ffc0cb;
        line-height: 50px;
        text-align: center;
        font-size: 16px;
        width: 80px;
        height: 50px;
       }
       .nav li a {
        /* float: left; */
        display: inline-block;
        width: 80px;
        height: 50px;
        text-decoration: none;
        color: white;
       }
       .nav li a:hover {
        background-color: #008000;
       }
    </style>
</head>
<body>
    <div class="nav">
    <ul>
        <!-- 導(dǎo)航標(biāo)準(zhǔn)寫法 ul-li-a -->
        <li><a href="">新聞1</a></li> 
        <li><a href="">新聞2</a></li>
        <li><a href="">新聞3</a></li>
        <li><a href="">新聞4</a></li>
        <li><a href="">新聞5</a></li>
        <li><a href="">新聞6</a></li>
        <li><a href="">新聞7</a></li>
        <li><a href="">新聞8</a></li>
    </ul>
    </div>
</body>

書寫網(wǎng)頁(yè)導(dǎo)航步驟：

清除默認(rèn)的margin和padding
找到ul，去除小圓點(diǎn) list-style: none;
找到li標(biāo)簽，設(shè)置浮動(dòng)讓li一行中顯示
找到a標(biāo)簽，設(shè)置寬高 → a標(biāo)簽?zāi)J(rèn)是行內(nèi)元素，默認(rèn)不能設(shè)置寬高？？
? 方法一：給a標(biāo)簽設(shè)置 display : inline-block
? 方法二：給a標(biāo)簽設(shè)置 display : block
? 方法三：給a設(shè)置 float : left

五、清除浮動(dòng)

清除浮動(dòng)的介紹
清除浮動(dòng)的方法

1 清除浮動(dòng)的介紹
? 含義：清除浮動(dòng)帶來(lái)的影響
? 影響：如果子元素浮動(dòng)了，此時(shí)子元素不能撐開標(biāo)準(zhǔn)流的塊級(jí)父元素
? 原因：
? 子元素浮動(dòng)后脫標(biāo) → 不占位置
? 目的：
? 需要父元素有高度，從而不影響其他網(wǎng)頁(yè)元素的布局

小結(jié)
? 清除浮動(dòng)的含義是什么？
? 清除浮動(dòng)帶來(lái)的影響
? 影響：如果子元素浮動(dòng)了，此時(shí)子元素不能撐開父元素
? 清除浮動(dòng)的目的是什么？
? 需要父元素有高度，從而不影響其他網(wǎng)頁(yè)元素的布局

2.1 清除浮動(dòng)的方法 — ① 直接設(shè)置父元素高度

2.2 清除浮動(dòng)的方法 — ② 額外標(biāo)簽法

? 操作：

在父元素內(nèi)容的最后添加一個(gè)塊級(jí)元素
給添加的塊級(jí)元素設(shè)置 clear:both
? 特點(diǎn)：
? 缺點(diǎn)：會(huì)在頁(yè)面中添加額外的標(biāo)簽，會(huì)讓頁(yè)面的HTML結(jié)構(gòu)變得復(fù)雜

額外標(biāo)簽法

<head>
    <style>
        .top {
            margin: 0 auto;
            width: 1000px;
            /* height: 300px; */
            background-color: pink;
        }

        .bottom {
            height: 100px;
            background-color: green;
        }

        .left {
            float: left;
            width: 200px;
            height: 300px;
            background-color: #ccc;
        }

        .right {
            float: right;
            width: 790px;
            height: 300px;
            background-color: skyblue;
        }
         /*額外標(biāo)簽法*/
        .clearfix {
            /* 清除左右兩側(cè)浮動(dòng)的影響 */
            clear: both;
        }
    </style>
</head>
<body>
    <!-- 父子級(jí)標(biāo)簽, 子級(jí)浮動(dòng), 父級(jí)沒(méi)有高度, 后面的標(biāo)準(zhǔn)流盒子會(huì)受影響, 顯示到上面的位置 -->
    <div class="top">
        <div class="left"></div>
        <div class="right"></div>
        <div class="clearfix"></div>
    </div>
    <div class="bottom"></div>
</body>

2.3 清除浮動(dòng)的方法 — ③ 單偽元素清除法

偽元素消除法

<head>
    <style>
        .top {
            margin: 0 auto;
            width: 1000px;
            /* height: 300px; */
            background-color: pink;
        }

        .bottom {
            height: 100px;
            background-color: green;
        }

        .left {
            float: left;
            width: 200px;
            height: 300px;
            background-color: #ccc;
        }

        .right {
            float: right;
            width: 790px;
            height: 300px;
            background-color: skyblue;
        }

        /* 單偽元素清除浮動(dòng) 和 額外標(biāo)簽法原理是一樣的 */
        /* top盒子添加clearfix 類名選擇器,添加塊內(nèi)屬性*/
        .clearfix::after {
            content: '';

            /* 偽元素添加的標(biāo)簽是行內(nèi), 要求塊 */
            display: block;
            clear: both;

            /* 為了兼容性 適配低版本瀏覽器 */
            height: 0;
            visibility: hidden;
        }
    </style>
</head>
<body>
    <!-- 父子級(jí)標(biāo)簽, 子級(jí)浮動(dòng), 父級(jí)沒(méi)有高度, 后面的標(biāo)準(zhǔn)流盒子會(huì)受影響, 顯示到上面的位置 -->
    <div class="top clearfix">
        <div class="left"></div>
        <div class="right"></div>
        <!-- 通過(guò)css 添加標(biāo)簽 clearfix -->
    </div>
    <div class="bottom"></div>
</body>

2.4 清除浮動(dòng)的方法 — ④ 雙偽元素清除法

雙偽元素消除法

<head>
    <style>
        .top {
            margin: 0 auto;
            width: 1000px;
            /* height: 300px; */
            background-color: pink;
        }

        .bottom {
            height: 100px;
            background-color: green;
        }

        .left {
            float: left;
            width: 200px;
            height: 300px;
            background-color: #ccc;
        }

        .right {
            float: right;
            width: 790px;
            height: 300px;
            background-color: skyblue;
        }

        /*  .clearfix::before 作用: 解決外邊距塌陷問(wèn)題
            外邊距塌陷: 父子標(biāo)簽, 都是塊級(jí), 子級(jí)加margin會(huì)影響父級(jí)的位置
        */
        /* 清除浮動(dòng) */
        .clearfix::before,
        .clearfix::after {
            content: '';
            display: table;
        }

        /* 真正清除浮動(dòng)的標(biāo)簽 */
        .clearfix::after {
            /* content: '';
            display: table; */
            clear: both;
        }
    </style>
</head>
<body>
    <!-- 父子級(jí)標(biāo)簽, 子級(jí)浮動(dòng), 父級(jí)沒(méi)有高度, 后面的標(biāo)準(zhǔn)流盒子會(huì)受影響, 顯示到上面的位置 -->
    <div class="top clearfix">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div class="bottom"></div>
</body>

2.5 清除浮動(dòng)的方法 — ⑤ 給父元素設(shè)置overflow : hidden
? 操作：

直接給父元素設(shè)置 overflow : hidden
? 特點(diǎn)：
? 優(yōu)點(diǎn)：方便

給父元素設(shè)置overflow

<head>
    <style>
        .top {
            margin: 0 auto;
            width: 1000px;
            /* height: 300px; */
            background-color: pink;
            overflow: hidden;
        }

        .bottom {
            height: 100px;
            background-color: green;
        }

        .left {
            float: left;
            width: 200px;
            height: 300px;
            background-color: #ccc;
        }

        .right {
            float: right;
            width: 790px;
            height: 300px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <!-- 父子級(jí)標(biāo)簽, 子級(jí)浮動(dòng), 父級(jí)沒(méi)有高度, 后面的標(biāo)準(zhǔn)流盒子會(huì)受影響, 顯示到上面的位置 -->
    <div class="top">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div class="bottom"></div>
</body>

清除浮動(dòng)小結(jié)

清除浮動(dòng)（拓展補(bǔ)充）BFC的介紹
? 塊格式化上下文（Block Formatting Context）：BFC
? 是Web頁(yè)面的可視CSS渲染的一部分，是塊盒子的布局過(guò)程發(fā)生的區(qū)域，也是浮動(dòng)元素與其他元素交互的區(qū)域。
? 創(chuàng)建BFC方法：

html標(biāo)簽是BFC盒子
浮動(dòng)元素是BFC盒子
行內(nèi)塊元素是BFC盒子
overflow屬性取值不為visible。如：auto、hidden…
……
? BFC盒子常見特點(diǎn)：
BFC盒子會(huì)默認(rèn)包裹住內(nèi)部子元素（標(biāo)準(zhǔn)流、浮動(dòng)）→ 應(yīng)用：清除浮動(dòng)
BFC盒子本身與子元素之間不存在margin的塌陷現(xiàn)象 → 應(yīng)用：解決margin的塌陷
……

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

web-6

web-6

一、結(jié)構(gòu)偽類選擇器

二、偽元素

三、標(biāo)準(zhǔn)流

四、浮動(dòng)

五、清除浮動(dòng)

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

web-6

一、結(jié)構(gòu)偽類選擇器

二、偽元素

三、標(biāo)準(zhǔn)流

四、浮動(dòng)

五、清除浮動(dòng)

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

三、標(biāo)準(zhǔn)流

四、浮動(dòng)