2021-11-15

最新推荐文章于 2023-04-24 18:30:00 发布

majunzhaoer

最新推荐文章于 2023-04-24 18:30:00 发布

阅读量617

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/majunzhaoer/article/details/121344825

版权

奥运五环代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
.box1,
.box2,
.box3,
.box4,
.box5{
	position: absolute;
	width: 100px;
	height: 100px;
	border: 10px solid black;
	border-radius: 50%;
}
.div{
	margin:auto;
}
.box1{
	border-color: blue;
	left: 0;
	top: 0;
}
.box2{
	border-color: yellow;
	left: 130px;
	top: 0;
	z-index: 1;                                                              
}
.box3{
	border-color: black;
	left: 260px;
	top: 0;
}
.box4{
	border-color: green;
	left: 65px;
	top: 65px;
}
.box5{
	border-color: red;
	left: 195px;
	top: 65px;
}

.demo{
        position: absolute;
	left: 50%;
	top: 50%;
	margin-top: -97px;
	margin-left: -195px;
}
	</style>
</head>

<body>
	
<div class="demo">
		<div class="box1"></div>
		<div class="box2"></div>
		<div class="box3"></div>
		<div class="box4"></div>
		<div class="box5"></div>
</div>
</body>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

majunzhaoer

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021-11-15

奥运五环代码<!doctype html><html><head><meta charset="utf-8"><style>.box1,.box2,.box3,.box4,.box5{ position: absolute; width: 100px; height: 100px; border: 10px solid black; border-radius: 50%;}.div{ margin:auto;
复制链接

扫一扫