<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="lesson5.css">
</head>
<body>
<div class="plat">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
<div class="circle5"></div>
</div>
</body>
</html>
/*初始化*/
*{
margin:0;
padding:0;
}
.plat{
/*位置,相对*/
position: absolute;/*relative;*/
/*在页面,左移50%*/
left:50%;
/*在页面,上移50%*/
top:50%;
/*边缘靠左,可保持页面向左变而移动*/
margin-left:-190px;
/*边缘靠上,可保持页面向上变而移动*/
margin-top:-93px;
/*边界线上镶边大小,关闭该项不显示边界线*/
/*border:1px solid black;*/
/*高度*/
height:186px;
/*宽度*/
width:380px;
}
/*设置圆形*/
.circle1,
.circle2,
.circle3,
.circle4,
.circle5{
/*位置,绝对性原素*/
position:absolute;
/*设置宽100像素*/
width: 100px;
/*设置高100像素*/
height: 100px;
/*设置边界,类型,大小,颜色*/
border:10px solid #F00;
border-radius:50%;
}
.circle1{
/*边界线颜色*/
border-color:#F00;
/*靠左,右移动*/
left:0;
/*靠上,下移动*/
top:0;
}
.circle2{
/*边界线颜色*/
border-color:green;
/*靠左,右移动*/
left:130px;
/*靠上,下移动*/
top:0;
}
.circle3{
/*边界线颜色*/
border-color:yellow;
/*靠左,右移动*/
left:260px;
/*靠上,下移动*/
top:0;
}
.circle4{
/*边界线颜色*/
border-color:black;
/*靠左,右移动*/
left:65px;
/*靠上,下移动*/
top:70px
}
.circle5{
/*边界线颜色*/
border-color: purple;
/*靠左,右移动*/
left:195px;
/*靠上,下移动*/
top:70px;
}