这是我的第一篇博客，也是我通过几天的学习制作出来的第一个“网页”，虽然比较简陋，但是我还是很乐意把它记录在这里。
实现功能：随着页面的滑动，页面的缩放扩大，图像始终保持在相对页面的正中央。
首先得确定一些关键字的使用，和css样式的使用。在position中有一个绝对定位的样式关键字absolute。所以只要把第一个环（蓝色）的位置确定后，剩下的其他四个环只要以第一个环的位置为坐标进行绝对定位就ok。
首先初始化margin和padding。让其边距都变为0，这是为了在使用position:absolute的时候更方便定位计算。再将蓝色环的top和right标签进行相对于页面定位，将他们的数值均调为50%。但是因为这个定位是相对于蓝色环的左上角进行定位的，所以需要调节蓝色环的margin-top和蓝色环的margin-right。
.lan{
position: absolute;
position: fixed;
top: 50%;
right:50%;
width: 100px;
height: 100px;
border: 10px solid blue;
margin-top:-90px;
margin-left:-120px;
border-radius: 50%;
z-index: 1;
}
在最初确定好蓝色环的位置后，其他的四个环和蓝色环的调整方式相同。
.hei{
position: absolute;
width: 100px;
height: 100px;
border: 10px solid black;
border-radius: 50%;
margin-left: 60px;
margin-top: -10px;
z-index: 2;
}
.hong{
position: absolute;
width: 100px;
height: 100px;
border: 10px solid red;
border-radius: 50%;
margin-top: -10px;
margin-left: 60px;
z-index: 3;
}
.huang{
position: absolute;
width: 100px;
height: 100px;
border: 10px solid orange;
border-radius: 50%;
margin-left: -120px;
margin-top: 60px;
z-index: 4;
}
.lv{
position: absolute;
width: 100px;
height: 100px;
border: 10px solid green;
border-radius: 50%;
margin-left: 60px;
margin-top: -10px;
z-index: 5;
}
其中，因为五个环应该是嵌套的效果，所以使用了z-side，使五个环在z轴坐标上出现在不同的层上。
最后，因为是五个环整体显示在页面的正中央，所以五个环的相对位置都需要调整，他们的相对位置应该根据整个图形的效果来确定。经过多次的计算他们的margin-top和margin-right值，最后终于将他们显示在了页面的中央。
最后一步就是实现不论页面怎样滑动，或者是扩大缩放页面，使图形始终保持在页面的最中央，这里，我使用了position:fixed来实现这个功能。
以下就是最终的效果图
在这个简单的页面制作过程中，首先得十分明确margin、padding的性质，以及position：absolute的功能以及和absolute:relative的区别。其次还得明确，因为是五个环相对嵌套，所以只需要确定第一个环的位置，剩下的四个环只需要相对第一个环的位置进行定位就ok。
虽然只是实现了一个简单的功能，但是还有很多的地方都得有所改进，希望大家能够多多指教我这个入门新手。