HTML+CSS 五环居中

最新推荐文章于 2024-01-13 12:31:39 发布

漂泊_人生

最新推荐文章于 2024-01-13 12:31:39 发布

阅读量334

点赞数

分类专栏： HTML\CSS

本文链接：https://blog.csdn.net/u013934107/article/details/99690373

版权

HTML\CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="lesson5.css">
</head>
<body>
	<div class="plat">
		<div class="circle1"></div>
		<div class="circle2"></div>
		<div class="circle3"></div>
		<div class="circle4"></div>
		<div class="circle5"></div>
	</div>
</body>
</html>

/*初始化*/
*{
	margin:0;
	padding:0;
}

.plat{
	/*位置,相对*/
	position: absolute;/*relative;*/
	/*在页面，左移50%*/
	left:50%;
	/*在页面，上移50%*/
	top:50%;
	/*边缘靠左,可保持页面向左变而移动*/
	margin-left:-190px;
	/*边缘靠上，可保持页面向上变而移动*/
	margin-top:-93px;
	/*边界线上镶边大小，关闭该项不显示边界线*/
	/*border:1px solid black;*/
	/*高度*/
	height:186px;
	/*宽度*/
	width:380px;
}

/*设置圆形*/
.circle1,
.circle2,
.circle3,
.circle4,
.circle5{
	/*位置,绝对性原素*/
	position:absolute;
	/*设置宽100像素*/
	width: 100px;
	/*设置高100像素*/
	height: 100px;
	/*设置边界，类型，大小，颜色*/
	border:10px solid #F00;
	border-radius:50%;
}

.circle1{
	/*边界线颜色*/
	border-color:#F00;
	/*靠左，右移动*/
	left:0;
	/*靠上，下移动*/
	top:0;
}

.circle2{
	/*边界线颜色*/
	border-color:green;
	/*靠左，右移动*/
	left:130px;
	/*靠上，下移动*/
	top:0;
}

.circle3{
	/*边界线颜色*/
	border-color:yellow;
	/*靠左，右移动*/
	left:260px;
	/*靠上，下移动*/
	top:0;
}

.circle4{
	/*边界线颜色*/
	border-color:black;
	/*靠左，右移动*/
	left:65px;
	/*靠上，下移动*/
	top:70px
}

.circle5{
	/*边界线颜色*/
	border-color: purple;
	/*靠左，右移动*/
	left:195px;
	/*靠上，下移动*/
	top:70px;
}

漂泊_人生

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
HTML+CSS 五环居中

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href="lesson5.css"></hea...
复制链接

扫一扫

专栏目录