定位练习
奥运五环
图片如下:
相关代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>wuhuan</title>
<style>
*
{
margin: 0;
padding: 0;
}
.plat div{
width: 100px;
height: 100px;
border-radius: 50%;
}
.plat
{
/*相当于固定定位*/
position: absolute;
left: 50%;
top:50%;
margin-left: -150px;
margin-top: -100px;
}
.circl1
{
/*定位不代表浮动,所以黑圈需要向左移动*/
/*
这里用定位是为了给别的圈做定位
absolute用来做参照,relative做移动
*/
position: absolute;
border: 10px solid blue;
}
.circl2
{
float: left;
margin-left: 130px ;
border: 10px solid black;
}
.circl3
{
float: left;
margin-left: 10px ;
border:10px solid red;
}
.circl4
{
z-index:1;
float: left;
margin: 62px 0 0 -314px;
border:10px solid yellow;
}
.circl5
{
float: left;
margin: 62px 0 0 -176px;
border:10px solid green;
}
</style>
</head>
<body>
<div class="plat">
<div class="circl1"></div>
<div class="circl2"></div>
<div class="circl3"></div>
<div class="circl4"></div>
<div class="circl5"></div>
</div>
</body>
</html>