《2018年9月8日》【连续340天】
标题：css作业：奥运五环绘制；
内容：
今天完成了一个绘制奥运五环的作业，
要求：绘制奥运五环，并定位在网页正中间；
我的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>五环</title>
<link rel="stylesheet" type="text/css" href="t1.css">
</head>
<body>
<div>
<span class="blue"></span>
<span class="black"></span>
<span class="red"></span>
<span class="yellow"></span>
<span class="green"></span>
</div>
</body>
</html>*{
margin:0;
padding: 0;
}
div{
width: 720px;
height: 340px;
position: absolute;
left: 50%;
top:50%;
margin-left: -360px;
margin-top: -170px;
}
span{
display: block;
width: 200px;
height: 200px;
border-radius: 50%;
position: relative;
}
.blue{
border:10px solid blue;
}
.black{
border:10px solid black;
left: 250px;
top: -220px;
z-index: 1;
}
.red{
border:10px solid red;
left: 500px;
top: -440px;
z-index: 3;
}
.yellow{
border:10px solid yellow;
left: 100px;
top:-540px;
}
.green{
border:10px solid green;
left: 350px;
top:-760px;
z-index: 2;
}效果：
挺简单的，就是定位烦了点；
扫一扫
1850
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
