国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

啊~ 五環(huán) 你比四環(huán)多一環(huán) 啊~ 五環(huán) 你比六環(huán)少一環(huán)

Lycheeee / 1442人閱讀

摘要：又想起年的北京奧運(yùn)會(huì)其實(shí)更多的是小岳岳的五環(huán)還有的哼就把車子開上五環(huán)廢話不說(shuō)了否則就變成演唱會(huì)了。我們最開始將這幾個(gè)元素絕對(duì)定位，并一次設(shè)置他們的位置得到如下圖的樣子也就是我們所說(shuō)的五個(gè)環(huán)但他們不是互相嵌套的。

又想起08年的北京奧運(yùn)會(huì) 其實(shí)更多的是 小岳岳的五環(huán) 還有hot-dog的rap 哼~就把車子開上五環(huán) 廢話不說(shuō)了 否則就變成演唱會(huì)了。

首先呢先分析我們需要設(shè)置五個(gè)寬高相等的div 并且要把border-radius屬性值設(shè)為50% 設(shè)置上10px的實(shí)心邊框默認(rèn)顏色為黑色 當(dāng)然只要比50%大都可以成圓。學(xué)過html和css都知道 啊 那這個(gè)簡(jiǎn)單直接寫不就得了 仔細(xì)看圖片你會(huì)發(fā)現(xiàn)這幾個(gè)是一環(huán)套著一環(huán)的，第一次看到時(shí)覺得“哇 這是啥呀 咋還能一環(huán)套一環(huán)呢 用 z-index只能解決一部分啊” 后來(lái)才發(fā)現(xiàn)這里的奧秘 這是我們需要知道一個(gè)css3偽類選擇器 什么是為類選擇器呢 請(qǐng)自行百度 哈哈 以我現(xiàn)在的水平 我也說(shuō)不清楚。接著說(shuō)我們需要這個(gè)（::after）意思是：在對(duì)象后（依據(jù)對(duì)象樹的邏輯結(jié)構(gòu)）發(fā)生的內(nèi)容。
用來(lái)和content屬性一起使用，并且必須定義content屬性
content: ""; /:before和:after必帶技能，重要性為滿5顆星/
什么意思呢 就是現(xiàn)在我已經(jīng)創(chuàng)建了一個(gè)div元素了 現(xiàn)在我需要在這份div后繼續(xù)創(chuàng)建一個(gè)跟他一模一樣的div元素 這時(shí)我們需要用到::after偽類選擇器 讓這兩個(gè)div重合。但是這里有個(gè)小坑 你發(fā)現(xiàn)這兩個(gè)定位的元素根本重合不到一起

這是因?yàn)橛脗晤愡x擇器后創(chuàng)建的元素是最開始元素的子元素并且我們最開始為這個(gè)div設(shè)置上了10px的邊框 所以會(huì)呈現(xiàn)出如圖片中的場(chǎng)景 這時(shí)我們需要將這個(gè)子元素向左移10px向上移10px就會(huì)重合了。

我們最開始將這幾個(gè)元素絕對(duì)定位，并一次設(shè)置他們的位置得到如下圖的樣子 也就是我們所說(shuō)的五個(gè)環(huán)但他們不是互相嵌套的。

現(xiàn)在我們來(lái)解決一次嵌套 拿藍(lán)色和黃色來(lái)說(shuō) 現(xiàn)在我們有四個(gè)元素在這里兩個(gè)黃色的在上方兩個(gè)藍(lán)色的在下方。就像最開始圖片所展示的黃色的左邊套在藍(lán)色的上面 藍(lán)色的右面套在黃色的上面。那么我們需要設(shè)置藍(lán)色div的子元素（就是那個(gè)用偽類選擇器生成的那個(gè)元素）的z-index的值可以設(shè)置成1或是大于零的數(shù)。這樣就會(huì)出現(xiàn)這樣的效果。（如下圖）

這時(shí)藍(lán)色div的子元素都在黃色的上面，現(xiàn)在我們把藍(lán)色div的子元素的border-bottom-color設(shè)置為transparent（透明）


是不是就邊成了一個(gè)套著另一個(gè) 以此類推就變成了五環(huán) 呦 呦。。。

html：
css： 
   * {
            padding: 0;
            margin: 0;
        }
        div.circle , .circle::after{
            width: 200px;
            height: 200px;
            border-radius: 50%;
            border: 10px solid black;
            position: absolute;

        }
        div.blue {
            border-color: blue;
        }
        div.blue::after {
            content: " ";
            border-color: blue;
            top: -10px;
            left:-10px;
            z-index: 1;
            border-bottom-color: transparent;
        }
        div.black {
            border-color: black;
            top: 0;
            left: 230px;
        }
        div.black::after {
            top: -10px;
            left: -10px;
            content: "";
            border-color: black;
            z-index: 1;
            border-left-color: transparent;
        }
        div.red {
            border-color: red;
            top: 0;
            left: 460px;
        }
        div.red::after {
            border-color: red;
            top: -10px;
            left: -10px;
            content: "";
            z-index: 2;
            border-left-color: transparent;
        }
        div.yellow {
            border-color:yellow;
            top: 110px;
            left: 115px;
        }
        div.yellow::after {
            top: -10px;
            left: -10px;
            content: "";
            border-color: yellow;

        }
        div.green {
            top: 110px;
            left: 345px;
            border-color: green;
        }
        div.green::after {
            top: -10px;
            left: -10px;
            content: "";
            border-color: green;
            z-index: 1;
            border-top-color: transparent;
        }
完整代碼： 



    
    Title

此篇五環(huán)就結(jié)束了 如果哪里有錯(cuò)誤請(qǐng)指出 多多指教 共勉共勉。原諒我這孱弱文學(xué)功底還有我這個(gè)沒有標(biāo)準(zhǔn)的分布。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/51112.html

相關(guān)文章

  • 啊 五環(huán) 你比四環(huán)多一環(huán)，啊 五環(huán) 你比六環(huán)少一環(huán)

    摘要：顯然目前并不是我們想要的，因此需要用定位來(lái)讓每一環(huán)到達(dá)其應(yīng)該在的位置。因?yàn)槊恳粋€(gè)環(huán)前面的環(huán)都有高度，所以要在相同的樣式里面加一個(gè)絕對(duì)定位讓每一個(gè)環(huán)都能脫離文檔流，再來(lái)看一下效果。這樣初步的五環(huán)就形成了。 說(shuō)到奧運(yùn)五環(huán)，毋庸置疑，作為中國(guó)人我們都非常的熟悉，那么你知道如何用 html+css 來(lái)實(shí)現(xiàn)它嗎？If you sayI dont know，那么電腦屏幕前的你就一定要看過來(lái)啦！ 首...

    zombieda 評(píng)論0 收藏0

  • 啊 五環(huán) 你比四環(huán)多一環(huán)，啊 五環(huán) 你比六環(huán)少一環(huán)

    摘要：顯然目前并不是我們想要的，因此需要用定位來(lái)讓每一環(huán)到達(dá)其應(yīng)該在的位置。因?yàn)槊恳粋€(gè)環(huán)前面的環(huán)都有高度，所以要在相同的樣式里面加一個(gè)絕對(duì)定位讓每一個(gè)環(huán)都能脫離文檔流，再來(lái)看一下效果。這樣初步的五環(huán)就形成了。 說(shuō)到奧運(yùn)五環(huán)，毋庸置疑，作為中國(guó)人我們都非常的熟悉，那么你知道如何用 html+css 來(lái)實(shí)現(xiàn)它嗎？If you sayI dont know，那么電腦屏幕前的你就一定要看過來(lái)啦！ 首...

    wuyangchun 評(píng)論0 收藏0

  • 啊~ 五環(huán) 你比四環(huán)多一環(huán) 啊~ 五環(huán) 你比六環(huán)少一環(huán)

    摘要：又想起年的北京奧運(yùn)會(huì)其實(shí)更多的是小岳岳的五環(huán)還有的哼就把車子開上五環(huán)廢話不說(shuō)了否則就變成演唱會(huì)了。我們最開始將這幾個(gè)元素絕對(duì)定位，并一次設(shè)置他們的位置得到如下圖的樣子也就是我們所說(shuō)的五個(gè)環(huán)但他們不是互相嵌套的。 又想起08年的北京奧運(yùn)會(huì) 其實(shí)更多的是 小岳岳的五環(huán) 還有hot-dog的rap 哼~就把車子開上五環(huán) 廢話不說(shuō)了 否則就變成演唱會(huì)了。showImg(https://segm...

    Eidesen 評(píng)論0 收藏0

  • 五環(huán)之歌之PHP分頁(yè)

    摘要：根據(jù)以往的經(jīng)驗(yàn)，對(duì)于很多初學(xué)者，分頁(yè)功能實(shí)現(xiàn)起來(lái)還是有一定的困難的，為了幫大家解決這樣的問題特此獻(xiàn)上五環(huán)之歌。正式進(jìn)入千鋒五環(huán)之歌之步驟實(shí)現(xiàn)分頁(yè)功能。 根據(jù)以往的經(jīng)驗(yàn)，對(duì)于很多初學(xué)者，分頁(yè)功能實(shí)現(xiàn)起來(lái)還是有一定的困難的，為了幫大家解決這樣的問題：特此獻(xiàn)上五環(huán)之歌。從此分頁(yè)功能便是如小妹一樣簡(jiǎn)練，漂亮，精干。哈哈，不閑扯了。正式進(jìn)入千鋒PHP五環(huán)之歌之步驟實(shí)現(xiàn)分頁(yè)功能。第一環(huán)：計(jì)算總的記...

    未東興 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<