五环

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

难点

  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. sql 存储时空格转成问号问题

    最近做系统,从邮件中导出邮件,上传到系统中,遇到一个奇葩的问题,如下: 通过本地文件看,文件名中是一个空格,上传至数据库后,展示就变成了问号,究其原因,发现是一个特殊字符导致: 最近认真去查了一下这个 ...

  2. 基于Vue + Vuex + Vue-router + Webpack 2.0打造微信界面

    一.项目简介 基于Vue + Vuex + Vue-router + Webpack 2.0打造微信界面,实现了微信聊天.搜索.点赞.通讯录(快速导航).个人中心.模拟对话.朋友圈.设置等功能. 二. ...

  3. 升级lamp中php5.6到php7.0过程

    升级过程我就直接摘录博友,http://www.tangshuang.net/1765.html,几乎问题和解决办法都是参照他的,所以我也就不另外写了.谢谢!! 周末看了一下php7的一些情况,被其强 ...

  4. sparse coding

    Deep Learning(深度学习)学习笔记整理系列 zouxy09@qq.com http://blog.csdn.net/zouxy09 作者:Zouxy version 1.0 2013-04 ...

  5. iOS学习笔记（3）— 屏幕旋转

    一.屏幕旋转机制: iOS通过加速计判断当前的设备方向和屏幕旋转.当加速计检测到方向变化的时候,屏幕旋转的流程如下: 1.设备旋转时,系统接收到旋转事件. 2.系统将旋转事件通过AppDelegate ...

  6. Redis—数据结构之list

    Redis的列表对象底层所使用的数据结构其中之一就是list. list Redis的list是一个双端链表,其由3部分构成:链表节点.链表迭代器.链表.这一设计思想和STL的list是一样的,STL ...

  7. 使用netcat的正向 / 反向shell

    reverse shell bind shell reverse shell描述图: 在此示例中,目标使用端口4444反向连接攻击主机.-e选项将Bash shell发回攻击主机.请注意,我们也可以在 ...

  8. python 中的__del__

    # -*- coding: utf-8 -*- # @Time : 2018/9/19 20:21 # @Author : cxa # @File : delDemo.py # @Software: ...

  9. MVVM模式的模式简介

    MVVM模式简介 MVVM是Model.View.ViewModel的简写,这种模式的引入就是使用ViewModel来降低View和Model的耦合,说是降低View和Model的耦合.也可以说是是降 ...

  10. 前端打包工具之fis3的初级使用

    说到打包工具,大家都会想到webpack,我之前也接触过webpack,说实话个人觉得webpack上手容易,但是对于新手来说里面有太多坑,配置文件也不简单.于是乎,我转入了fis3阵营,发现fis3 ...