CSS + radius 五环

时间：2016-11-09 02:33:03 阅读：284 评论：0 收藏：0 [点我收藏+]

标签：cnn psi sga 2pc xixi fbx qwt fhs lru

使用CSS的外链方式，写了一个五环

CSS的布局

附加radius的使用

思路：

一个大盒子里放两个子盒子；

两个子盒子上下排列，分别放3个和2个盒子用来制作圆环；

大盒子给相对定位，连个子盒子设为绝对定位；

用到CSS中的 border-radius 方法制作圆环，前提是用来制作圆环的五个盒子要添加边框 border 这个属性

html代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />

<link rel="stylesheet" href="css/base.css" />
       <title>五环</title>
   </head>
   <body>
       
       <div class="radius">
           
           <div class="sub">
               <div class="b-r a"></div>
                <div class="b-r b"></div>
                <div class="b-r c"></div>
           </div>
           
           <div class="sup">
               <div class="b-r d"></div>
                <div class="b-r e"></div>
           </div>
       </div>
   </body>
</html>

CSS代码

/*给外面的盒子添加样式和定位，主要是为了给五个环一个整体的定位*/
.radius{
   position: relative;
   width: 300px;
   height: 150px;
   margin: 0 auto;
   padding: 0;
   background-color: lightskyblue;
}

/*给五个将要设置成环的盒子统一设置CSS样式*/
.b-r{
   float: left;
   width: 80px;
   height: 80px;
   border-radius: 50%;/*radius的使用，给一个正方形设置50%可制作一个圆*/
}
/*分别给五个环盒子添加边框和颜色，边框即圆环*/
.a{
   border: 10px solid blue;
}
.b{
   border: 10px solid black;
}
.c{
   border: 10px solid green;
}
.d{
   border: 10px solid yellow;
}
.e{
   border: 10px solid red;
}

/*然后对上三个环和下两个环进行绝对定位，构成一个五环标记图*/
.sub{
   width: 300px;
   height: 100px;
   position: absolute;
   float: left;
   /*background-color: aquamarine;*/
}
.sup{
   width: 200px;
   height: 100px;
    position: absolute;
    margin: 50px;
    /*background-color: cornflowerblue;*/
}

这是最终的效果

技术分享

陌陌说：我们在使用CSS的布局时，可以先构思出一个整体的画面和给对应盒子临时性添加背景颜色，这样是有帮助我们看清盒子之间的层级关系从而提高效率哦

CSS + radius 五环

标签：cnn psi sga 2pc xixi fbx qwt fhs lru

原文地址：http://www.cnblogs.com/bigerf/p/6045129.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行