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

时间:2019-03-12
本文章向大家介绍html/css-五环图样制作(网页居中定位广告制作),主要包括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;
}
  • 图片样式: