html/css-五环图样制作（网页居中定位广告制作）

五环图样制作

要求：制作五环图样，使其居中于网页中央，并且随着滑动永远居中；

思路：首先定制一个容器能够将五个图样容器装下，此容器采用fixed定位，使其实现网页滑动定位；五个环形图样容器，采用absolute定位，根据大容器也就是它的父标签进行定位，从而达到协调相互位置的目的；

html代码：

注意： class一般不要用汉字，本博客为了清晰表达才使用；

<!DOCTYPE html>
<html lang="em">
<head>
    <meta charset="UTF-8">
    <title>五环制作</title>
    <link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
     <div class="box">
        <div class="蓝"></div>
        <div class="紫"></div>
        <div class="红"></div>
        <div class="黄"></div>
        <div class="绿"></div>
        <strong ><h3>滚动五环制作</h3></strong>
     </div>
</body>
</html>

css代码：

*{
    /*左右容器外边距，内边距初始化为0*/
    margin:0;
    padding:0;
}
.绿,
.黄,
.紫,
.红,
.蓝{
    /*设置五环共有特性*/
    position:absolute;/*根据父标签进行定位*/
    width:100px;/*五环容器大小*/
    height:100px;
    border:10px solid ; /* 边框像素，边框实体*/
    border-radius:50%;/*50%的边框圆角形成圆*/
    z-index:0; /*所处层级，因为他是大容器，所以层级最低*/
}
strong{
    position:absolute;
    left:50%;
    margin-left:-3em;
    /*想要文本居中，那么外边框就需要左移一半的em（1em代表一个汉字）*/
    top:180px;
}
.box{
    position: fixed;/*滑动定位*/
    /*居中设置*/
    left:50%;/*左边框处于网页左右居中位置，*/
    top:50%;
    margin-left:-190px;
    /*边框往左移动左右距离的一般正好使容器居中*/
    margin-top:-93px;
    /*border:5px solid black;*/ /*大容器测试用例*/
    height:186px;
    width:380px;
}
.蓝{
    border-color:blue;
    /*相对于父标签的位置*/
    top:45px;
    left:55px;
    z-index:3;
}
.紫{
    border-color:purple;
    top:45px;
    left:185px;
    z-index:3;
}
.红{
   border-color:red;
    left:0;
    top:0;
}
.黄{
    border-color:yellow;
    left:260px;
    top:0px;
}
.绿{
    border-color:green;
    left:130px;
    top:0px;
}

图片样式：

html/css-五环图样制作（网页居中定位广告制作）