0x00:
这里我们对前面学习到的知识练练手，来做个奥运五环试试！
工具：visual code
环境：win11
浏览器：chrome
?0x01:成品展示
先来看看我们要做成的成品
?0x02:分析
我们看到了我们需要做成的成品，那么我们要怎么去做成这样的成品，首先我们可以想到这一个个的环形最开始是一个盒子模型，那么这五个环我们是不是可以看成是五个盒子叠加在一起？
思路：我们可以先做一个盒子模型，然后把这个模型调成圆形(也就是我们想要的形状)，然后我们再多做几个，把它们的位置改一下，加上颜色，是不是就可以做成五环了？下面我们来试试：
0x03:实现过程?
01：首先来建一个模型：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>奥运五环</title>
<style>
/* 首先排除不必要的干扰 */
*{
margin:0;
padding:0;
}
div{
width:200px;
height:200px;
background-color: cyan;
}
</style>
</head>
<body>
<!-- 首先来建一个div标签作为第一个环的模型，然后我们更改它的样式就可以
第一个做好了，其他的环就都可以复制 -->
<div></div>
</body>
</html>?
02：开始做我们的环
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>奥运五环</title>
<style>
/* 首先排除不必要的干扰 */
*{
margin:0;
padding:0;
}
div{
width:200px;
height:200px;
/* background-color: cyan; */
border-radius:50%;
/* border-width: 2px;
border-style: solid;
border-color: red; */
border:6px solid red;
}
</style>
</head>
<body>
<!-- 首先来建一个div标签作为第一个环的模型，然后我们更改它的样式就可以
第一个做好了，其他的环就都可以复制 -->
<div></div>
</body>
</html>
?第一个环做好了，接下来我们按照这个模板去做剩下的四个环就可以了：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>奥运五环</title>
<style>
/* 首先排除不必要的干扰 */
*{
margin:0;
padding:0;
}
div{
width:200px;
height:200px;
/* background-color: cyan; */
border-radius:50%;
/* border-width: 2px;
border-style: solid;
border-color: red; */
/* 这些太麻烦，我们可以直接用一句话 */
border:6px solid red;
}
</style>
</head>
<body>
<!-- 首先来建一个div标签作为第一个环的模型，然后我们更改它的样式就可以
第一个做好了，其他的环就都可以复制 -->
<div></div>
<!-- 给它们一个id便于对每个环进行单独设置 -->
<div id="black"></div>
<div id="green"></div>
<div id="yellow"></div>
<div id="blue"></div>
</body>
</html>
?因为都是div标签，所以对div标签做的设置都会生效
03：排列环的位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>奥运五环</title>
<style>
/* 首先排除不必要的干扰 */
*{
margin:0;
padding:0;
}
div{
width:200px;
height:200px;
/* background-color: cyan; */
border-radius:50%;
/* border-width: 2px;
border-style: solid;
border-color: red; */
/* 这些太麻烦，我们可以直接用一句话 */
border:6px solid red;
}
#black{
margin-left:212px;
margin-top:-212px;
border-color: black;
}
#green{
border-color:green;
margin-left:424px;
margin-top:-212px;
}
#yellow{
border-color:yellow;
margin-top:-106px;
margin-left:106px;
}
#blue{
border-color: blue;
margin-left:318px;
margin-top:-212px;
}
</style>
</head>
<body>
<!-- 首先来建一个div标签作为第一个环的模型，然后我们更改它的样式就可以
第一个做好了，其他的环就都可以复制 -->
<div></div>
<!-- 给它们一个id便于对每个环进行单独设置 -->
<div id="black"></div>
<div id="green"></div>
<div id="yellow"></div>
<div id="blue"></div>
</body>
</html>
分别单独对每一个环的边框做个设置，然后调节一下环的位置，这里涉及到一些小小的计算，做出来的效果如上，哈哈是不是很简单。?