html + css 实现奥运五环并一直在页面居中

王大傻0928

于 2024-01-13 12:31:39 发布

阅读量594

点赞数 8

分类专栏： html css 文章标签： css html css3

本文链接：https://blog.csdn.net/weixin_49981930/article/details/124774714

版权

html 同时被 2 个专栏收录

10 篇文章 1 订阅

订阅专栏

css

7 篇文章 0 订阅

订阅专栏

实现效果图：
在这里插入图片描述
奥运五环.html代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>奥运五环</title>
	<link rel="stylesheet" type="text/css" href="奥运五环.css">
</head>
<body>
	<div class="plat">
		<div class="round1"></div>
		<div class="round2"></div>
		<div class="round3"></div>
		<div class="round4"></div>
		<div class="round5"></div>
	</div>
</body>
</html>

奥运五环.css代码：

*{
	margin: 0;
	padding: 0;
}


.plat{
	position: absolute;
	left: 50%;
	top: 50%;
	width: 390px;
	height: 180px;
	margin-left: -195px;
	margin-top: -90px;
}


.round1,
.round2,
.round3,
.round4,
.round5{
	position: absolute;
	width: 100px;
	height: 100px;
	border: 10px solid black;
	border-radius: 50%;
}

.round1{
	border-color: blue;
	left: 0;
	top: 0;
}

.round2{
	border-color: orange;
	left: 140px;
	top: 0;
	z-index: 3;
}

.round3{
	border-color: black;
	left: 70px;
	top: 60px;
}

.round4{
	border-color: green;
	left: 280px;
	top: 0;
}

.round5{
	border-color: red;
	left: 210px;
	top: 60px;
}

王大傻0928

关注

8
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
html + css 实现奥运五环并一直在页面居中

实现效果图：html代码：<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>奥运五环</title> <link rel="stylesheet" type="text/css" href="奥运五环
复制链接

扫一扫