用css實現奧運五環樣式，并且于頁面居中顯示，不隨頁面滾動條而移動，一直處于居中位置。
html代碼部分就一個div里邊包含5個div。代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- <link rel="stylesheet" type="text/css" href="./test2.css"> -->
<style>
div.main{
position: fixed;
left: 50%;
top: 50%;
margin-left: -190px;
margin-top: -95px;
}
div.cir1{
width: 100px;
height: 100px;
border:10px solid #00f;
border-radius: 50%;
z-index: 1;
position: relative;
}
div.cir2{
width: 100px;
height: 100px;
border: 10px solid #ff0;
border-radius: 50%;
z-index: 2;
position: absolute;
left: 60px;
top: 50px;
}
div.cir3{
width: 100px;
height: 100px;
border: 10px solid #000;
border-radius: 50%;
z-index: 1;
position: absolute;
left: 130px;
top: 0px;
}
div.cir4{
width: 100px;
height: 100px;
border: 10px solid #0f4;
border-radius: 50%;
z-index: 1;
position: absolute;
left:200px;
top:50px;
}
div.cir5{
width: 100px;
height: 100px;
border: 10px solid #f00;
border-radius: 50%;
z-index: 2;
position: absolute;
left: 260px;
top: 0px;
}
</style>
</head>
<body>
<div class="main">
<div class="cir1"></div>
<div class="cir2"></div>
<div class="cir3"></div>
<div class="cir4"></div>
<div class="cir5"></div>
</div>
</body>
</html>
效果圖：
本站文章版權歸原作者及原出處所有 。內容為作者個人觀點， 并不代表本站贊同其觀點和對其真實性負責，本站只提供參考并不構成任何投資及應用建議。本站是一個個人學習交流的平臺，網站上部分文章為轉載，并不用于任何商業目的，我們已經盡可能的對作者和來源進行了通告，但是能力有限或疏忽，造成漏登，請及時聯系我們，我們將根據著作權人的要求，立即更正或者刪除有關內容。本站擁有對此聲明的最終解釋權。
