用css实现奥运五环样式，并且于页面居中显示，不随页面滚动条而移动，一直处于居中位置。
html代码部分就一个div里边包含5个div。代码如下：
<!DOCTYPE html><html lang="en"><head> <meta chart="UTF-8"> <meta name="viewport" content="width=devi名人传ce-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <!-- <link rel="stylesheet" type="text/css" href="./test2.css"> --><style> div.main{ position: fixed; left: 50%; top: 50%; margin-left: -190px; margin-top: -95px;}div.cir1{ width: 100px; height: 100px; border:10px solid #00f; border-radius: 50%; 小班工作计划 z-index: 1; position: relative;}div.cir2{ width: 100px; height: 100px; border: 10px solid #ff0; border-radius: 50%; z-index: 2; position: absolute; left: 60px; top: 50px;}div.cir3{ width: 100px; height: 100px; border: 10px solid #000; border-radius: 50%; z-index: 1; position: absolute; left: 130px; top: 0px;}div.cir4{ width: 100px; height: 100px; borde北京大学前身r: 10px solid #0f4; 莆田景区 border-radius: 50%; z-index: 1; position: absolute; left:200px; top:50px;}div.cir5{ width: 100px; height: 100px; border: 10px solid #f00; border-radius: 50%; z-index: 2; position: absolute; left: 260px; top: 0px;} </style> </head><body> <div class="main"> <div class="cir1"></div> <div class="ci扣好第一粒扣子r2"></div> <div class="cir3"></div> <div class="cir4"></div> <div class="cir5"></div> </div> </body></html>效果图：
本文地址：https://blog.csdn.net/loringray/article/details/85947668
本文发布于:2023-04-07 12:28:16，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/0a549c94267d9fd79465b29a206d446b.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：用css写一个有趣的奥运五环~。.doc
本文 PDF 下载地址：用css写一个有趣的奥运五环~。.pdf
| 留言与评论（共有 0 条评论） |
