資訊專欄INFORMATION COLUMN
摘要：又想起年的北京奧運會其實更多的是小岳岳的五環(huán)還有的哼就把車子開上五環(huán)廢話不說了否則就變成演唱會了。我們最開始將這幾個元素絕對定位，并一次設(shè)置他們的位置得到如下圖的樣子也就是我們所說的五個環(huán)但他們不是互相嵌套的。
又想起08年的北京奧運會 其實更多的是 小岳岳的五環(huán) 還有hot-dog的rap 哼~就把車子開上五環(huán) 廢話不說了 否則就變成演唱會了。
首先呢先分析我們需要設(shè)置五個寬高相等的div 并且要把border-radius屬性值設(shè)為50% 設(shè)置上10px的實心邊框默認(rèn)顏色為黑色 當(dāng)然只要比50%大都可以成圓。學(xué)過html和css都知道 啊 那這個簡單直接寫不就得了 仔細(xì)看圖片你會發(fā)現(xiàn)這幾個是一環(huán)套著一環(huán)的，第一次看到時覺得“哇 這是啥呀 咋還能一環(huán)套一環(huán)呢 用 z-index只能解決一部分啊” 后來才發(fā)現(xiàn)這里的奧秘 這是我們需要知道一個css3偽類選擇器 什么是為類選擇器呢 請自行百度 哈哈 以我現(xiàn)在的水平 我也說不清楚。接著說我們需要這個（::after）意思是：在對象后（依據(jù)對象樹的邏輯結(jié)構(gòu)）發(fā)生的內(nèi)容。
用來和content屬性一起使用，并且必須定義content屬性
content: ""; /:before和:after必帶技能，重要性為滿5顆星/
什么意思呢 就是現(xiàn)在我已經(jīng)創(chuàng)建了一個div元素了 現(xiàn)在我需要在這份div后繼續(xù)創(chuàng)建一個跟他一模一樣的div元素 這時我們需要用到::after偽類選擇器 讓這兩個div重合。但是這里有個小坑 你發(fā)現(xiàn)這兩個定位的元素根本重合不到一起
這是因為用偽類選擇器后創(chuàng)建的元素是最開始元素的子元素并且我們最開始為這個div設(shè)置上了10px的邊框 所以會呈現(xiàn)出如圖片中的場景 這時我們需要將這個子元素向左移10px向上移10px就會重合了。
我們最開始將這幾個元素絕對定位，并一次設(shè)置他們的位置得到如下圖的樣子 也就是我們所說的五個環(huán)但他們不是互相嵌套的。
現(xiàn)在我們來解決一次嵌套 拿藍(lán)色和黃色來說 現(xiàn)在我們有四個元素在這里兩個黃色的在上方兩個藍(lán)色的在下方。就像最開始圖片所展示的黃色的左邊套在藍(lán)色的上面 藍(lán)色的右面套在黃色的上面。那么我們需要設(shè)置藍(lán)色div的子元素（就是那個用偽類選擇器生成的那個元素）的z-index的值可以設(shè)置成1或是大于零的數(shù)。這樣就會出現(xiàn)這樣的效果。（如下圖）
這時藍(lán)色div的子元素都在黃色的上面，現(xiàn)在我們把藍(lán)色div的子元素的border-bottom-color設(shè)置為transparent（透明）
是不是就邊成了一個套著另一個 以此類推就變成了五環(huán) 呦 呦。。。
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é)束了 如果哪里有錯誤請指出 多多指教 共勉共勉。原諒我這孱弱文學(xué)功底還有我這個沒有標(biāo)準(zhǔn)的分布。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/51112.html
摘要：顯然目前并不是我們想要的，因此需要用定位來讓每一環(huán)到達(dá)其應(yīng)該在的位置。因為每一個環(huán)前面的環(huán)都有高度，所以要在相同的樣式里面加一個絕對定位讓每一個環(huán)都能脫離文檔流，再來看一下效果。這樣初步的五環(huán)就形成了。 說到奧運五環(huán)，毋庸置疑，作為中國人我們都非常的熟悉，那么你知道如何用 html+css 來實現(xiàn)它嗎？If you sayI dont know，那么電腦屏幕前的你就一定要看過來啦！ 首...
摘要：顯然目前并不是我們想要的，因此需要用定位來讓每一環(huán)到達(dá)其應(yīng)該在的位置。因為每一個環(huán)前面的環(huán)都有高度，所以要在相同的樣式里面加一個絕對定位讓每一個環(huán)都能脫離文檔流，再來看一下效果。這樣初步的五環(huán)就形成了。 說到奧運五環(huán)，毋庸置疑，作為中國人我們都非常的熟悉，那么你知道如何用 html+css 來實現(xiàn)它嗎？If you sayI dont know，那么電腦屏幕前的你就一定要看過來啦！ 首...
摘要：又想起年的北京奧運會其實更多的是小岳岳的五環(huán)還有的哼就把車子開上五環(huán)廢話不說了否則就變成演唱會了。我們最開始將這幾個元素絕對定位，并一次設(shè)置他們的位置得到如下圖的樣子也就是我們所說的五個環(huán)但他們不是互相嵌套的。 又想起08年的北京奧運會 其實更多的是 小岳岳的五環(huán) 還有hot-dog的rap 哼~就把車子開上五環(huán) 廢話不說了 否則就變成演唱會了。showImg(https://segm...
摘要：根據(jù)以往的經(jīng)驗，對于很多初學(xué)者，分頁功能實現(xiàn)起來還是有一定的困難的，為了幫大家解決這樣的問題特此獻(xiàn)上五環(huán)之歌。正式進(jìn)入千鋒五環(huán)之歌之步驟實現(xiàn)分頁功能。 根據(jù)以往的經(jīng)驗，對于很多初學(xué)者，分頁功能實現(xiàn)起來還是有一定的困難的，為了幫大家解決這樣的問題：特此獻(xiàn)上五環(huán)之歌。從此分頁功能便是如小妹一樣簡練，漂亮，精干。哈哈，不閑扯了。正式進(jìn)入千鋒PHP五環(huán)之歌之步驟實現(xiàn)分頁功能。第一環(huán)：計算總的記...
閱讀 2695·2019-08-30 15:55
閱讀 1821·2019-08-30 15:53
閱讀 2673·2019-08-29 18:38
閱讀 940·2019-08-26 13:49
閱讀 512·2019-08-23 15:42
閱讀 3156·2019-08-22 16:33
閱讀 1018·2019-08-21 17:59
閱讀 1093·2019-08-21 17:11
