要求：写一个五环，并且使它在浏览器垂直居中
效果如图所示：
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>居中五环</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.father{
width: 350px;
height: 180px;
/* 给父元素设置一个固定定位(也可以是绝对定位) */
position: fixed;
/* 把 left 和 top 值都设 定为 50%，然后把 margin-top 和 margin-left 的值设定为负的元素的半个身位， 即可将元素在浏览器垂直居中*/
left: 50%;
top: 50%;
margin-top: -90px;
margin-left: -175px;
}
.circle1,
.circle2,
.circle3,
.circle4,
.circle5 {
width: 100px;
height: 100px;
border: 5px solid;
border-radius: 50%; /*将其设置为50%时，正方形变为圆环 */
position: absolute;
}
.circle1 {
border-color: red;
}
.circle2 {
border-color: yellow;
left: 240px;
}
.circle3 {
border-color: blue;
left: 60px;
top: 70px;
}
.circle4 {
border-color: purple;
left: 180px;
top: 70px;
}
.circle5 {
border-color: green;
left: 120px;
}
</style>
</head>
<body>
<div class="father">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
<div class="circle5"></div>
</div>
</body>
</html>
2600
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
