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