CSS + radius 五環(huán)

2016/11/12 8:48:56 閱讀：2583 發(fā)布者：2583

使用CSS的外鏈方式，寫了一個五環(huán)

CSS的布局

附加radius的使用

思路：

一個大盒子里放兩個子盒子；

兩個子盒子上下排列，分別放3個和2個盒子用來制作圓環(huán)；

大盒子給相對定位，連個子盒子設(shè)為絕對定位；

用到CSS中的 border-radius 方法制作圓環(huán)，前提是用來制
作圓環(huán)的五個盒子要添加邊框 border 這個屬性

html代碼

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

<link rel="stylesheet" href="css/base.css" />
       <title>五環(huán)</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代碼

/*給外面的盒子添加樣式和定位，主要是為了給五個環(huán)一個整體的定位*/
.radius{
   position: relative;
   width: 300px;
   height: 150px;
   margin: 0 auto;
   padding: 0;
   background-color: lightskyblue;
}

/*給五個將要設(shè)置成環(huán)的盒子統(tǒng)一設(shè)置CSS樣式*/
.b-r{
   float: left;
   width: 80px;
   height: 80px;
   border-radius: 50%;/*radius的使用，給一個正方形設(shè)置50%可制作一個圓*/
}
/*分別給五個環(huán)盒子添加邊框和顏色，邊框即圓環(huán)*/
.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;
}

/*然后對上三個環(huán)和下兩個環(huán)進行絕對定位，構(gòu)成一個五環(huán)標記圖*/
.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的布局時，可以先構(gòu)思出一個整體的畫面和給對應(yīng)盒子臨時性
添加背景顏色，這樣是有幫助我們看清盒子之間的層級關(guān)系從而提高效率哦

上一篇標準W3C盒子模型和IE盒子模型

下一篇 CSS3隨內(nèi)容自動伸縮的背景

【微信掃一掃】

CSS + radius 五環(huán)

文章分類

相關(guān)新聞

熱門標簽