Foxtable(狐表)用户栏目专家坐堂 → 固定位置


  共有5270人关注过本帖树形打印复制链接

主题:固定位置

帅哥哟,离线,有人找我吗?
刘林
  1楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级:八尾狐 帖子:1936 积分:14844 威望:0 精华:0 注册:2016/4/28 9:58:00
固定位置  发帖心情 Post By: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>


老师请问一下,试作测试一个将五环定位的页面正中固定,但结果不对呢,该怎样改?

 回到顶部
帅哥哟,离线,有人找我吗?
有点甜
  2楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级:版主 帖子:85326 积分:427815 威望:0 精华:5 注册:2012/10/18 22:13:00
  发帖心情 Post By: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>


 回到顶部
帅哥哟,离线,有人找我吗?
刘林
  3楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级:八尾狐 帖子:1936 积分:14844 威望:0 精华:0 注册:2016/4/28 9:58:00
  发帖心情 Post By:2018/7/26 17:27:00 [只看该作者]

老师,我是要测试将这个五环图固定在页面的正中,不随滚动条滚动而滚动

 回到顶部
帅哥哟,离线,有人找我吗?
有点甜
  4楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级:版主 帖子:85326 积分:427815 威望:0 精华:5 注册:2012/10/18 22:13:00
  发帖心情 Post By:2018/7/26 17:34:00 [只看该作者]

.abc{position: fixed;float: left;left: 50%;}

 回到顶部