五环

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

难点

  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>

效果

html+css制作五环（代码极简）的更多相关文章

  1. lombok使用指南，代码极简工具

    我们的项目中会用到各种bean,比如vo,bo,dto等等,bean上的属性我们一般写get(),set()方法,整个java文件看起来很臃肿. 一.简介 我们今天介绍的lombok只用使用注解就可以 ...

  2. 【Python】Python3纯代码极简教程

    #!/usr/bin/python3 ''' Python3.6.x简单教程  示例.注释  交互式和脚本式编程  变量类型  数字(Number)  字符串(String)  列表(Li ...

  3. 【Python】正则表达式纯代码极简教程

    <Python3正则表达式>文字版详细教程链接:https://www.cnblogs.com/leejack/p/9189796.html ''' 内容:Python3正则表达式 日期: ...

  4. 三种简洁的经典高效的DIV+CSS制作的Tab导航简析

    在网页中应用选项卡可以使网页显得更紧凑,结合AJAX技术可以使页面在有限的空间内展现更多的内容.本文主要介绍几种简洁的选项卡效果的实现(不涉及滑动门和AJAX),附有实例,无图片,兼容性较好,方便大家 ...

  5. 原生JS轮播-各种效果的极简实现

    寒假持续摸鱼中~此为老早以前博客的重写,当时还是分开写的,这里汇总重写,正好复习一遍~ 春招我来了! 所有有意思的,一股脑先扔进收藏,然后再也不看哈哈,真是糟糕. 今日事,今日毕,说起来容易. 当时竟 ...

  6. php 极简框架ES发布（代码总和不到 400 行）

    ES 框架简介 ES 是一款 极简,灵活, 高性能,扩建性强 的php 框架. 未开源之前在商业公司 经历数年,数个高并发网站 实践使用! 框架结构 整个框架核心四个文件,所有文件加起来放在一起总行数 ...

  7. 30段极简Python代码：这些小技巧你都Get了么

    学 Python 怎样才最快,当然是实战各种小项目,只有自己去想与写,才记得住规则.本文是 30 个极简任务,初学者可以尝试着自己实现:本文同样也是 30 段代码,Python 开发者也可以看看是不是 ...

  8. 你一定看得懂的 DDD+CQRS+EDA+ES 核心思想与极简可运行代码示例

    前言 随着分布式架构微服务的兴起,DDD(领域驱动设计).CQRS(命令查询职责分离).EDA(事件驱动架构).ES(事件溯源)等概念也一并成为时下的火热概念,我也在早些时候阅读了一些大佬的分析文,学 ...

  9. 逻辑式编程语言极简实现（使用C#） - 4. 代码实现（完结）

    本文是本系列的完结篇.本系列前面的文章: 逻辑式编程语言极简实现(使用C#) - 1. 逻辑式编程语言介绍 逻辑式编程语言极简实现(使用C#) - 2. 一道逻辑题:谁是凶手 逻辑式编程语言极简实现( ...

随机推荐

  1. Tomcat设置编码问题

    为了解决编码问题,在tomcat的server.xml文件中添加了useBodyEncodingForURI="true"配置,如下 <Connector port=&quo ...

  2. SpringCloud (十) Hystrix Dashboard单体监控、集群监控、与消息代理结合

    一.前言 Dashboard又称为仪表盘,是用来监控项目的执行情况的,本文旨在Dashboard的使用 分别为单体监控.集群监控.与消息代理结合. 代码请戳我的github 二.快速入门 新建一个Sp ...

  3. JS回调函数的应用，原来这么简单！

    JS的回调函数很简单,看代码: 在a.js中 var myback = null; function load(obj){ myback = obj; } function save(){ // 后台 ...

  4. 【BZOJ】2655: calc 动态规划+拉格朗日插值

    [题意]一个序列$a_1,...,a_n$合法当且仅当它们都是[1,A]中的数字且互不相同,一个序列的价值定义为数字的乘积,求所有序列的价值和.n<=500,A<=10^9,n+1< ...

  5. opencv的基本数据结构（二）（转）

    转自:原文链接,以下代码.图片.内容有点改动,只为转载不降低博客内容的可阅性,版权归原作者所有. OpenCV中强大的Mat类型大家已经比较熟悉了.这里梳理一些在工程中其他经常用到的几种基本数据类型. ...

  6. 【leetcode 简单】 第一百一十题 分发饼干

    假设你是一位很棒的家长,想要给你的孩子们一些小饼干.但是,每个孩子最多只能给一块饼干.对每个孩子 i ,都有一个胃口值 gi ,这是能让孩子们满足胃口的饼干的最小尺寸:并且每块饼干 j ,都有一个尺寸 ...

  7. Request爬取网站（seo.chinaz.com）百度权重的查询结果

    一:脚本需求 利用Python3查询网站权重并自动存储在本地数据库(Mysql数据库)中,同时导出一份网站权重查询结果的EXCEL表格 数据库类型:MySql 数据库表单名称:website_weig ...

  8. 【译】第十篇 SQL Server代理使用代理帐户

    本篇文章是SQL Server代理系列的第十篇,详细内容请参考原文 在这一系列的上一篇,你查看了msdb库下用于授权访问SQL Server代理的安全角色.这些角色包括SQLAgentUserRole ...

  9. Css3帧动画深入探寻，讲点项目中实际会碰到的问题

    先加个副标题XD --如何解决background-size为100%下处理@keyframes 正是在项目中遇到副标题,才引起我更深入的探寻 先略带一下基本的css3动画 css3的动画实现是通过属 ...

  10. [转]程序进行性能分析工具gprof使用入门

    性能分析工具 软件的性能是软件质量的重要考察点,不论是在线服务程序还是离线程序,甚至是终端应用,性能都是用户体验的关键.这里说的性能重大的范畴来讲包括了性能和稳定性两个方面,我们在做软件测试的时候也是 ...