html 页面中央,用html制作一个五环，并让其一直保持在页面的最中央

这是我的第一篇博客，也是我通过几天的学习制作出来的第一个“网页”，虽然比较简陋，但是我还是很乐意把它记录在这里。

实现功能：随着页面的滑动，页面的缩放扩大，图像始终保持在相对页面的正中央。

首先得确定一些关键字的使用，和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。

虽然只是实现了一个简单的功能，但是还有很多的地方都得有所改进，希望大家能够多多指教我这个入门新手。