五环

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

难点

  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. Redis学习十：Redis的复制(Master/Slave)【重要】

    一.是什么 官网 行话:也就是我们所说的主从复制,主机数据更新后根据配置和策略,自动同步到备机的master/slaver机制,Master以写为主,Slave以读为主 二.能干嘛 读写分离  容灾恢 ...

  2. 微信 js-sdk

    使用方法 http://mp.weixin.qq.com/wiki/11/74ad127cc054f6b80759c40f77ec03db.html Demo http://203.195.235.7 ...

  3. Java使用UDP发送数据到InfluxDB

    最近在做压测引擎相关的开发,需要将聚合数据发送到InfluxDB保存以便实时分析和控制QPS. 下面介绍对InfluxDB的使用. 什么是InfluxDB InfluxDB是一款用Go语言编写的开源分 ...

  4. bzoj 3676 [Apio2014]回文串（Manacher+SAM）

    [题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=3676 [题意] 给定一个字符串,定义一个串的权值为长度*出现次数,求最大权的回文子串. ...

  5. c++刷题（18/100）树

    题目1:二叉搜索树的第k个节点 给定一颗二叉搜索树,请找出其中的第k小的结点.例如, 5 / \ 3 7 /\ /\ 2 4 6 8 中,按结点数值大小顺序第三个结点的值为4. 思路:因为是二叉搜索树 ...

  6. java创建并配置多module的maven项目

    1 使用idea创建(推荐) 这篇博客写的特别好,很详细: https://blog.csdn.net/sinat_30160727/article/details/78109769 2 使用ecli ...

  7. PHP 中 int 和 integer 类型的区别

    半夜整理东西,发现一个以前没留意到的小问题. function show($id) : int { return $id; } function show($id) : integer { retur ...

  8. Linux输入子系统：多点触控协议 -- multi-touch-protocol.txt【转】

    转自:http://blog.csdn.net/droidphone/article/details/8434768 Multi-touch (MT) Protocol --------------- ...

  9. 打包egg

    scrapyd-deploy -p chahao -v 1.0 --build-egg chahao.egg

  10. php中heredoc的使用方法

    Heredoc技术,在正规的PHP文档中和技术书籍中一般没有详细讲述,只是提到了这是一种Perl风格的字符串输出技术.但是现在的一些论坛程序,和部分文章系统,都巧妙的使用heredoc技术,来部分的实 ...