奥运五环的制作

我将在这里慢慢记录自己学习前端的过程

制作奥运五环，首先在HTML内写下需要的五个盒子，并将这五个盒子放入一个大盒子里（绑定化操作）：

HTML内五个盒子（五个环），以及搬运他们的大盒子：
<div class="demo">
		<div class="box1"></div>
		<div class="box2"></div>
		<div class="box3"></div>
		<div class="box4"></div>
		<div class="box5"></div>
	</div>

 

在CSS内，因为五环长相都相同，利用分组选择器写出他们的共同特点：

.box1,
.box2,
.box3,
.box4,
.box5{
	position: absolute;/*进行定位，使本来独占一行的五环，变为一行（absolute:脱离原来位置定位）*/
	width: 100px;
	height: 100px;
	border: 10px solid black;
	border-radius: 50%;
}

之后一一标明他们的颜色，并设置定位的位置（相对于文档，需要进行计算，以确保实现位置的可观性）：

.box1{
	border-color: blue;
	left: 0;
	top: 0;
}
.box2{
	border-color: yellow;
	left: 130px;
	top: 0;
	z-index: 3;  /*类似于z轴坐标的向外延申，将五环放在别的五环上面*/                                                                   
}
.box3{
	border-color: black;
	left: 260px;
	top: 0;
}
.box4{
	border-color: green;
	left: 65px;
	top: 65px;
}
.box5{
	border-color: red;
	left: 195px;
	top: 65px;
}
最后是对父结构的描述：

.demo{
	/*居中操作*/
        position: absolute;/*不可用relative,因为它是相对于自己原来的位置进行定位*/
	left: 50%;
	top: 50%;
	margin-top: -97px;
	margin-left: -195px;
}