Html+CSS实现奥运五环的制作超详细讲解，附源码下载

使用html+css来制作一个奥运五环，并且使它始终在浏览器的中央。本人使用的是VsCode（用起来比较简单，舒服）进行的代码的编写，浏览器是google chrome。
1.第一步：设置一个装五环的容器plat。
2.第二步：初始化

*{margin:0;padding:0
}

3.第三步：画圆。
本项目要画五个圆圈，所以我们设置5个div组件，使其class属性分别为circle1,circle2,circle3,circle4,circle5.然后在.css文件中设置每个圆圈的宽高属性。这里将border-radius设置为50%就可以画一个圆圈,因为div为块级元素，独占一行，所形成的五个圆就会如下：

所以我们把五个圆设置定位position: absolute;此时五个圆就都会重合，代码如下

.circle1,
.circle2,
.circle3,
.circle4,
.circle5
{position: absolute;width: 100px;height: 100px;border:10px solid black;border-radius: 50%;
}

4.第四步，分别设置每个圆圈
分别设置5个园的border-color，自己计算距离浏览器左边的left值，使得前面三个圆圈分离出来并且在同一行，即将其top值设置为0。当设置在第四个圆圈的时候，需要换行，即将其top值设置为60px即可。代码如下：

.circle1{border-color: blue;left:0;top:0;
}
.circle2{border-color: burlywood;left:130px;top:0;z-index: 3;/*使这个黄色的circle放在上面*/
}
.circle3{border-color:red;left:260px;top:0;
}
.circle4{border-color: palegreen;left:65px;top:60px;
}
.circle5{border-color:purple ;left:196px;top:60px;
}

此时就能顺利画出一个五环啦！！运行效果图如下：

5.第五步：设置容器，使五环居中显示
设置plat容器，先设置其宽高正好能容下整个五环，为了使五环能随着父级容器的运动而运动，所以要给plat设置一个定位，这里的值只能是absolute，因为如果是relative五环不可能到中间去（这里我也有点不懂为什么只能设置为absolute，希望有大佬可以教教我）。
然后设置left:50%;top:50%;margin-left为负的容器的宽度的1/2，
margin-top为容器height值的1/2.这样就可以使五环居中了（无论怎么移动）。代码如下：

.plat{position: absolute;left:50%;top:50%;margin-left:-190px;margin-top:-90px;/*border:4px solid pink;隐藏掉辅助用的边框*/width: 380px;height: 180px;
}

至此，奥运五环的制作就结束了。
源码下载：奥运五环
提取码：0na3

Html+CSS实现奥运五环的制作超详细讲解，附源码下载相关推荐

【HTML | CSS】纯CSS居然能做出这种效果，一款宝藏网页分享（超详细讲解 | 附源码）
超详细！附源码！SpringBoot+shiro+mybatis+Thymeleaf实现权限登录系统
最近在做一个期末作品,就是使用ssm+thymeleaf+vue+shiro完成一个具有权限登录,且能实现用户信息增删查改的这么一个项目,下面仅仅是实现权限认证和登录.为什么我选shiro,而不选sp ...
微信小程序-传统开发模式实现授权注册登录流程【超详细，附源码】
微信小程序UI自动化实践：python+minium+PO模式（超详细教程附源码供下载）
文章目录前言一.minium介绍二.安装环境 1. 安装minium doc 2. 安装minium 3. 启动小程序三.准备知识 1. 启动 2. 配置 3. 命令行运行 4. 元素定位 5 ...
C语言实现扫雷游戏(超详细讲解+全部源码)
电子信息工科男一点一点努力! 文章目录前言一.游戏介绍二.游戏设计思路二.具体步骤 1.创建test.c和game.c源文件以及 game.h头文件 2.创建菜单 3.创建雷盘 4.初始化 ...
python k-means聚类算法物流分配预测实战（超详细，附源码）
数据集和地图可以点赞关注收藏后评论区留下QQ邮箱或者私信博主要聚类是一类机器学习基础算法的总称. 聚类的核心计算过程是将数据对象集合按相似程度划分成多个类,划分得到的每个类称为聚类的簇聚类不等于分 ...
2022全新超火超热门模板的姓氏头像制作生成微信小程序源码下载
这是一款姓氏头像小程序源码姓氏头像可以说是一个比较热门的一个东西之前小编也发过好几款姓氏头像小程序源码但是模板都太单一了,虎年哪一款在这之前还是挺好的因为检查有模板更新而且还不需要重新更新源码 ...
教你用python制作人脸卡通画（附源码）
教你用python制作人脸卡通画(附源码) 效果展示: 让我们开始学习之路: 原理:利用第三方人脸接口将图像人脸化第三方接口注册地址:https://ai.minivision.cn/#/login ...
云开发表情包制作神器微信小程序源码下载,支持各种自定义
该款小程序是一个表情包制作内容毕竟丰富,另外自定义制作方面也是特别的自由支持自主上传图片,自定义文章,另外拥有多种素材模板以供选择这是一款云开发的小程序,但是安装还是挺简单的搭建教程: 首先使 ...
【小程序源码】云开发表情包制作神器微信小程序源码下载,支持各种自定义
该款小程序是一个表情包制作内容毕竟丰富,另外自定义制作方面也是特别的自由支持自主上传图片,自定义文章,另外拥有多种素材模板以供选择这是一款云开发的小程序,但是安装还是挺简单的搭建教程: 首先使 ...

Html+CSS实现奥运五环的制作超详细讲解，附源码下载

Html+CSS实现奥运五环的制作超详细讲解，附源码下载相关推荐

最新文章

热门文章