html+css制作五环（代码极简）

五环

把五环做成一个浮动，总是位于屏幕中央的效果。

难点

  1. 定位的练习 position ：fixed

  2. 位于body中间的时候 left：50%；top:50%;

  3. css内部样式表的使用 style="text/css"

方法

  1. 使用border-radius: 50%再加上z-index设置层叠关系
  2. 首先我们用5个块级元素来形成5个环的颜色和形状，并把这5个环放置到一个父级容器div内，再将这个父级元素div放置到浏览器中间位置。

设计须知

  1. div的作用:div是一个块级元素。它可以将html分割成独立的、不同的部分。如果用id和class来标记div，那么该标签便可以被css所使用变的更有效，通过id或class设计各种的样式。

设计细节

html的设计：

首先给5个环设置class用来css文件关联样式，并把这5个环放置一个父级div中

div class ="plat"> 
    <div class="a1"></div>
    <div class="a2"></div>
    <div class="a3"></div>
    <div class="a4"></div>
    <div class="a5"></div>
<div>

css样式设计：

  1. 通过绑定html中设置好的class，然后绘制五个环的形状和大小还有位置

     .a1,.a2,.a3,.a4,.a5{
 					position:absolute;	
 					width: 100px;
 					height: 100px;
 					background-color: transparent;
 					border: 10px solid;
 					border-radius: 110px;
 			}

  2. 绘制每个环的颜色和位置：

     		.a1{
 			border-color: blue;
 			left: 0;
 			top: 0;
 
 		}
 		.a2{
 			border-color: black;
 			top: 0px;
 			left: 130px;
 			z-index: 4;
 		}
 		.a3{
 			border-color: yellow;
 			top: 0px;
 			left: 260px;
 			z-index: 4;
 		}
 		.a4{
 			border-color: red;
 			top: 65px;
 			left: 65px;
 			z-index: 5;
 
 		}
 		.a5{
 			border-color: green;
 			top: 65px;
 			left: 198px;
 			z-index: 6;
 		}

  3. 设计父级div的位置：

首先要知道，我们设计的5环是在div内部，所以调整div的位置便可以实现浏览器居中i效果。

.plat{
	
				position: fixed;
				top: 50%;
				left: 50%;
				margin-left:-140px;
				margin-top: -70px;
				width: 280px;
				height: 140px;
			}

代码

	<!DOCTYPE html>
	<html >
	<head>
		<meta charset="UTF-8">
		<title>居中五环</title>
		<style type="text/css">
			.a1,.a2,.a3,.a4,.a5{
					position:absolute;	
					width: 100px;
					height: 100px;
					background-color: transparent;
					border: 10px solid;
					border-radius: 110px;
			}
			.plat{
	
				position: fixed;
				top: 50%;
				left: 50%;
				margin-left:-140px;
				margin-top: -70px;
				width: 280px;
				height: 140px;
			}
			.a1{
				border-color: blue;
				left: 0;
				top: 0;
	
			}
			.a2{
				border-color: black;
				top: 0px;
				left: 130px;
				z-index: 4;
			}
			.a3{
				border-color: yellow;
				top: 0px;
				left: 260px;
				z-index: 4;
			}
			.a4{
				border-color: red;
				top: 65px;
				left: 65px;
				z-index: 5;
	
			}
			.a5{
				border-color: green;
				top: 65px;
				left: 198px;
				z-index: 6;
			}
		</style>
		
	<body>
	<div class ="plat">	
		<div class="a1"></div>
		<div class="a2"></div>
		<div class="a3"></div>
		<div class="a4"></div>
		<div class="a5"></div>
	<div>
		
	</body>
	</html>

效果

posted @ 2019-03-26 22:53  差生_G  阅读(2633)  评论(4)  编辑  收藏  举报