居中的五环

来源：互联网发布：信用卡网络盗刷编辑：程序博客网时间：2024/04/29 20:57

1.做一个奥运五环,在页面里水平垂直居中,无论怎样拖拽页面,五环的相应位置都不变.(提示: border-radius: 50%为圆环 ,z-index : 10;(只在定位元素生效,设置环的相压顺序))

代码五环.html

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Wuhuan</title>    <link rel="stylesheet" href="FC.css"></head><body>    <div class = "demo">     <div class = "demo1"></div>     <div class = "demo2"></div>     <div class = "demo3"></div>     <div class = "demo4"></div>     <div class = "demo5"></div>    </div></body></html>

代码FC.css

*{    margin: 0 ;    padding: 0 ;}.demo{    height: 180px;    width: 380px;    position:absolute;    top: 50%;    left: 50%;    margin-top: -100px;    margin-left: -200px;    background-color: pink;  /*为了更好地显示舞台的效果,所以背景置成pink*/}.demo1{    height : 100px;    width : 100px;    position: absolute;    border: 10px solid blue;    border-radius:50%;}.demo2{    height : 100px;    width : 100px;    position:absolute;    left:130px;    border :10px solid black;    border-radius : 50%;}.demo3{    height : 100px;    width : 100px;    position: absolute;    left : 260px;    border : 10px solid red;    border-radius : 50%;}.demo4{    height : 100px;    width : 100px;    position: absolute;    left : 65px;    top : 60px;    border : 10px solid yellow;    border-radius : 50%;}.demo5{    height : 100px;    width : 100px;    position: absolute;    left : 195px;    top : 60px;    border : 10px solid green;    border-radius : 50%;}

0 0

居中的五环

1.做一个奥运五环,在页面里水平垂直居中,无论怎样拖拽页面,五环的相应位置都不变.(提示: border-radius: 50%为圆环 ,z-index : 10;(只在定位元素生效,设置环的相压顺序))

代码 五环.html

代码FC.css

代码五环.html