html+css制作五環（代碼極簡）
五環
把五環做成一個浮動，總是位于螢幕中央的效果。
難點
定位的練習 position ：fixed
位于body中間的時候 left：50%；top:50%;
css内部樣式表的使用 style="text/css"
方法
使用border-radius: 50%再加上z-index設定層疊關系
首先我們用5個塊級元素來形成5個環的顔色和形狀，并把這5個環放置到一個父級容器div内，再将這個父級元素div放置到浏覽器中間位置。
設計須知
div的作用:div是一個塊級元素。它可以将html分割成獨立的、不同的部分。如果用id和class來标記div，那麼該标簽便可以被css所使用變的更有效，通過id或class設計各種的樣式。
設計細節
html的設計：
首先給5個環設定class用來css檔案關聯樣式，并把這5個環放置一個父級div中
div class ="plat">
<div class="a1"></div>
<div class="a2"></div>
<div class="a3"></div>
<div class="a4"></div>
<div class="a5"></div> css樣式設計：
通過綁定html中設定好的class，然後繪制五個環的形狀和大小還有位置
.a1,.a2,.a3,.a4,.a5{
position:absolute;
width: 100px;
height: 100px;
background-color: transparent;
border: 10px solid;
border-radius: 110px;
} 繪制每個環的顔色和位置：
.a1{
border-color: blue;
left: 0;
top: 0;
}
.a2{
border-color: black;
top: 0px;
left: 130px;
z-index: 4;
}
.a3{
border-color: yellow;
top: 0px;
left: 260px;
z-index: 4;
}
.a4{
border-color: red;
top: 65px;
left: 65px;
z-index: 5;
}
.a5{
border-color: green;
top: 65px;
left: 198px;
z-index: 6;
} 設計父級div的位置：
首先要知道，我們設計的5環是在div内部，是以調整div的位置便可以實作浏覽器居中i效果。
.plat{
position: fixed;
top: 50%;
left: 50%;
margin-left:-140px;
margin-top: -70px;
width: 280px;
height: 140px;
} 代碼
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>居中五環</title>
<style type="text/css">
.a1,.a2,.a3,.a4,.a5{
position:absolute;
width: 100px;
height: 100px;
background-color: transparent;
border: 10px solid;
border-radius: 110px;
}
.plat{
position: fixed;
top: 50%;
left: 50%;
margin-left:-140px;
margin-top: -70px;
width: 280px;
height: 140px;
}
.a1{
border-color: blue;
left: 0;
top: 0;
}
.a2{
border-color: black;
top: 0px;
left: 130px;
z-index: 4;
}
.a3{
border-color: yellow;
top: 0px;
left: 260px;
z-index: 4;
}
.a4{
border-color: red;
top: 65px;
left: 65px;
z-index: 5;
}
.a5{
border-color: green;
top: 65px;
left: 198px;
z-index: 6;
}
</style>
<body>
<div class ="plat">
<div class="a1"></div>
<div class="a2"></div>
<div class="a3"></div>
<div class="a4"></div>
<div class="a5"></div>
<div>
</body>
</html> 效果
原文位址
https://www.cnblogs.com/gzyc/p/10604474.html![一位經驗豐富的前端開發人員因未能通過算法面試題而受人嘲笑[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)