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