以文本方式查看主题

-  Foxtable(狐表)  (http://foxtable.com/bbs/index.asp)
--  专家坐堂  (http://foxtable.com/bbs/list.asp?boardid=2)
----  固定位置  (http://foxtable.com/bbs/dispbbs.asp?boardid=2&id=122492)
--  作者：刘林
--  发布时间：2018/7/26 17:08:00
--  固定位置
<!DOCTYPE html>

<head>
<meta charset="{CHARSET}">
<title></title>
<style>
*{
margin:0px;
padding:0px;
}
.plat{position:absolute;left:50%;top;50%; height:220;width:380;}
.circle1,.circle2,.circle3,.circle4,.circle5{width:100px;height:100px;border:10px solid black;border-radius: 50%;position:absolute;}
.circle1{border-color:green;left:0px;top:0px;}
.circle2{border-color:black;left:120px;top:0px;}
.circle3{border-color:red;left:240px;top:0px;}
.circle4{border-color:yellow;left:60px;top:60px;}
.circle5{border-color:blue;left:180px;top:60px;}
</style>
</head>
<body>
<div class="plat">
<div class="circle1">
</div>
<div class="circle2">
</div>
<div class="circle3">
</div>
<div class="circle4">
</div>
<div class="circle5">
</div>
</div>
<br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>


老师请问一下，试作测试一个将五环定位的页面正中固定，但结果不对呢，该怎样改？
--  作者：有点甜
--  发布时间：2018/7/26 17:21:00
--  

<!DOCTYPE html>


   <head>
   <meta charset="{CHARSET}">
   <title></title>
<style>   
   *{
   margin:0px;
   padding:0px;
   }
   .abc{position: relative;float: left;left: 50%;}
   .plat{position:relative;left:-50%;top;50%; height:220px;width:380px;}
   .circle1,.circle2,.circle3,.circle4,.circle5{width:100px;height:100px;border:10px solid black;border-radius: 50%;position:absolute;}
   .circle1{border-color:green;left:0px;top:0px;}
   .circle2{border-color:black;left:120px;top:0px;}
   .circle3{border-color:red;left:240px;top:0px;}
   .circle4{border-color:yellow;left:60px;top:60px;}
   .circle5{border-color:blue;left:180px;top:60px;}
</style>
   </head>
   <body>
   <div class="abc">
   <div class="plat">
   <div class="circle1">   
   </div>
   <div class="circle2">   
   </div>
   <div class="circle3">   
   </div>
   <div class="circle4">   
   </div>
   <div class="circle5">   
   </div>
   </div>
   </div>
   <br>
   <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
   </body>
</html>
--  作者：刘林
--  发布时间：2018/7/26 17:27:00
--  
老师，我是要测试将这个五环图固定在页面的正中，不随滚动条滚动而滚动
--  作者：有点甜
--  发布时间：2018/7/26 17:34:00
--  
.abc{position: fixed;float: left;left: 50%;}