資訊專欄INFORMATION COLUMN
摘要：顯然目前并不是我們想要的，因此需要用定位來讓每一環(huán)到達(dá)其應(yīng)該在的位置。因?yàn)槊恳粋€環(huán)前面的環(huán)都有高度，所以要在相同的樣式里面加一個絕對定位讓每一個環(huán)都能脫離文檔流，再來看一下效果。這樣初步的五環(huán)就形成了。
說到奧運(yùn)五環(huán)，毋庸置疑，作為中國人我們都非常的熟悉，那么你知道如何用 html+css 來實(shí)現(xiàn)它嗎？
If you say"I don"t know"，那么電腦屏幕前的你就一定要看過來啦！
首先要寫 5 個 div ,為了在寫 css 時(shí)的樣式方便，先給所有 div 設(shè)置一個相同的類名，然后每一個 div 再分別設(shè)置一個類名以便于區(qū)分。
接下來就要寫 css 的樣式了。
相同的樣式
給所有的 div 都設(shè)置一個寬高、邊框以及邊框圓角（因?yàn)槲覀冃枰氖且粋€圓環(huán)，所以邊框圓角的半徑要為寬/高加上邊框?qū)挾鹊囊话耄?，先看一下效果?br>
顯然目前并不是我們想要的，因此需要用定位來讓每一環(huán)到達(dá)其應(yīng)該在的位置。因?yàn)槊恳粋€環(huán)前面的環(huán)都有高度，所以要在相同的樣式里面加一個絕對定位讓每一個環(huán)都能脫離文檔流，再來看一下效果。
.ring{
width: 200px;
height: 200px;
border: 10px solid;
position: absolute;
border-radius: 110px;
}
不同的樣式與定位
首先分別給每一個環(huán)寫上藍(lán)黑紅黃綠的顏色樣式，然后給每一個環(huán)都寫上具體的left值和top值。這樣初步的五環(huán)就形成了。
.one{
border-color: blue;
top: 0;
left: 0;
}
.two{
border-color: black;
top: 0;
left: 230px;
}
.three{
border-color: red;
top: 0;
left: 460px;
}
.four{
border-color: yellow;
top: 110px;
left: 110px;
}
.five{
border-color:green;
top: 110px;
left: 340px;
}
after
現(xiàn)在我們看到的五環(huán)并不是套在一起的，在這里用到了 after 選擇器，通過此選擇器可以再制作出5個與之前一樣的環(huán)，除顏色外的樣式和位置都沒有變，完全就疊加在原來之上。
下面介紹以下 after 的用法：
所有主流瀏覽器都支持 :after 選擇器。
:after 選擇器在被選元素的內(nèi)容后面插入內(nèi)容。
使用 content 屬性來指定要插入的內(nèi)容。
此時(shí)相同代碼部分與之前一樣，所以就用兄弟選擇器的方法寫在一起。
.ring,.ring::after{
width: 200px;
height: 200px;
border: 10px solid;
position: absolute;
border-radius: 110px;
}
.ring::after{
content: "";
top: -10px;
left: -10px;
}
偽元素選擇器的樣式
接下來要想辦法讓環(huán)與環(huán)套在一起了，現(xiàn)在是5個帶有顏色的環(huán)上面有5個還沒有設(shè)置邊框顏色的環(huán)，在設(shè)置 border-radius 之前它們是正方形，因此現(xiàn)在也是一樣有上下左右4個邊框的，所以只要把顯示在鄰近環(huán)底下的那一部分邊框顏色設(shè)置為透明，并且把顯示在鄰近環(huán)上面的那一部分邊框設(shè)置 z-index=1。
.one::after{
border-color: blue;
z-index: 1;
border-bottom-color: transparent;
}
.two::after{
border-color: black;
z-index: 1;
border-left-color: transparent;
}
.three::after{
border-color: red;
z-index: 2;
border-left-color: transparent;
}
.four::after{
border-color: yellow ;
}
.five::after{
border-color:green;
z-index: 1;
border-top-color: transparent;
}
到這里已經(jīng)完成了，^_^···
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/117510.html
摘要：顯然目前并不是我們想要的，因此需要用定位來讓每一環(huán)到達(dá)其應(yīng)該在的位置。因?yàn)槊恳粋€環(huán)前面的環(huán)都有高度，所以要在相同的樣式里面加一個絕對定位讓每一個環(huán)都能脫離文檔流，再來看一下效果。這樣初步的五環(huán)就形成了。 說到奧運(yùn)五環(huán)，毋庸置疑，作為中國人我們都非常的熟悉，那么你知道如何用 html+css 來實(shí)現(xiàn)它嗎？If you sayI dont know，那么電腦屏幕前的你就一定要看過來啦！ 首...
摘要：又想起年的北京奧運(yùn)會其實(shí)更多的是小岳岳的五環(huán)還有的哼就把車子開上五環(huán)廢話不說了否則就變成演唱會了。我們最開始將這幾個元素絕對定位，并一次設(shè)置他們的位置得到如下圖的樣子也就是我們所說的五個環(huán)但他們不是互相嵌套的。 又想起08年的北京奧運(yùn)會 其實(shí)更多的是 小岳岳的五環(huán) 還有hot-dog的rap 哼~就把車子開上五環(huán) 廢話不說了 否則就變成演唱會了。showImg(https://segm...
摘要：又想起年的北京奧運(yùn)會其實(shí)更多的是小岳岳的五環(huán)還有的哼就把車子開上五環(huán)廢話不說了否則就變成演唱會了。我們最開始將這幾個元素絕對定位，并一次設(shè)置他們的位置得到如下圖的樣子也就是我們所說的五個環(huán)但他們不是互相嵌套的。 又想起08年的北京奧運(yùn)會 其實(shí)更多的是 小岳岳的五環(huán) 還有hot-dog的rap 哼~就把車子開上五環(huán) 廢話不說了 否則就變成演唱會了。showImg(https://segm...
摘要：根據(jù)以往的經(jīng)驗(yàn)，對于很多初學(xué)者，分頁功能實(shí)現(xiàn)起來還是有一定的困難的，為了幫大家解決這樣的問題特此獻(xiàn)上五環(huán)之歌。正式進(jìn)入千鋒五環(huán)之歌之步驟實(shí)現(xiàn)分頁功能。 根據(jù)以往的經(jīng)驗(yàn)，對于很多初學(xué)者，分頁功能實(shí)現(xiàn)起來還是有一定的困難的，為了幫大家解決這樣的問題：特此獻(xiàn)上五環(huán)之歌。從此分頁功能便是如小妹一樣簡練，漂亮，精干。哈哈，不閑扯了。正式進(jìn)入千鋒PHP五環(huán)之歌之步驟實(shí)現(xiàn)分頁功能。第一環(huán)：計(jì)算總的記...
閱讀 2795·2021-11-16 11:44
閱讀 969·2021-10-09 09:58
閱讀 4489·2021-09-24 09:48
閱讀 4249·2021-09-23 11:56
閱讀 2407·2021-09-22 15:48
閱讀 1892·2021-09-07 10:07
閱讀 3204·2021-08-31 09:46
閱讀 504·2019-08-30 15:56
