奥运五环

最新推荐文章于 2024-08-05 17:30:48 发布

希境

最新推荐文章于 2024-08-05 17:30:48 发布

阅读量668

点赞数 1

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

本文链接：https://blog.csdn.net/qq_44969643/article/details/104136586

版权

html+css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

用html+css写一个奥运五环

要求：
** 无论怎样改变浏览器宽高，该五环都在正中央。**

1 先看效果图

在这里插入图片描述
缩小后效果为：

2 分析

1）将五个圆环装在一个盒子里。
2）内部：以一个环固定，合理的布局其余四个环的相对位置。
3）外部：再将整个盒子摆在正当中。
在这里插入图片描述

3 所需知识点

1）盒子模型
1，由于大盒子之上没有其他定位，所以4个定位都可以。但五个小环要选用绝对定位，因为他们会相对父级进行移动（否则会相对文档移动）。代码中第一个圆由于顶格大盒子，可以不用定位。

2）仔细计算
1，定位的计算：上、左50%（使用百分比就可以不用初始化8px了）只是相对于边框，真正的还要向左上角移半个身位。
2，大盒子里面的两个环之间距离我设置的与圆环等宽。

4 代码

html：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>
		奥运五环！
	</title>
	<link rel="stylesheet" type="text/css" href="wuhuan.css">
</head>
<body>
<div id="main">
	
<div id="blue"></div>
<div id="yellow"></div>
<div id="black"></div>
<div id="green"></div>
<div id="red"></div>
	
</div>

</body>
</html>

css:

*{
	margin: 0px;
}
#main{
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -190px;
	margin-top: -90px;
}
#blue{
	position: absolute;
	width: 100px;
	height: 100px;
	border: 10px solid #00f;
    border-radius: 50%;
    z-index: 0;
}
#yellow{
	position: absolute;
	width: 100px;
	height: 100px;
	border: 10px solid #ff0;
    border-radius: 50%;
    z-index: 1;
    left: 65px;
    top: 60px;
}
#black{
	position: absolute;
	width: 100px;
	height: 100px;
	border: 10px solid #000;
    border-radius: 50%;
    z-index: 0;
    left: 130px;
    top: 0px;
}
#green{
	position: absolute;
	width: 100px;
	height: 100px;
	border: 10px solid #0f0;
    border-radius: 50%;
    z-index: 1;
    left: 195px;
    top: 60px;
}
#red{
	position: absolute;
	width: 100px;
	height: 100px;
	border: 10px solid #f00;
    border-radius: 50%;
    z-index: 0;
    left: 260px;
    top: 0px;
}