五环

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

难点

  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. 基于bootstrup treeview多级列表树插件

    <!doctype html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  2. PHPCMS v9 安全防范教程！

    一.目录权限设置很重要:可以有效防范黑客上传木马文件.如果通过 chmod 644 * -R 的话,php文件就没有权限访问了.如果通过chmod 755 * -R 的话,php文件的权限就高了. 所 ...

  3. 【leetcode 简单】 第一百零六题 压缩字符串

    给定一组字符,使用原地算法将其压缩. 压缩后的长度必须始终小于或等于原数组长度. 数组的每个元素应该是长度为1 的字符(不是 int 整数类型). 在完成原地修改输入数组后,返回数组的新长度. 进阶: ...

  4. 18、Random类简介

    Random类概述 Random类在java.util包下,使用这个类可以生成随机数 package com.sutaoyu.usually_class; import java.util.Rando ...

  5. HTML5之2D物理引擎 Box2D for javascript Games 系列 第二部分

    这是系列第二部分,之前部分在本博客中找 源码demo存放在https://github.com/willian12345/Box2D-for-Javascript-Games 向世界添加刚体 刚体(B ...

  6. springboot中报异常Whitelabel Error Page

    开始以为是url写错了,但其实不是,然后启动application类在的包是要在最顶部,并且和pom中groupid一样 这个也没错,后来发现能访问RestController中的url,但是进不了方 ...

  7. 使用java8的StreamAPI对集合计算进行代码重构

    方法: 查询出所有部门成员中年龄大于30的员工姓名 部门对象: 员工对象: 模拟数据: private static List<Dept> list=new ArrayList<De ...

  8. DRM/KMS 基本组件介绍

    Each DRM device provides access to manage which monitors and displays are currently used and what fr ...

  9. 02 How to Write Go Code 如何编写go语言代码

    How to Write Go Code   如何编写go语言代码 Introduction   介绍 Code organization  组织代码 Overview  概述 Workspaces  ...

  10. 使用PyMongo访问需要认证的MongoDB

    Windows 10家庭中文版,Python 3.6.4,PyMongo 3.7.0,MongoDB 3.6.3,Scrapy 1.5.0, 前言 在Python中,使用PyMongo访问Mongod ...