首页
视频
资源
登录
原
html使用定位实现同心圆
2636
人阅读
2022/3/25 11:41
总访问:
555206
评论:
0
收藏:
0
手机
分类:
前端
方法1:div有层级关系 ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .lx { top: 30px; left: 450px; position: absolute; } .yangshi { border-radius: 50%; position: relative; } .yi { width: 500px; height: 500px; border: 20px solid brown; top: 30px; left: 30px; position: absolute; } .er { width: 300px; height: 300px; border: 20px solid aqua; top: 80px; left: 80px; position: absolute; } .sang { width: 200px; height: 200px; border: 20px solid chocolate; top: 30px; left: 30px; position: absolute; } .si { width: 100px; height: 100px; border: 20px solid darkmagenta; top: 30px; left: 30px; position: absolute; } </style> </head> <body> <div class="lx"> <div class="yangshi yi"> <div class="yangshi er"> <div class="yangshi sang"> <div class="yangshi si"> </div> </div> </div> </div> </div> </body> </html> ``` 方法2:没有层级关系 ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body { margin: 0px; } .item { height: 100px; width: 100px; border-radius: 50%; box-sizing: border-box; position: absolute; } .circle1 { border: 7px solid blue; left: 300px; top: 300px; height: 100px; width: 100px; } .circle2 { border: 7px solid black; left: 250px; top: 250px; height: 200px; width: 200px; } .circle3 { border: 7px solid red; left: 200px; top: 200px; height: 300px; width: 300px; } .circle4 { border: 7px solid yellow; left: 150px; top: 150px; height: 400px; width: 400px; } .circle5 { border: 7px solid green; left: 100px; top: 100px; height: 500px; width: 500px; } </style> </head> <body> <div class="item circle1"></div> <div class="item circle2"></div> <div class="item circle3"></div> <div class="item circle4"></div> <div class="item circle5"></div> </body> </html> ```
欢迎加群讨论技术,1群:677373950(满了,可以加,但通过不了),2群:656732739
👈{{preArticle.title}}
👉{{nextArticle.title}}
评价
{{titleitem}}
{{titleitem}}
{{item.content}}
{{titleitem}}
{{titleitem}}
{{item.content}}
TeachingNote
这一生多幸运赶上过你.
博主信息
排名
6
文章
6
粉丝
16
评论
8
文章类别
.net
36篇
后端
5篇
ORM
16篇
前端
43篇
随笔
13篇
移动开发
6篇
数据库
6篇
英语
3篇
rabbitmq
1篇
.net core
4篇
unity
1篇
k8s
1篇
云服务
1篇
DDD
1篇
网络
1篇
更多
mysql
1篇
python
2篇
docker
1篇
最新文章
最新评价
{{item.articleTitle}}
{{item.blogName}}
:
{{item.content}}
关于我们
ICP备案 :
渝ICP备18016597号-1
网站信息:
2018-2024
TNBLOG.NET
技术交流:
群号656732739
联系我们:
contact@tnblog.net
欢迎加群
欢迎加群交流技术